Project Case Study

Design Agency PSD to HTML conversion

PSD to HTML conversion of 4 pages including responsive work, retina support, custom animations, parallax effects and a few more JavaScript features.

  • HTML5 / CSS3
  • Responsive
  • Parallax
  • Custom Animations
  • Counters
  • Content filtering
Preparation

Design

The design was provided as 4 PSD files - homepage, about, pricing and timeline. The design files contained information about the different states: dropdowns, mouse-overs, tooltips, popups. Everything was retina-ready and all layers were well combined in groups.

Design

Requirements

There were just a few requirements for this project. We had done more than 30 projects for this client in the past, so we were pretty much familiar with his requirements and taste.

He provided us with 4 PSD files and a short and simple list of must-have features:

  • Responsiveness
  • Some subtle parallax effects
  • A few different lightboxes
  • Retina support
  • Pixel perfect conversion

Clearing the details

Since we'd had a long partnership with this client, there wasn’t much to discuss. Everything was clear so we were ready to proceed. We prepared the quote with the standard additions that we would do for any project:

  • Responsive work
  • Retina support
  • Subtle animations
  • Custom fonts usage
  • Pixel perfect conversion
  • etc.

And we started...

The time frame for the project was 5 Business Days

Management
Step 1

Management

The project was pretty standard and there was nothing unusual to be done. All of our developers had worked with this client in the past and they were all aware of his requirements. At the time, Garett was available for a new project, so he rolled up his sleeves and got to work.

Slicing
Step 2

Slicing

For most of the icons we used FontAwesome and for the rest we prepared @1x and @2x sprites. Beside the icons, the other images that we had to slice were the actual images ( projects' thumbs and users' pictures ).

Step 3

HTML Coding

We coded the HTML according to our coding standards. Our client was very happy with our standards and he was aware of the HTML structure that we had been using, including all classes and other specific elements. For this project we applied SSI (Server Side Includes) which we usually would do for most projects. Since this particular project had 4 pages, the SSI allowed us to use the same header and footer files.

Step 4

CSS Coding

For the CSS building we used PostCSS. This super fast CSS preprocessor was great for this project since its design was very modern and clean. We prepared everything as separate PostCSS modules to ensure maximum flexibility.

Mobile responsive
Step 5

Responsive version

There were no designs for tablet and mobile devices. Therefore, for the responsive version we followed our best judgment and the world's best practices. What we did, was break the sections with multiple columns into single columns. This way we realigned all the elements that were not mobile-friendly.

Desktop view
Mobile responsive

We prepared a custom burger button for the mobile navigation. To make it more interactive, we applied an animation on changing its state.

For most of the other content areas - we did some rearrangements and resizing in order to fit the content in the screen and make it readable.

Step 6

Parallax and other animations

We applied subtle and smooth animations on the landing page elements by making them fade and move a little when they appeared in the viewport.

We used a similar solution for the inner pages, as well. We made the items fade and move when they became visible.

Project preview

Along with the 4 separate pages, we had to build 3 different lightboxes. One for the projects on the homepage, one for the team members and one for the gallery on the about page. For the projects and gallery we used a super simple popup plugin called "Magnific Popup" since we had to load only simple images. For the members we used a custom one since the content was more complex.

Step 7

Fine tuning and QA

The project was for a design agency and they requested pixel perfect conversion. Therefore, we made screenshots of the templates and we compared the result with the initial design of every single page.

We fixed all differences and made the project pixel perfect.

However, once it was completed, the project was reviewed by Della (our QA) and she noticed some small inconsistances that had to be fixed.

Along with the small differences, she also noticed that a few hover effects were missing.

Della passed on her comments to the developer. He quickly resolved all issues and made the final touches that she had requested.

After Della made sure that all of the updates were properly done, the project was completed.

Project preview
Voilà!

The project is ready!

Check out the video below the see the whole thing in action

Project preview
Delivery

All the hard work is done

We uploaded the project on our preview server and sent the links to the client. He requested a few small additions which we handled in a day. The project was finally completed and our client was fully happy with the result.

Overall

Project Estimate

Price:
$970.00
Timeframe:
5 Business Days
Previous / DesignCorner

PSD to HTML conversion of 10 pages using Bootstrap, including responsive work, retina support, custom animations, parallax effects and additional JavaScript features.

  • HTML5 / CSS3
  • Responsive
  • Bootstrap
  • Parallax
  • Custom Animations
  • Counters
  • Content filtering
Next / UI Kit

PSD to HTML conversion of UI Kit project, including custom JavaScript work (charts, AJAX, drag & drop, sorting, searching, autocomplete, etc.), responsive work, retina support and custom animations.

  • HTML5 / CSS3
  • Responsive
  • Custom Animations
  • Parallax
  • Charts
  • AJAX
  • Drag & Drop
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved