Zoom Creates WEBSITE DESIGN PROCESS
Step 6: DESIGN APPROACH
In our last segment of the design process series we discussed the creation of wireframes and how they serve as a blueprint for the arrangement of the visual content of the website. The next step in the process is the design approach. The design approach is a process in its own, where we determine the overall look and feel for the website.
Making the Homepage
Once we have sign-off on the wireframes, our Zoom Design team can set to work on creating the visual appearance of the website. To begin, we put our focus on the design of the websites homepage. Why the homepage? The homepage is like the skin of your dermatologist or the cupcake on display at a bakery … it’s the first impression. Would you trust a dermatologist with acne infested ears and wart-covered fingers to take care of your skin? Hell no, you’d turn and run. Would you be inclined to go into the cupcake shop if there was a moldy cupcake in the window? I think not! The homepage is the area that users first see when they land on the page, it is crucial to setting the tone for the rest of the website. First impressions are everything, so we want to make sure each site we create is consistent with the client’s brand elements, visually compelling and easily navigable for users.
Researching the Competition
To make the best first impression, our design team starts by researching our client’s competitors. We look to the competition to learn what is and isn’t working visually on their sites and within their brand. We check out the navigation, visual elements, written content, and hierarchy of information on the page. For example, if we see a very chic and attractive navigation technique on another website, we might be inspired to build upon that idea and create an even better technique for our client. These elements give us a gauge of what is currently happening in the industry and allow us to find creative ways to improve or build upon what’s already been done. Knowing what the competitors are doing enables us to make informed decisions for our clients and lets our work both stand apart from their competition and make sense within their industry.
Along with finding out about the competition, we like to see what others are doing outside of the specific industry of J.R. Johnson Inc. For this, we look to alternative visual inspiration, websites we find inspiring both visually and functionally and current/upcoming web design trends and patterns. The more diverse our inspirations are, the more diverse our design comps will be. Sometimes, a designer might use skateboarding websites or culinary landing pages as their inspiration for an architecture project. The point being, as long as you are keeping your client and their specific industry in mind, inspiration is just that. For example, try watching Rise and Shine - feel anything? That’s inspiration. Getting inspired is important to the creative process; it lets us create design work that is current, relevant to today’s standards, visually unique and highly usable.
On the majority of projects that come into Zoom Creates, we like to provide our clients with options—presenting them with 2-3 unique design comps/concepts of the homepage that the client can choose from and then later refine. People like to know that they are the one making the final decision so, we like to give them several options to choose from and call their own. In the case of J.R. Johnson, we had the opportunity to work with them on a previous project that gave us a general look and feel as a starting point for the new website. With this knowledge, we focused our attention on 1 concept that would feel cohesive and family with the existing designs.
The “Marinating Process” aka Creating the Concepts
Once we’ve gaged the competition and found our inspiration, we start the “marinating process”. This is where we bring together our new knowledge of what we’ve learned along with our collective design experience to create the visual look of the site. Using the wireframe, as a guide for what content should appear on the page and our knowledge for the previous project, we start organizing and prioritizing information to build a visual hierarchy of content, photography, and visual elements.
While designing, we make sure we are in-line with the company brand and the needs and goals of the client. In the case of J.R. Johnson, they wanted a look that felt professional, trustworthy, approachable, and knowledgeable. During this phase we have critiques with our full Design team, Development team, and Digital Marketing team to discuss and review the layout of the site. This step ensures that the design vision is in-line with the thinking of each team and with the goals of the client.
Presenting Our Work
Once it has been given the seal of approval from our internal teams, we present the layout to the client. We walk through the design, discuss our reasoning and thought behind chosen elements, and make sure our clients understand our thinking behind our decisions. Once we’ve presented we look for feedback from the client. We discuss what they love, hate, and what is and isn’t working with the layout. From there, we bring the homepage back into design and revise as needed for the client is happy and the site still meets the needs of the end goal.
Creating Level 1 Templates
With the approval of the homepage we then move forward with layout of the “Level 1” template pages. Level 1 pages are the interior pages of the site that hold the bulk of the website’s main content. These pages act like interview processes in a way. The first level 1 page is like the phone interview… if it’s good enough, the consumer will want to find out more in a “second interview” (i.e. the next level 1 page). Our goals is for the consumer to “want to hire you” by signing up for your services, buying your product, or J.R. Johnson has several Level 1 page templates on their site to meet their business’s specific needs. Each page is designed to contain specific types of content on the site. When designing Level 1 pages, we go through the same process of approval as on the homepage, revising the pages as necessary until we receive client approval. This goes back to the examples presented above… once we hook the audience with our shimmering/moist cupcake display, we must ensure that the flavor is unforgettable and leaves them wanting to order another.
Mocking up for Mobile
J.R. Johnson’s site is unique in that it will be a responsive design. This means the site will shift in size and shape to look great on both a desktop computer and your mobile device. Once we had approval on the homepage and L1 pages templates, we wanted to demonstrate to J.R. Johnson how these pages would be display within a mobile layout. To do this, we created a mockup of the mobile layout, focusing on the adjusted hierarchy of content, and how a phone user would navigate through the site.
Passing files to Development
Once the client has approved all aspects of the site, it’s time to build and pass over our design files to the development team. Along with files, we include necessary fonts and style information so that they can develop the site accurately, based on the chosen design concepts. In our upcoming posts, we will be describing the copy writing process — the story behind the design, the vision, and the company!