Get the basics right

Week 19

Part one

On the first week of the second semester we are learning about web design.
As an introduction, we have to explain the following terms in our own words:

The Internet
It’s a worldwide network of computers. Within this network you’ll find everything from personal computers, mainframes, cell phones and any other device that has an Internet connection. Every machine on the Internet has a unique identifying number, called an IP Address. 

HTML – or Hypertext Markup Language – is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

A web browser is a software application for accessing information on the World Wide Web. Whe a user requests a web page from a particular website, the web browser retrieves an HTML document from a web server and then displays the page on the user’s device.

Search engine
Internet search engines are special sites on the Web that are designed to help people find information stored on other sites. There are differences in the ways various search engines work, but they all perform three basic tasks:
– They search the Internet based on important words.
– They keep an index of the words they find, and where they find them.
– They allow users to look for words or combinations of words found in that index.They search the Internet – or select pieces of the Internet – based on important words.

In this lesson, we were provided with the following 10 essential questions to ask your client before starting a web design:

1 – What kind of visitors are you expecting on your website?
2 – Who are your competitors and how do you differ from them?
3 – What actions do you want visitors to take on the site?
4 – What is your deadline for completing the site? How big is the budget?
5 – What features should be used on your website? (This includes things like contact forms, pictures, videos, etc.)
6 – Please list the names of three sites that you like and explain what you like about them.
7 – Do you have any colour preferences? What should the look and feel for the website be?
8 – Who will be the contact person for this project?
9 – What do you NOT want on your site in terms of text, content, colour and graphic elements?
10 – Who will be responsible for maintaining the website? Will the person have the time and skills to do so?

I have to add 10 more questions and, from this list of 20 questions, create the ultimate list of 10 questions that I would use for clients.

11 – Describe your business in a few sentences.
12 – Do you currently have a website? If so, what is/isn’t working for you?
13 – What is the main goal behind building the website?
14 – Do you have a style guide or any existing images?
15 – How much traffic are you anticipating?
16 – What is the most important information your site must relay to the user, especially on the home page?
17 – Do you have a logo you plan to use or will one need to be created?
18 – Do you have the content for the website or will content creation be a part of the scope of work?
19 – Do You Have Current Analytics?
20 – Do you have a domain name (and hosting) in place yet?

Part two

For the last part of this learning activity I have to pick 10 sites that I consider to be great websites and 10 that I find to be bad websites, and explain why.

Good websites
1 –
It is a webpage of a makeup artist that sells their services and courses. The design is clean and beautiful with plenty of white space; there is consistency in the colours throughout the site. The information is well organised, and it’s easy to navigate.

2 –
Icelandair is the flag carrier airline of Iceland. Their website is neat, elegant and properly structured. The amount of information is enough and well distributed, which makes it easy to navigate. As this is an airline site, one would assume their main goal is for their audience to book a flight, and that is why the first thing we see on the homepage is a flight search box, and an offer section.

3 –
Maquillalia is an online beauty shop. The menu bar separates the products in categories for straightforward navigation. They include pictures to show the things they sell, and some looks achieved using their makeup. If you were to purchase an item in this shop, it would be simple to find your way through the site and see the options in that category. Besides, the home is not cluttered with information so we can focus on the products.

4 –
Yr is the joint online weather service from the Norwegian Meteorological Institute and the Norwegian Broadcasting Corporation (NRK). At the first look, it might seem as the website has a lot of information, but that is normal for a weather forecast service since it is a complex topic. The user can search for a specific location and save it as a favourite. Next time they access the web, they will see their favourite places first. Easy to navigate.

5 –
In Pick Up Limes, we find plant-based recipes -both written and in video format-, cooking tips and informative health articles. The web design is fresh and clean, with beautiful images that show the colourful food they teach you to make in their videos. The site is clearly divided into categories, so the user can find the information they are looking for with no trouble. There is a direct link on the homepage to their YouTube channel where they share their recipe videos.

6 –
NiMÚ Azotea is a restaurant established in the town of León, Spain. Azotea is the Spanish word for a rooftop terrace, and that is exactly where the restaurant is located, overlooking León’s old town. Their website is simple and effective. They display only the necessary information: physical address, phone number, a link to book a table and their menu. Besides, a slideshow gives the potential customer a peek at the food they serve and the stunning views from the restaurant.

