Static UI Slicing From Mockup Design to Code

Starting at

$

250

About this service

Summary

Provide expert UI slicing services to convert design files into static web page. With 8+ years of web development experiences, I ensured precise implementation of design elements using clean code techniques, responsive, cross browser compatibilites and semantic.

Process

Provide Mockup Design
You provide me with your own mockup design
Provide the font type, color branding and page detail
Supported desgin file is Adobe XD and Figma
If you only have image (JPG, PNG, etc.) then I will create the layout instead with all the content and image assets randomly use public resources (free stock images, etc.)
Technology Stack Request
Pick what kind of stacks that you need
You can pick vanilla (HTML,CSS,JavaScript) or you can pick SCSS or Typescript
Converting Your Mockup Design into Code
Let me do the work, I will get back to you once I finished coding
Full Source Codes Delivery
Once I finish all the code, I will send you the full source code of the project based on your request and deliverables + tech stacks
Virtual Meeting
If you need to have virtual meeting, I am currently open to scheduled meeting to talk about the project (Google Meet or Calendly prefered)
Revision (3x)
I provided 3 times revision request max with no additional cost
The revision should be related to the deliverable previously delivered
No major changes allowed like full page redesign or tech stacks change as it will be completely redo my work from zero
Finish and Review

FAQs

  • Is there a portfolio I can check to see if it fits my taste?

    Sure, please check my website for curated projects: https://hernandack.com

  • How long it will take to convert the mockup into code?

    It depends on the complexity of the mockup or the tech stacks used. Generally, I promised to deliver within 1 week maximum. This mean it could be less and quicker.

  • How many revision?

    Maximum of 3 non-major revision is allowed. No major changes allowed like full page redesign or tech stacks change as it will be completely redo my work from zero which basically I need to revert it from scratch.

  • Can I see a working demo or preview or prototype online?

    Yes. If you need to check and test the working demo for your web, I would gladly deploy it on my own server. This only applies to the vanilla deliverables so that I can create full page preview for you.

  • What if I don't have all the assets from the design?

    Normally, if you have the Adobe XD or Figma design file (url) that can be viewed online, it will have all the assets, it just need proper access from the designer. If in case you only have the JPG or PNG (image only) version of the design then I can only help to create the layout, the image or icons will be different since we can't extract assets from just image file.

  • Is there additional cost for animated section or elements?

    If you want to have a full page that has a lot of animation and micro-interaction, you can pick my Interactive UI Slicing instead. It will have full animation support. This static service will still have small micro-interaction like button hover, colors, etc. by defaul (no additonal cost) but not as complex as the interactive service.

What's included

  • Convert Your Mockup Design into Website Pages

    I will create a reusable HTML, CSS, JS pages from your mockup design (Figma / XD) with full source code, documentation and assets. If you want to use different tech stack like SCSS, Typescript, etc. you obviously can.

  • Full Page Animated from Mockup

    I will convert your mockup design into fully animated website code with GSAP and CSS animation approach if you requested. Please also provide any animation reference if any and if it's suitable for the design.

  • Full Responsive Support on Website Source Code

    I will convert all the mockup into fully responsive website page that will work on cross browser (Edge, Safari, Chrome, Firefox, etc.) and on all devices (Mobile, Tablet, Desktop, etc.)


Duration

1 week

Skills and tools

Frontend Engineer

UX Engineer

Web Developer

CSS3

CSS3

GSAP

GSAP

HTML5

HTML5

JavaScript

JavaScript

three.js

three.js

Industries

Engineering & Architecture
Computer Software