Design is not just about aesthetics. Web design is the combination of various aspects of the website that can influence and impact how a customer feels. We break down these different aspects to help you understand their importance.
“Design is not just what it looks like and feels like. Design is how it works.”
– Steve Jobs
The three aspects you should look at are:
- Visual design
- Information Architecture
- Content
INFORMATION ARCHITECTURE
Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labeling websites, intranets, online communities and software to support usability and ‘findability’.
The 3 main things to keep in mind while doing information architecture are:
- Content
- Context
- Users
INFORMATION ARCHITECTURE AUDIT:
We can use an open card sort or closed. The other type is a tree sort method which is the opposite of a card sort method.
Card sort is a mental model where you sort all your content on the basis of how your users will picture them. It should not have a corporate flow to it. Closed card sort has pre-defined categories whereas the open card sort has the category names that are defined by the users.
A tree sort is opposite of card sort, where instead of placing the items according to the navigation we find items. This is usually used to measure the ease of finding an item before navigation. It helps with improving problems in navigation.
INFORMATION ARCHITECTURE TOOLS:
1.Microsoft Excel
2.Microsoft powerpoint
3.Imagination Cubed
4.Scriblink
5.Thinkature
6.xSort
WIREFRAMES
Wireframing is the technique used to define your information architecture of the website, in the initial stages. It is a great way to plan the entire layout of the website and also define the details of each page. This is the “architectural blueprint” of your website. The layout of wireframing has to be initiated from the client-side. Pictorial representations of the final product are a great way to avoid any misconceptions during the developmental process.
Wireframing is as simple as using a pencil and paper to draft a rough layout. Not everyone is a gifted artist and thankfully wireframing is not about that. Any rough simple sketch of your thoughts about the website jotted down can do wonders during your meet with the developer.
HOW TO START?
An Information hierarchy is a great way to get the flow of the website. A website starts with the home page leading to a variety of pages with different uses. In order to understand this structure of the web pages and the site as a whole, information hierarchy is a great step. Once the sequence of pages has been decided the next step is to go into each page in more detail. Wireframing each page would be the best approach. Here we can define the spacing, typography, content, content placement, color contrast, images and much more.
WHY WIREFRAMES?
The main purpose of wireframing is to reduce the time frame of the developmental process. They provide the first steps to great user experience for your website. this is possible because it is:
- Beginning of the design process: This the initial stage of development. A great way to start the project.
- Prototyping: Creating prototypes that can be evaluated by the client to better the development of the website.
- Potential problems: The model framework will bring out essential pitfalls of the website that can be avoided in time.
- All things visual: The wireframe is a great way for both the developer and client to review and make changes. Once the project gets a visual structure the possibilities of refinement improve.
- Better Understanding: The developer can point out the highs and lows of the particular design. There is a better opportunity for the two parties to comprehend what each one says.
- Website design flow: The complete wireframe will give a concise look to the final product which includes each and every page and designs.
VISUAL DESIGN
Last but not least of design factors is your website visual design!
The visual design takes care of the overall aesthetics of the website. It comprises of color you choose for your website, the kind of images and their placement, fonts, and other elements.
The impact color has on your readers:
According to the article “IMPACT OF COLOR IN MARKETING”, researchers found that 90% of snap judgment happens based on the color alone. (Link)
Whether it is the brand or a service, the color has a direct relation to the kind of feedback you receive. Studies have shown that men like bright colors, whereas women go for softer shades.
Depending on your target audience, their personality and age, the colors you choose for your brand/website will also vary.
For example:
Yellow, means optimism, warmth, Companies such as Nikon, subway, Best Buy have yellow in their logos.
Blue, stands for dependability and trust, most Banking organizations have adopted the color blue.
Green means peaceful and growth, Animal planet, Tropicana, Starbucks coffee, have incorporated these colors.
Hence, the kind of product/service you are offering and the kind of people you want to target have a direct relationship to the colors you choose.
PICKING COLORS FOR YOUR WEBSITE
- Let the colors define your PURPOSE. Why are you creating this website? Whether product/ service, choose a color that will suit the emotions of your visitor.
- Make sure the colors sync with your existing BUSINESS BRAND/LOGO.
- The stock photos and graphics you want on your website should also match the color palette you will be choosing.
So you have picked the colors, next you have to choose the best theme for your website.
Themes can be customized or selected from the set of great themes the CMS has to offer.
IMAGES
Good Images have a great impact on your website!
- 90% of information transmitted to the brain is visual. These Visuals are processed 60,000X faster in the brain than any text on the page.
- Posts with visuals will get 94% more page visits than those without images.
- 60% of consumers are more likely to click on a business whose images appear in search results.
- 67% of consumers consider clear, detailed images to carry more weight than product information or customer ratings.
- Visuals show your products without telling people about them. This allows viewers to make their own decisions without feeling pressure from your business.
-By WISHPOND on Visual Content Dominating- https://blog.wishpond.com/post/70300587846/10-reasons-visual-content-will-dominate-2014
WHERE TO FIND GOOD IMAGES
There are really good websites with free stock images:
https://startupstockphotos.com
https://designschool.canva.com/blog/free-stock-photos/
https://www.freedigitalphotos.net/images/Business_g158.html
Another very important point to keep in mind is the Right attribute and credits given to the images that you use.
ØHow to attribute creative commons images: (Link)
ØSource and attribute creative commons images like a pro (Link)
ØHow to cite images (Link)