Getting to a website design that caters to the target audience as well as the client's brand requires a considerable time and effort spent on planning and collaboration. I wanted to go through with you the course of Xenyo’s website revamp where we’ll touch up on how our design process ultimately lead to our final product. Some parts will get a bit technical but I hope that this post will help our clients understand a little more of how we work.
Each project begins with identifying the challenges. For Xenyo there were 2 unique challenges. The first challenge was to incorporate mobile usability. To integrate mobile usability we could either build a mobile site separately or implement responsive web design. We opted for responsive design as it also allowed us to highlight our technical abilities better to potential clients. The second challenge was to showcase Xenyo's web development and web design company services but in a way that allows our custom serviuces to stand out from being a template cookie cutter website design company. Additionally, we had to comply with the usual requirements with designing a great company website to give the impression of trust, satisfaction, reliability and beauty.
The Design Process
The design process begins with the project brief where we start our discussions with the client, understanding the project's visions and scope. Next comes creative brief, which begins with a simple questionnaire that will help summarize and determine the overall theme. This document will be re-adjusted until both parties are satisfied with the result. Only after we have understood completely the requirements of our clients do I commence on the wireframes and mockups designs.
As this project was internal, I relied on the team to complete the documentation. Content plays a lead role in a successful website. Our primary goal was to brainstorm the required content that will present Xenyo as a reliable web design company. It was also important to include a portfolio section to display our previous works which will have a brief description, screenshots, and a link to the live site.
Since the site’s design will be heavily influenced by a responsive design structure, the design elements was kept simple and clean. This will keep the site’s fluidity and functionality constant at all times.
With the information collection from the documentation I created a sitemap. A successful website requires good UX/UI navigation design and a sitemap is the backbone of the site’s navigation. It is a useful reference for planning how the navigation bar should be used and where buttons should be placed.
Wireframes are basically sketches of the mockup. It is very handy to produce these for responsive design. It helps plan how each page will look within mobile, tablet and desktop devices, keeping everything consistent and in order.
And finally comes the mockup. Apart from visually constructing the design elements, the organization of the layout is also carefully measured here. I used the 12 col 960 grid, which is set up so that there are 12, 60px width columns with each 20pixel width apart. Since there weren’t a lot of content sections to set apart from each other, the 960 grid with 12 col (instead of 14 or 16) is a good fit because it gives the content a good amount of spacing and separation. It defines each section clearly which allows the viewer to understand the boundaries for each set of content types straight away. I also decided to include a sidebar for users to have a direct call to action button to the contact us section in the footer, the sidebar will be coded so that it follows the user as they scroll down.
We used a Zen Drupal base theme and identified breakpoints with @media-query for mobile devices, tablets, laptop screens and larger monitors.
The sidebar uses Jquery script to set the sidebar div to change it's position from fixed to relative in css automatically as it reaches a certain area of the page. Basically, once the user scrolls down to the top of the page the sidebar div will change it's positioning to fixed and once it hit's the top of the footer it will change back to position relative.
The revamp was commissioned to solve 2 main challenges, integration of mobile usability and to display our web design services.
The responsive web design required a lot of time testing and tweaking the design for each break point. For example, it was difficult to make the customized photo stack image slider compatible for mobile and tablet devices, the final design required a bit of sacrifice and simplification. This is a common case with responsive web design which can be continously tweaked and improved upon but once set-up, it will be compatible with any new device coming into the market. I really liked the end result and it was a good solution Xenyo’s long term mobile compatibility issue.
I feel overall, the dynamic functions of the photo stack, responsive design and call to action side bar definitely covered our goals. The 960 grid provided a very defined layout for all of the content, the overall feel of the site was minimalistic and organized, which is what we were aiming to achieve in the project brief.