7 –
Avinor is a state-owned limited company that operates most of the civil airports in Norway. Their web page is useful for travellers as they can find live information about current flights for a particular airport. They also offer practical information about parking, shopping, assistance, etc. All the necessary links one would want are shown right up front in an organised manner. The design uses well known international icons to represent some of their services, which is how important information is marked at airports as well.

8 –
Gådjå is an Ethiopian restaurant in Stavanger. The first thing that catches my eye when accessing their web is the bright colours of their banner and photos that remind me of the Ethiopian flag. The fonts used are easy to read and work well with the colourful images used. The web includes only necessary information about their menu, order options and a brief introduction to the country’s cuisine for those not familiar with it—well-organised page.

9 –
Lucía Be is an online shop that sells items designed for and by women. There is a consistent use in colours that the brand uses in their packaging, Instagram feed and stories and overall designs. They combine sans-serif typefaces with their trademark handwritten text. On the menu bar, the user can navigate through the different product sections. There are plenty of images that show the items, so the customer has a good idea of what they are purchasing.

10 –
Zalando is an online fashion platform which carries clothes, shoes and accessories of multiple brands. Their website’s design is modern and well organised. They use large areas of bright colours together with empty spaces making a clear separation of their product categories. Once the user accesses one section, it’s easy to filter to find the right item.

Bad websites
1 –
All the content on this website is aligned left, leaving half of the screen empty. There is no description of what the page is about, showing only a long gallery of photos of the world. Once you click on one of these photos, you land on another page which has a menu bar with some options, but still, it’s not clear what the purpose of A lovely world is.

2 –
The homepage of Naboen Pub and Restaurant is an empty page with only a logo. It is not evident that the user needs to click on it to access the information. After clicking on the logo, the design doesn’t get much better: there are three tiny, unrelated and unrecognisable pictures and a few lines of text, where each word has a different, random size. At the bottom, four buttons lead to their menus, photos and bookings. The user has to dig to find useful information. Also, the url has nothing to do with the pub’s name, which make it difficult to remember.

3 –
The headings and body copy are too small and difficult to read. The website has a menu sidebar, but the design is not great, it’s just a list of names. The pictures they use are very small, have no caption and seem unrelated to what a bar has to offer. If looking for a bar in Bergen and based only on their web, I would never pick Henrik Øl & Vinstove.

4 –
The name of this company is Peters Buss (bus in Swedish), but the images on their web show a cruise and a spa, so it is not clear what they offer. There are too many colours that clash with each other; it is evident that little thought went into the design. There is too much information, and it seems unrelated. There is no consistency in typography, the endless list of links on the left use different sizes and colours without an apparent reason.

5 –
Gate N Fences’ web is cluttered with information and links; it’s not easy to find your way around this site. The colour choices are not working, especially the red text over a grey or green background, which is very difficult to read. The buttons on the left side look out of style and unattractive. The background image doesn’t make sense with the rest of the page. There seems to have no organisation whatsoever; it’s a random placement of photos and text. Overall, it’s an unpleasant design.

6 –
The top part of this homepage has an unattractive logo and a cyan background. The text on the bar menu is too small. Besides, moving text makes it look old-fashioned. It seems to be a natural medicine guide, but the overall look of the web is a bunch of quotes and links, all in too small size to be comfortable to read. Scrolling down, we can see a couple of videos and some images with yet more quotes. It is not easy to follow and find your way around this website.

7 –
The homepage has four images; three of the links do not work. To enter the web, the user needs to click on the fourth image, and it’s so unclear that a message with instructions is necessary. Once you enter, the design is like a mixed colour palette, which contains plenty of conflicting colours, including the background pattern. The text is small and not easy to read. Also, the navigation is quite complicated.

8 –
There is so much going on on this site that it’s difficult to even look at it. There are moving images all over the place, a loud video that automatically plays when you access the web and a very colourful, demanding background pattern.

9 –
Even though the website belongs to Yale School of Art, it has quite an unappealing design. This web page is a collaborative project, and all member of the school can add content to it; this might explain the wrong choices made: all the text is aligned to the left, the background is too busy and distracting and the copy size too small in many cases. The colours do not work together either, and the yellow gradient in the text boxes makes it look outdated.

10 –
Again, another overwhelming website that could not fit one more piece of information. It has a random selection of colours, image and text sizes. It’s not user friendly or pleasant to look at.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s