PSD to HTML conversion of one-page Bootstrap project including responsive work, retina support, custom animations and parallax effects.
The design was provided as a well structured PSD file with layer groups. Items like navigation and popups were prepared in separate hidden groups. All groups were in different colors which made the working process very smooth.
The requirements were simple - the project had to be responsive and we had to use Bootstrap. However, there were no designs for the responsive version.
The requirements were simple - the project had to be responsive and we had to use Bootstrap. However, there were no designs for the responsive version.
Our client also had some additional needs:
Our client also wanted the video to be playing fullscreen. We had to think of some modern and slick animation and use a YouTube video.
Although most of the requirements were clear, there were some things that our client hadn’t mentioned. We had to discuss the following:
We discussed these details with our client and we cleared everything up.
After clearing up all the details around the project, we made a summary that showed everything we would be doing:
The time frame for the project was 4 Business Days
The ticket was posted in our client area (The Workshop) and we prepared the schedule. Zack (project manager) assigned the project to Matt (front-end developer) in our project management system and they discussed the requirements. Everything was clear. It was time for slicing!
We sliced the images and exported them as @1x and @2x sprites for non-retina and retina displays respectively. There were only a few images for slicing. We implemented most of the icons as fonts.
The project was pretty straight-forward so we didn’t hesitate too much. For the responsive navigation we built a burger menu with a subtle sliding animation. Along with the animated sidebar, we also decided to animate the burger button to a closing icon in order to become more user-friendly.
Most of the sections were pretty standard and we just split them into 1 or 2 columns for the mobile view. We also tested all buttons and made sure that they were easily clickable.
The client requested some subtle animations for the sections that were about to become visible in the viewport.
For the image in the header we created a JavaScript function that was intended to move the background image at slower pace. This way we achieved the feeling of depth.
For all other sections we implemented a function that was going to move and fade all elements that became visible in the viewport. For the section with vertical elements only we applied a top-to-bottom animation. The sections containing elements in columns were animated from left and right.
Once the development was completed, Matt tested the project on a few different devices and browsers. There were a few small issues and he fixed them. After that, the project was completed and marked as “Ready for QA”.
Then, Della (QA) started the quality assurance process. She reviewed the designs and the summary of the project. She tested the web page on a number of devices and browsers and spotted a few bugs.
Overall she was happy with the result, but there were a few issues that had
to be fixed and she also noticed some things that had to be polished in order to make the project perfect.
She passed her comments to Matt and he resolved all issues and made the final touches that Della requested.
After Della made sure that all of the updates were properly done, the project was reviewed by Zack. Everything is ready!
Check out the video below the see the whole thing in action
We built the PostCSS modules and uploaded the project to our preview server. Our client received a responsive, bootstrap-based website full with modern and slick animations.
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.
PSD to HTML conversion of 10 pages using Bootstrap, including responsive work, retina support, custom animations, parallax effects and additional JavaScript features.
