Project Case Study

Photo Booth PSD to HTML conversion

PSD to HTML conversion of one-page Bootstrap project including responsive work, retina support, custom animations and parallax effects.

  • HTML5 / CSS3
  • Responsive
  • Bootstrap
  • Custom Animations
  • Parallax
Preparation

Design

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.

Design

Requirements

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.

  • Bootstrap should be used
  • Fully responsive project (desktop, tablet and mobile)
  • All icons and images should be retina
  • Lightbox should be used for the members
  • Modern and animated side navigation

Clearing up the details:

Although most of the requirements were clear, there were some things that our client hadn’t mentioned. We had to discuss the following:

  • Was he going to send any designs for the responsive versions?
  • Were there any exact expectations about the animations ?
  • Did he expect us to handle the form details sending ?
  • Were we supposed to load more contests via AJAX when the “latest contests” section was reached?

We discussed these details with our client and we cleared everything up.

And we started...

The time frame for the project was 4 Business Days

Management
Step 1

Management

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!

Slicing
Step 2

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.

Step 3

HTML Coding

We coded the HTML according to the requirements. We used HTML5 tags and strictly followed our coding standards. Since the project had to be Bootstrap based - we used its grid for the HTML creation.

Step 4

CSS Coding

For the CSS building we decided to use PostCSS. This super fast CSS preprocessor was great for this project because of its simplicity and clarity.

Responsive version
Step 5

Responsive version

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.

Project preview
Project preview

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.

Step 6

Parallax and Custom Animations

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.

Animation

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.

Step 7

Fine tuning and QA

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!

Project preview
Voilà!

Everything was ready!

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

Project preview
Delivery

All the hard work is done

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.

Overall

Project Estimate

Price:
$526.00
Timeframe:
4 Business Days
Previous / 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
Next / 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
puzzle

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved