Graphic design isn’t a process many people are familiar with. It can be hard to envision how one can create something from nothing. With building construction, you can drive by a site and see the foundation get poured, the frame go up, and as the weeks go by, you can see how a space gets turned from an empty lot into a building or home. With web design, it’s not so easy. You hand off your logo and collateral and a couple weeks later are presented with a design. How did the designer get there? How did they decide on the elements and functionality?
Typically the website design process begins with a discovery questionnaire. You will be given one during the sales process before the kick-off meeting. The questions in the document are likely ones that will come up in conversation during the sales process, but it’s important to have a hard copy. In it, we ask you questions about your goals for the site, metrics for success, pain points for your current site, information about your audience and competitors, and others similar questions. These answers are vital for us to decide on a plan to help you reach your business goals. During the discovery meeting, functionality and the look and feel of the site will be discussed at greater length. We will also go through your website and your competitors’ sites to pin point what you like and don’t like. This will help me determine things to avoid or things to keep.
Research & Wireframing
After the kick-off meeting, it’s my turn to begin work. Hopefully, by now, we’ve received your logo files and any photography you’d like to see on the page. If you don’t have good photography – don’t worry. We can help you find stock photography that will work for your messaging. Before I start, I click through your current site to get better acquainted with your business and messaging. I will also browse through inspiration galleries. Keeping abreast of what is going on in the web design community ensures that I deliver a design that is both functional and modern. The last thing you want is to invest money in a new website and have it look like it launched two years ago. I will also read through the strategy to see what modules are necessary. Once I have an idea of what the look and feel will be and know what elements need to appear on the homepage, I will create a wireframe. Most often, I do this on paper – mainly because I can sketch quickly and if something isn’t working, start over. Once I’ve decided on the visual hierarchy and where elements will be placed, I will begin work in Photoshop.
Putting ideas to pixels
Photoshop is where the fun begins! I’ll open a new canvas and start adding in elements, using my hand-drawn wireframe as a guide. Colors and font choices are driven by a few things: your logo, branding materials provided (such as your brand guides or sales brochures), as well as the audience your site is targeting. A site geared towards children will use playful fonts and bright colors. Alternatively, a site that is geared towards a conservative audience will typically use classic fonts and muted colors. We recently designed a site for a client who needed a website for the interior design arm of their business. The client knew that he wanted a very modern look and feel, so we used thin, sans-serif fonts for the headlines and large images showcasing their work. The client was happy with the result and has a great site to showcase their future work. If you haven’t provided photography, I’ll do a stock photo search to find images that will work for the hero area as well as any images that are needed for calls to action.
Once all the elements are in place, I send the design over to your account manager. Together we go through the design to make sure that the elements and their placement make sense. There needs to be a visual hierarchy that guides the viewer down the page and gives them a clear direction as to what we want them to do. Is it to contact your business, to learn more about a particular service, or maybe to register for an event? Once we’re both happy with the direction and have made sure everything is in place, we schedule a meeting with you to officially present the design to you, the client. We walk you through the design to explain the layout and why things are placed where they are and given certain prominence. Another reason this meeting is beneficial is that we start with a static image, and it can be hard to visualize how things will work or move. Initial feedback is always welcome during this call, but we encourage our clients to take a few days and marinate on the concept before providing a list of changes or questions. While we don’t recommend “design by committee” we do also encourage you to show the design to colleagues to get their initial feedback as well.
After the design presentation, we await your feedback and will make your changes to the homepage design as well as creating the interior previews. We will typically mock-up any page that has any sort of special functionality in addition to generic templates which our front-end developers use for styling purposes. Once the interiors are complete, they get sent over to you again for feedback and changes. If there are none, we ask that you sign off and approve the graphics in order for us to move into the development phase of the project. The development process is when your design takes on a life of its own and becomes a fully functioning website.
The back and forth of the design process can seem like it takes a long time, but it truly is a necessary one. Making changes to the design file takes far less time than it does in development. This allows us the luxury of trying a few different ideas before choosing one.
Now that you understand the website design process, read my tips on giving effective design feedback.