Multiple Pages UI Slicing Mockup to Code

Hernanda Cahyo Kurniawan

Starting at

$

1,200

About this service

Summary

Specialized in creating responsive and mobile-friendly websites using best practices and semantic SEO. Utilized over 8 years of experience to deliver high-quality, complex layouts with smooth animations. Converting your mockup design into a reusable, optimized and well-documented clean codes for your next website.

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
Documentation for some part of the codes to get future-proof source code that will be reusable by you or other developer as it's easy to understand and migrate
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 (4x)
I provided 4 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 2 weeks 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

    With 8+ years of web development experiences, I give 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.

  • Maximum of 5 Pages

    I will create and convert the design into codes with maximum of 5 pages in total

  • 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 4x Revision

    I provided maximum of 4x 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.

  • Web Optimization and Testing

    I will test the web on my own server to optimize the page speed, SEO and web analytics with all semantic approach to get browser-friendly codes. All the assets will also be optimized to get the best quality but still performant for the web.

Duration

2 weeks

Skills and tools

Frontend Engineer

UX Designer

Web Developer

Adobe XD

Adobe XD

CSS

CSS

Figma

Figma

HTML5

HTML5

JavaScript

JavaScript

Industries

Engineering & Architecture
Design
Marketing

More services

Responsive Website Design

STARTING AT

$250

fixed rate

Responsive HTML Email Template

STARTING AT

$250

fixed rate

Static UI Slicing From Mockup Design to Code

STARTING AT

$250

fixed rate