What Goes Into Web Design?
Does your website need a renovation? Do you need to make a website from scratch? Web designers follow a 6 step process to ensure their designs are successful. As I re-design The Marina Restaurant website, I'll inform you on the "how to's" of web design. From project goals to delivery, here's what you need to know:
The Steps
These are the 6 steps to creating a successful website according to the Chicago Architecture Center.
Information Gathering
Planning
Design
Development
Testing & Delivery
Maintenance
1. Information Gathering
This is the first step of building a website. This portion includes defining your goals. What's most important to you? What is the goal of each page? Thinking about your audience and hiring a UX team to perform research studies can help you align your goals to the target audience. Lastly you need to define your messaging. What do you want to say? How will you stand out from your competition?
2. Planning
After you define your goals and research your audience, you need to plan the structure of your website. An important piece to this is Information Architecture. According to Robin Landa's book, Graphic Design Solutions, Information Architecture is, "the organization of website content into hierarchal order." Figure out what information is the most important users and ensure this information is easy to find and high up on the website.
Creating a site map and wireframe mock-ups are visual ways of planning your website and will aid in creating the website when it comes time. Site maps form the backbone of the website and shows the navigational structure of your site. Wireframes serve as templates or guides for how pages should be structured.
Site Map
I am in the Planning and Design phase with The Marina's website. I have looked at the current site and created a current site map of the website to juxtapose with a proposed, simpler site map. I used GlooMapsto create these.
Current Site Map
Proposed Site Map
In the current site map, there are several navigation options. The amount of options can overwhelm users, especially with several footer options additionally listed on the home page. The proposed site map is simpler, with less options. In the proposed site map, more content would live on each page, rather than having a separate page for each heading.
Wireframe
Currently on the Maria's website, each page of content only holds a small amount of information. My proposed wireframe(s) would allow for more content on each page, thus allowing for less navigation options.
Current Site
Proposed Wireframe
On the left is a screen-shot of the current "Info" page. The Contact Information is listed on top, followed by drop-downs of the headers: Find Us, About, and Supporting Local Community. Each page on the website is designed like this, but feels clunky.
On the right is my proposed wireframe of an "About" page, which would house About Us, Contact Information, and Supporting Local. In this template, the same information can be displayed and viewable on one page without needing to click anything. Images of the restaurant or local businesses can be displayed to further enhance the experience. An image slider or carousel could be used to showcase several things throughout the website. Most importantly, the header and footer would be consistently viewable throughout all pages, containing important contact information, social media, and the logo.
3. Design
This is the best part (in my opinion!) This is the stage where all the visual aspects come into play. The look and feel of your website is critical to your success. This step involves things like mood boards, color palettes, grid structure, sketching, mockups, prototyping, and web typography.
Mood Board
Here is the mood board I designed for The Marina Restaurant. The feel of the restaurant is fun, bright, and fresh; but their website does not reflect the branding or vibe of the restaurant itself. The mood board includes images of the restaurant, food that is served there, and idyllic graphics. Selecting the color palate was an easy task, just look at all that yellow and green! Mood boards are a great way to help create the look and feel of the branding experience.
4. Development
This is the step where the website is actively being constructed. For beginners, there are plenty of easy-to-use "drag and drop" offerings on web-building sites like Wix and Weebly. If you're not sure what my website is hosted on, I use Wordpress.
5. Testing & Delivery
Once the site is fully developed, testing is often administered. Testing is needed to ensure that the website is accessible, responsive, and working fully. This is also a good time to present your ideas and ask for feedback on your designs.
6. Maintenance
You're done! (Almost). Once the website is created, regular maintenance is required. Sometimes websites act funky– links break, software needs updating, etc. Websites need to be updated or revised periodically with the change and demand of user experience. If desired, this is a step where you can launch SEO and analytics on your website to see how it's performing.
Wrap Up
A website's work is never finished. In today's digital world, user experience and expectations are constantly changing, and so is the need to stay up-to-date. These steps can help anyone create a website from scratch, or revise an out-dated design. I hope this helps in your endeavors!