Project Case Study

DesignCorner PSD to HTML conversion

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

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

Design

The design was provided as 10 PSD files - 1 PSD for every page. The design files also contained information for the different states: dropdowns, mouse-overs, tooltips, popups. Everything was retina-ready and all layers were well combined in groups.

Project Design

Requirements

This project was for online design contests - users could apply for different design competitions. The design was pretty cool and it had to be modern in terms of looks and functionality.

Our client needed 10 PSD files to be converted into Bootstrap HTML/CSS templates. The requirements that she provided were the following:

  • Bootstrap
  • Subtle animations
  • Fixed navigation
  • Animated numbers
  • Parallax effects
  • Filtering and pagination

Clearing up the details

Most of the project details were clear. However, we had discussed with the client only a few points, for example: how the templates were supposed to look on bigger screens ( about 1920px wide ), what animations were expected to be done and if the filtering was going to load data from external files.

We prepared some examples with animations and screenshots for how the project would look on bigger screens. They were exactly what our client had expected as a final result. Concerning the filtering, she decided that it would be best if we used our best judgment.

We also discussed a few less important points:

  • Retina support
  • Navigation animations
  • Mobile menuCounters

And we started...

The time frame for the project was 7 Business Days

Project management
Step 1

Management

The project was big, interesting and modern. We assigned it to Paul (a front-end developer), highly specialized in development with Bootstrap and a solid background in JavaScript and animations. However, the filtering functionality was prepared as a separate script by our experienced JS developer Ethan.

Slicing
Step 2

Slicing

For this project, our client preferred slicing the icons and implementing them with sprites ( @1x and @2x ) instead of preparing icon fonts. Besides 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 the requirements - we followed our coding standards and we used Bootstrap’s grid and other features. For this project we used SSI ( Server Side Includes ) which we usually would do for all projects. Since it had 10 pages, the SSI allowed us to use the same header and footer files for all of them which was great.

Step 4

CSS Coding

For the CSS building we decided to use 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.

Responsive version
Step 5

Responsive version

For the responsive version we pretty much followed the Bootstrap default grid. However, we did a lot of updates in order to make the pages look perfect on different devices. We added touch/swipe support for the sliders and the other features that were accessible through the mobile/tablet version.

Project preview
Project preview

For the mobile navigation we prepared a custom burger button turning into an arrow when pressed. This animation was supposed to indicate how the navigation could be closed.

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 Custom Animations

We added some subtle animations on the landing page. The elements were made fading and moving a little when they appeared in the viewport. We decided to apply these only on the homepage since it was the only presentational page.

The animations were not suitable for the other templates since they were more functional and the users would need them to load faster.

Filtering

Regarding the filtering, we decided to load the whole projects list from external JSON file with AJAX. The data that we hosted in the JSON file was: name, description, rating, category, etc ( actually the whole information that could be seen on the pages ).

We did the filtering based on the selected category and we rebuilt the pagination below the list according the selection. We also added a subtle animation in order make the functionality more user-friendly.

Step 7

Fine tuning and QA

Paul completed the development and tested it on a few different devices and browsers. There were some different bugs because of how the browsers interpreted the styling and he fixed them. After that, the project was completed and 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.

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 updated in order to make the project perfect.

She passed on her comments to the developers and they 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 completed.

Completed project
Voilà!

The project is ready!

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

Video cover
Delivery

All the hard work is done

We built the CSS modules and uploaded the project on our preview server. The client reviewed the project within a few days and requested a few small additions which we did in good time.

Overall

Project Estimate

Price:
$1514.00
Timeframe:
7 Business Days
Previous / Photo Booth

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

  • HTML5 / CSS3
  • Responsive
  • Bootstrap
  • Custom Animations
  • Parallax
Next / Design Agency

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

  • HTML5 / CSS3
  • Responsive
  • Parallax
  • Counters
  • Content filtering
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved