Even if you gave five people the exact same clothes, none of them would wear the clothes the exact same way. This is because everybody looks at something in their own unique way, this is just a testament to the creativity every person has inside of them. You’re probably thinking to yourself what in the world does this have to do with UX design, correct?
Well, a website is nothing more than a creatively designed collection of different sections put together to create something aesthetically pleasing. A wardrobe is a collection of different articles of clothing that you put together as fantastic outfits. In short, both are a combination of different items that make a visually pleasing whole. If you’re still a little unsure about this comparison, don’t worry. By the end of this article, everything will make much more sense.
Breaking Things Down First
The best, and most practical, thing to always do is to break things down first. So we are first going to relate the basic structure of a website (header, body sections, sidebars, footers, and misc.) to the typical items of clothing one wears everyday. Let’s get started, shall we.
In any website, there is something about the way the header is designed that decides how well the website as a whole will turn out. If its looks messy, unorganized, wild, and like little thought was put in, the conversion rate for a website with a header like this won’t change at all. It should be pretty obvious where this is heading. In a UX perspective, the header of a website relates directly to ones headwear (which in this discussion can include hair styles).
Everyone has had a bad hair day. Maybe you’re balding or you got a bad haircut and you need to hide it for a while. Well the silver lining to that is the invention of the hat. The proper headgear can make it all better in the blink of an eye.
The Body Sections
Now the body sections of a website are the largest part. This is the area where all the content in a website goes, which is pretty much the whole reason anyone visits a website, at least in an ideal world. Moving on, the body sections connect everything together and the rest of the website is built upon. So with that in mind, the body sections of a website relate to the torso and leg areas. This is like the website version of t-shirts, blouses, tank tops, jeans, skirts, or whatever else is suitable attire for your style and gender.
The sidebar(s) is the area that sees the most influence from other parts of a website. This is because the size and importance of a sidebar is derived from how the rest of the website is designed. Since the sidebar is the main dependent aspect, and is not always a necessary section but always adds a little something whenever in use, it correlates directly to outerwear(coats, jackets, etc.).
There have been studies that show the type of footwear a person wears says a lot about them. The footer and footwear have a stronger relationship than just their names, positioning, and functions. Like the shoes on one’s feet, a footer needs to strong, durable, and stylish all in one. That is a lot of pressure for something at the bottom of a website, but considering that in most cases a footer can make or break a design, it’s quite understandable.
The Miscellaneous (Popups, Overlays, etc.)
The miscellaneous areas of a site are best described as the areas that aren’t really necessary and can hinder the experience of a website if not properly incorporated. However if done correctly, they add to the overall experience of the site. The idea is to keep these unnecessary areas to a minimum and only use them when needed. For this reason, the miscellaneous sections of a website are like jewelry.
Since all the sections have been broken down, labeled, and classified, let’s just do a quick review to make sure that everything is understood. The header is the headwear (which for this case includes hair), the body sections are the torso and leg areas (shirts, blouses, sweaters, jeans, skirts, etc.), the sidebar(s) your outerwear and the footer is the footwear area, and the misc. area is the jewelry.
The basic wardrobe structure has been broken down, and the understanding of this relation is pretty much set. There is only one thing missing. What about the deciding factors that determine the wardrobe combination of said broken down sections?
By definition, a region is defined as being an area or division having definable characteristics, but not always fixed boundaries. With this definition in mind, it is safe to say that different industries and/or markets are distinctive clientele regions. Correct? Well for that very reason, the industry (government, education, healthcare, business, etc.) the website one is hired to aid in building will be defined as the region.
After figuring out the region, there is another important step to take. This of course being finding out the weather of said location. Once the region is identified, finding this out is a breeze. For the most part, every area within a specific region has a general climate characteristic that relates with other areas at all times. Of course there will be slight timely variations for each area, but for the most part what is to be expected can easily be generalized. Isn’t safe to assume that most companies and/or organizations within the same industry will have the same type of content, but with personal variations? For this reason, the content/copy a site showcases is considered the climate.
Okay now the relation is understood, the deciding factors are determined, all that is left is to put this new information into practice. To help guide you along applying your new knowledge, take some time to look at this easy to follow example.
Example: The Photographer
So a new client, a freelance wedding photographer, approaches you to design their new portfolio site. From this profession description the deciding factors are quite easy to find. The region in this example is of course weddings, and the climate is wedding photos. Next you need to decide how the design of the website will be handled, or dressed.
Since content wise this site will be nice and breezy, any heavy wardrobe needs shouldn’t be brought here. Below, a sample breakdown is provided:
- Header: Since the weather is pretty fair, going heavy anywhere on the site is not a priority. All that is required here is a definitive style featuring of course the information we have come to know for a header. This being simply the name/company logo and the navigation menu.
- Body Sections: It may be good weather, but this area can’t just be blank. This section is reserved for your content of course, things like information about the photographer and photos of their work.
- Sidebar(s): In this weather situation, adding any extra clothing would just make the wearer uncomfortable if it’s too heavy. So this section is not needed, but can be applied if kept very light.
- Footer: With everything here going down the minimal path, it only makes sense to continue that here. A strong footer here can include something as simple as a line of bottom links, copyright info, and some social links.
- Misc.: Although the rest of the clothing currently being worn is leaning toward minimal, a little something extra will really make everything stand out. In this case, things like lightbox overlays in the area showcasing the client’s photos, implementing jQuery to tag the photos by year, part of wedding, and/or angle so that once clicked on only that section shows up, or other things of this nature.