Interactive UI Slicing from Mockup Design to Code

Hernanda Cahyo Kurniawan

Starting at

$

430

About this service

Summary

I specialize in web development with a strong focus on front-end expertise. My skills include seamlessly converting your designs into clean, functional code and delivering fully responsive websites that is SEO friendly, optimized and performant. I will integrate animation on any element that supports animation either from your design or by reference.

Process

Provide Mockup Design
You provide me with your own mockup design (Figma, Adobe XD, etc.)
Provide the font type, color branding and page detail
Supported design file is Adobe XD and Figma, but you can use other design file if any
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
Animation Details
If your design has animation already, I will replicate the animated elements or sections that will perform great on the browser
If your design doesn't have animation and you want to add animation then I will gladly help you to build the animated elements or section
If you want the animation, please provide reference of the web animation that you want, or just give me the details, or let me improvise to make the elements more immersive
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 for the first delivery. This mean it could be less and quicker.

  • How many revision?

    Maximum of 4 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 that you can check later on your laptop, PC or mobile phone.

  • 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?

    No, this package is already include animated sections and elements. You can use the animation from your design if any or pick a reference from site like awwards. You can also let me create a custom animation without reference with no additional cost.

What's included

  • Design to Code Conversion

    Expert translation of your design files (e.g., Figma, Adobe XD) into clean, pixel-perfect code. My code is SEO friendly. Every detail of your vision is brought to life with precision, ensuring consistency between design and implementation while adhering to best coding practices.

  • Full Animation Support

    If your design has animation on any elements or willing to add unique animation onto it to make it more immersive, I will gladly help you to build the animation that is robust and optimized for web performance. If your design doesn't have animation yet, I can help to build or create from reference with no additional cost.

  • Responsive Web Pages

    Beautifully designed web pages built using HTML, CSS, and JavaScript, ensuring flawless responsiveness across all devices and screen sizes as well as all browser brand. Whether viewed on mobile, tablet, or desktop, your website will provide an optimal user experience, enhancing engagement and satisfaction.

  • Maximum of 3x Revision

    I provided maximum of 3x revision for the final product with no additional cost. Only adjustment and revision related to the design and code with no major changes is allowed. Major changes include a lot of redesign or complete mockup redesign.

Duration

1 week

Skills and tools

Frontend Engineer

Website CSS

Web Developer

CSS3

CSS3

GSAP

GSAP

HTML5

HTML5

JavaScript

JavaScript

three.js

three.js

Industries

Engineering & Architecture
Search Engines
Design

More services

Multiple Pages UI Slicing Mockup to Code

STARTING AT

$1,200

fixed rate

Responsive Website Design

STARTING AT

$250

fixed rate

Responsive HTML Email Template

STARTING AT

$250

fixed rate