PSD to HTML conversion of 4 pages including responsive work, retina support, custom animations, parallax effects and a few more JavaScript features.
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.
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:
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:
The time frame for the project was 5 Business Days
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.
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 ).
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.
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.
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.
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.
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.
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.
Check out the video below the see the whole thing in action
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.
PSD to HTML conversion of 10 pages using Bootstrap, including responsive work, retina support, custom animations, parallax effects and additional JavaScript features.
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.
