Step 1
Management
The ticket was posted in our client area, the so-called “Workshop”. After we carefully reviewed all details and clarified the requirements with our client, we were ready to move forward!
- Custom WordPress Theme
- Page Builder with Sections
- Responsive
- Custom Animations
- Google Maps
- Gravity forms
- Parallax
- Retina support
Preparation
Design
The design was provided as well-structured Adobe Illustrator files. There were 3 files ( desktop, tablet and mobile ) for each page.
Requirements
The main requirements were for a responsive and full retina-quality WordPress site with parallax effects. The client also needed customizable page sections which could be easily removed or added to any particular website page.
- Retina-quality WordPress site
- Parallax effects
- Responsive layouts
- Manageable from the WordPress administration sections
- Options for reusing each section throughout the site
- Installing the site on MediaTemple hosting upon completion
Requirements
The requirements were clear - the project had to be responsive and with full retina-quality. Each section should be reusable from all pages and easily manageable from the WordPress administration panel.
Our client also had some additional needs:
- We were provided with specific instructions for the functionality and animations which we must follow
- Each section should be reused and easily added through the administration to each page in order to build new pages with custom layotus
- The intro parallax animation should immitate a moving train
- The contact information would be revealed through a Google map with a custom pin
- The contact form should be functional
Clearing up the details
Despite the well-structured and clear instructions, there were some things that our client hadn’t mentioned. We also discussed the following:
- Was he going to send any designs for the responsive versions?
- Were there any exact expectations about the animations?
- Were any additional plugins for SEO optimization necessary?
- Did the client need additional video tutorials for managing the content?
- Was the site supposed to be installed on our client's server upon completion?
Summary
After clearing all details about the project, we made a summary that showed everything we would be doing:
- WordPress as a Content Management System We were going to create a custom WordPress theme. For better user experience and easier administration we would integrate a tailor made custom fields library.
- Custom Page Builder We were going to create a custom page builder allowing the site administrator to create new sections and use them anywhere on the site.
- Custom Parallax Animations We were going to create custom animations for the train and image slider following the provided instructions.
- Google Form The contact information would dynamically be shown on a Google Map. The user would be able to set the desired location right from the WordPress administration panel.
- Contact form with options for integrating with MailChimp For the form we would install and integrate the Gravity forms plugin for which we have a developer license.
- Full retina support All images would be optimized for retina screens.
And we started...
The time frame for the project was 10 Business Days
Step 2
Slicing
We sliced the images and exported them as @1x and @2x for non-retina and retina displays respectively.
Step 5
Responsive version
The provided designs were self-explanatory. We created the tablet and mobile layouts and applied a nice animation for the navigation menu.
Most of the sections were pretty standard and we just stacked them for the mobile view. We also tested all buttons and made sure that they were easily clickable.
Step 6
Parallax Animations & Misc
We created a complex parallax effect for the intro section which imitated a moving train, as well as a subtle animation for the secondary image area.
We created the blog at our discretion and best judgement. Additionally, our client requested the Disqus plugin which we installed and set.
Step 7
Fine tuning and QA
Once the development was completed, Ted (front-end developer) tested the project on a few different devices and browsers. There were a few small issues which he fixed. After that, the project was 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 pages on a majority 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. She noticed a few more things that had to be polished in order to make the project perfect. Ted fixed the issues and finished the improvements.
After being done with the final touches, the project was reviewed by Scott. The WordPress integration phase was about to start.
The static site is ready!
WordPress integration
Let’s make the site fully dynamic
Step 8
Base WordPress integration
Stan ( back-end developer ) took the completed HTML files and created the skeleton of the WordPress site. The real show was about to start.
Step 9
Custom Fields and Page Builder
Our client needed a way to check off a section for each page and wanted to be able to create new sections on the inside pages.
Building new pages with ease
We created 4 types of sections:
- Fullscreen Images And Text
- Posts Section
- Map Section
- Text And Image
Each section was made containing various fields:
- Google Map Field
- Image Upload Field
- Repeatable Button Field
Voilà!
The project is ready!
Check out the video below the see the whole thing in action
Delivery
All the hard work is done
We created an archive with the source files and uploaded the project to our preview server. Our client received a responsive, multilingual and easily editable WordPress site.
Overall
Project Estimate
- Price:
- $1222.00
- Timeframe:
- 10 Business Days
Previous / Sweet Blinds
WordPress integration of a 6-page site including an e-commerce store, advanced product filtering, responsive layouts, and retina support.
- Custom WordPress Theme
- WooCommerce Store
- Advaced Product Filtering
- Color Variations
- Gravity forms
- Retina support
Next / ArtSchool
WordPress integration of a one-page multilingual site including responsive work, retina support, custom animations, and parallax effects.
- Custom WordPress Theme
- Multilingual Support
- Responsive
- Custom Animations
- Content transfer
- Parallax
