Why Website Designs are the Secret Ingredient
Working on creating a website for your portfolio, project or organization? Do you want to know what a designer will need to hire you as a client? Or are you the aspiring designer? Whether you are new to hacking or hiring one, this article will help you make a better website experience for your audience.
Budget, Mood Board and your Brand
When creating a project its important to clearly define your boundaries:
- Budget — if you are doing the project yourself the amount of hours and specific deadline and if you are hiring the amount of currency allocated to completion.
- Mood Board — an arrangement of images, materials, pieces of text, etc., intended to evoke or project a particular style or concept.
- Brand — the mood board should specifically compliment the unique name and image of your company or service as defined by your style guide.
For example, I have addressed these points for the Gods of Mayhem design project in the following ways. First the budget, since this project isn’t funded I’ve set a specific deadline of Noon on February 7, 2015 and communicated this online via a countdown timer layout. Furthermore, I have laid out my coding schedule and calculated the time I have available each day, minus unplug time, multiplied by days remaining to give myself a rough estimate of hours projected for this project. Instead of using money, I am looking at skills necessary to complete a specific API integration vs. creative use of the tools I have available (i.e. pre-made free templates, icons, etc.) and how these choices can demonstrate my skills. It’s very important to be able to understand and decide on the logic behind the project for performance indicators to be properly defined and useful for ROI.
Next mood board, the above four (4) images represent the mood and focus of the project: mood is dark, mysterious, mischievous and fun; target audience is gamer lifestyle, hacker creativity, eSports management and the audience or eSports spectators. Last, the mood board also represents the beginnings of the brand via our incomplete logo showing through the burning universe — think phoenix from the ashes, constant cycle of evolution, etc. During the site design all pieces of the project (i.e. content, graphics, marketing, etc.) will have to relate back to the above 4 images or be reworked. What do you think? Did my choices convey the look and feel I am going for? What do those images say to you?
Getting a Feeling vs. Wireframing
Ok, so you and your team, designer(s), etc know how much you want to spend, when the project needs to be live, what feelings or mood the project is looking to evoke, convey to or address in your audience, which allows you to better define your target audience for hook creation and the idea your brand is representing. However, in this next step, feelings have nothing to do with wireframing.
While the mood board is about establishing look and feel, wireframes define layout and structure. Consider these two steps like long lost cousins, about to be reunited. — Owen Roseblade, White Fuse
Deciding on a wireframe is like picking out a pattern for a suit or a dress, you are looking for a cut to fit your shape in accentuating way, highlighting all of your awe-inspiring qualities and distracting looks from areas of concern. When looking at a design, one person might say “oh, there is so much wasted space!” or some might say, “the colors are great but I think we need to put something to make it look lighter for the eye”. Actually, the these perspectives are referring to the two different types of white space.
- Active White Space: Space intentionally left blank for a better structure and layout. It also gives emphasis to the content area. It leads a reader from one element to another.
- Passive White Space: Empty space around the outside of the page or blank areas inside the content which is the by product of the layout process.
Magazine’s can help you to understand the use of white space. Find examples of layouts whose look, feel and mood closely relate to yours and then, remove the color by taking a piece of tracing paper to outline the images and location of the content now, look at the frame. Again, its like picking out the pattern for a piece of clothing, the color, texture or cost of the fabric isn’t related to the pattern only the construction of said garment. How you choose to use white space can greatly impact the user-experience of your site so, choose wisely.
Learn more about the design and development of your site with this teaching kit I created using Mozilla Webmaker Tools, some great online content (check out the hyperlinks in this article) and a few challenges at Free Code Camp.
Originally published at www.linkedin.com on December 29, 2014.