Task 1.1 (Question 1)
Think about your personal experience as a web user and answer the following questions:
If you search for a particular company and you cannot find a website for them, how does this shape your opinion of the company?
ANSWER: My opinion of the company would be bad. Without a website they seem unprofessional, and I would also start thinking how I could even get in contact.
If the website of a company or business is outdated, will it be a deciding factor of whether you will support the business?
ANSWER: I would say so yes. An outdated website in my eyes is a company that has a hard time getting things done, so why would I want to support that? It would not seem serious in my eyes, at least with all the web technology we have today.
What elements on a website will help you trust a business or company?
ANSWER: Spelling/grammer, color/image use, contact information and probably a ”about” page so I get a feel of where the company started.
How do you feel when you come to an error page on a website? How does it influence your opinion of the company or entity to which the website belongs?
ANSWER: I feel disepointed espesially if there is a big company. it influences my opinions bad, because they don’t seem reliable or I might even think the company is shut down for good.
If you struggle to find something on a website or don’t understand how to navigate where you want to be, will you try to contact them personally to find what you are looking for? Or will you close the window and browse to their competition?
ANSWER: If there is a quick tech support available I would probably contact them, but if not I get annoyed and will move on to their competition.
If you cannot find a physical address or contact details on a website, will this influence your overall opinion of the business or company?
ANSWER: Yes very much so. The reason for this is the company might seem like a scam and not trust worthy. If there is no one or where to link the company website to, it just does not seem legitimate.
How long will you wait for a website to load before you give up and move on to the next one?
ANSWER: I would probably wait maximum 10 seconds before trying to close and re-open. If it still does not load I can quickly move on.
If a website has broken image links or buttons that doesn’t work, will this influence the credibility of the company or business?
ANSWER: Yes I would say so, because when something is broken and does not work people get irritated and the credibility goes away.
When browsing the internet on your mobile phone, how do you feel about a website if the text is too small to read or the buttons are hard to click? Will you try to visit the website from your computer, or will you lose interest?
ANSWER: Depends on how important the reason for visiting is. For nothing specially important I would lose the interest straight away.
Name one thing that will make you go back to a website and one thing that will cause you to close a website window?
ANSWER: Go back = Clean/modern/minimalistic design
Close = Too hard to find information
Good experience:
Clear communication to share information, neat design, contact information, working links and support.
Negative experience:
Bad spelling, chaotic design, no web support, not having cross-browser tested and outdated web design.
Question 2
Take a screenshot of one website that you think is good, write down at least three elements that impressed you.
Vogue:
The navigation, professional design, simplisity, image and grid usage and a huge content storage.
Now take a screenshot of a website that frustrates you. Write down at least three things that are causing a negative experience.
Fesliyanstudios:
The outdated look, chaotic design, boring type and clumsy interaction.
Lesson 1.2
Surf the web and pick three websites to work from:
- A non-profit organisation (for example a charity that cares for the homeless)
- A retailer (for example a clothes or flower shop)
- A service provider (for example a hairdresser, accountant or builder)
Answer the following questions for each of the three websites:
- What do you think the main goal of the website is?
- What elements in the design are helping the users meet the website’s goals? (Look at the calls-to-action, navigation, and other design elements.)
- Who is the main target audience? Name at least five characteristics that define this group of people.
- How was the design used to attract this group of people? Discuss things like colour, font choices, photography or images, style and layout.
- How did you perceive this brand and its overall brand image? Was it serious and conservative or light-hearted and vibrant? Use your experience on the website plus any previous interactions you’ve had with the brand to motivate your answer.
https://www.habitat.org/emea
- I think the main goal of the website is to get people to donate so they can support others in need of housing. It also seems like they want people to volunteer if they can as well.
- The biggest elements is probably the big orange ”donate” button in the far top right. Others are three main navigation buttons that leads you to either some story, how to help and volunteer. To build trust they have buttons for all their social media so one can investigate the organization. The last element I would like to comment on is the spaceful and easily navigating design. It is not overloaded with information straight away.
- I would say the target audience is people who would offer help, around age 30-50. Some characteristics would be helpful, giving, affectionate, social, free minded, cheerful and empathic.
- The colors in the design is calm and serious, but also colorful and inspiring. The font used is easy to read and modern. It seems trustworthy and professional. The images and headlines play on the consumers empathy. Lastly the layout is neat and easy to navigate through, which I think makes the consumer stay longer to read through the content.
5.I perceived this brand serious and somewhat conservative. It has a light-hearted feel to it, with a serious expression. They seem legitimate, professional and trustworthy for their website consumers.
https://www.seekdiscomfort.com/
- The main goal of the website is to sell merchandise products and make a community.
- The way they showcase their products with a vibrant layout the second you load in is a good element that helps sell the product. It is a clean and spaceful design that does not overload the consumer. The ”about” section creates loyalty and in the right corner there is a button to change different
accessibility options. This option is a cool feature that can help consumers. - I would say the target audience is adventurous people around the age 20-30. Some characteristics for this group of people would be creative, risky, brave, joyful, lively and modern.
- The colors are bright and the design layout is modern and clean. There is not many buttons to click, only what’s necessary. I think this is a good way to attract the target audience.
- I think it is light-hearted and vibrant, with a very cool and positive message to their consumers. It is easy to navigate and has a clean design. I perceive this brand as professional, fun, vibrant and inclusive.
https://www.cutters.no/
- The main goal of the website is to get customers to their hair salon.
- They have a professional design, and creates loyalty by sharing information about themselves, their products, how to contact them and maybe most importantly where you can find their salons. It is also to navigate on the website, with buttons on the left side that takes you to different content.
- I would probably say status seeking people around the age 18-30. Some characteristics for this group of people can be serious, vibrant, trendy, modern and youthful.
- It is a clean design layout, with minimal distractions which I think keeps the target audience longer. Their two colors black and yellow
is modern and clean, fitting for the audience. The same can be said about their font choice. They use a small circle that says 9/10 customer score, this helps making some kind of trust and credibility. - I perceived this brand as professional and serious. The navigation on the website is really easy, and their live waiting time feature is super cool and useful for their website consumers. The information is easy to find, and they don’t really leave too much out. They showcase all their salons throughout Norway, making the bran very credible and professional looking.
Lesson 1.3
Create a website brief for a fictitious new restaurant. You can choose between:
- Nataka Kula (Cuisine from East Africa)or
- Syam Kraw (Thai Kitchen)
Use the questions from the lesson ‘Website Design Brief’ and add questions of your own as well. You will need to post at least 15 questions and answers to your blog.
After you have organized all 15 questions and answers, create a website brief that can be handed to a web design team. Keep in mind that the website brief will be the guideline from which the site is built.
Questions
What Services Do You Offer?
ANSWER: We offer Thai based food products both take-away and restaurant stay.
Why does your brand need a website?
ANSWER: The reason the brand needs a website is to gain an online presence, and a easier way for consumers to order, make contact if they have questions and to find the locations
easier.
Do you currently have a website? If so, what is/isn’t working for you?
ANSWER: No not currently, and need some help with this.
What kind of website does your brand need?
ANSWER: The brand needs a E-commerce website to further drive sales and traffic to the Thai kitchen.
What kind of visitors are you expecting on your website? Consider their income, interests, gender and age.
ANSWER: They except visitors in middle-high class wanting more exotic food. Food interested, both male and female. The age class is hard to determine but I would say around 25-40.
Who are your competitors and how do you differ from them? What can we learn from their websites?
ANSWER: The main competitors are https://www.lillethai.no/ and https://ahaan.plah.no/
The photo usage and simple layout on Lillethai is something to take along the way. The way Ahaanplah showcases their location, and have a map on the bottom of the site that shows their locations are good features.
What is your deadline for completing the site? How big is the budget?
ANSWER: The website should be up and running in about 2 months. The budget is 5000 USD to gain a simple but effective site.
What actions do you want visitors to take on the site? Think about the functionality you want on the website.
ANSWER: The website is meant to sell the products and help with information. The costumers to use the website to order, look at the products and find the locations around their area.
What features should be used on your website? This includes contact forms, pictures, videos, etc. Some clients may know exactly what features they would like, while others might have no clue. Guide them by asking questions and showing them examples of other websites.
ANSWER: The website should have the following features: menu, possibility to order, map over locations, about us, contact information, reservations and pictures of our products.
List the names of three websites you like and explain what you like about them. Next, ask the client for their thoughts; ask them to point out their likes, dislikes and expectations on the website examples. This step can save you valuable time and money.
ANSWER: https://www.komplett.no/, https://www.finn.no/, https://www.elkjop.no/
Komplett.no: I like Komplett because of the simple layout. They use their yellow color to line around the search area, which is where most people want to go to find their items. I also like how they have all their important buttons all the way top right in relatively big circles, this is nice because of how easy it is to find them.
Finn.no: I like Finn’s spaceful and open design on their home page. They use a lot of white space to make their elements stand out, like all of their different categorize. Another think I really like about this website is how easy everything is to understand and find. The search area is huge which makes it very effective.
Elkjøp.no: I like how they showcase their different products with high quality pictures. The viewer pattern is a F, which I think is nice when there is a lot of products to look over.
Do you have a brand manual or brand guidelines? Make sure to obtain any vector or high-resolution logos, stock photographs and brand elements available.
ANSWER: No, this is not accessible at the moment.
Do you have any colour preferences? What should the look and feel for the website be? This will guide them visually and help you understand their preferences.
ANSWER: For the colors maybe a soft red, and some type of green to represent the vegetables. Not sure about concrete color palette, but would like to have a relaxed and modern look.
What do you NOT want on your site in terms of text, content, and graphic elements? Sometimes it is as important to know what your client doesn’t like, as it is to understand what they do like. This can help you get a complete picture of what the client has in mind for the site.
ANSWER: Don’t want the site to be overwhelming. Neither have small or bad quality photos.
Who will be the contact person for this project? Ask the client for one contact person to deal with if you have questions or need feedback.
ANSWER: The contact person is Tanfei Hong
Who will be responsible for maintaining the website? Will the person have the time and skills to do so? Discuss possible training of responsible individuals within the client’s company, or draw up agreements if you or your team will provide maintenance as part of an ongoing service.
ANSWER: Probably hire someone to maintain the website, due to none on the team having these skills at the moment.
Brief
Company profile:
Syam Kraw is a Thai kitchen restaurant that serves delicious Thai food. It started in 2019 with a small restaurant and have now blossomed into 3 restaurants across Norway. Syam Kraw stands out to its competitors
due to the food being cheaper than the others, but better quality. It is a relaxed space to eat, or bring your food home.
Target Audience:
We except visitors in middle-high class wanting more exotic food. Food interested, both male and female but mostly female. The age class is around 25-40. Their income is about 50K a year, with a good spending habit in the food industry. They prefer seafood, and want a appealing dish.
Website goal:
Our website goals is to improve further sales and awareness online towards our Thai kitchen. Gain more traffic to our locations. Provide a source of information that the customers can get help from.
Design Guidelines:
The color palette is not yet finished, but want to use a soft red and green. The style should be modern and clean, with a simple but effective layout. The font style that should be used is a wonton.
Competitors:
I would say our main competitors is Lillethai and Ahaan.plah.
The photo usage and simple layout on Lillethai is something we can take with us along the way. The way Ahaanplah showcases their location, and have a map on the bottom of the site that shows their locations are good features. We don’t like that Lillethai is not showing their dishes on the menu page, this is something we should try doing.
Functionality
The website is meant to sell products and help with information. The costumers to use the website to order, look at the products, make reservations and find our locations around their area.
Role and responsibilities
Contact person – Tanfei Hong
Photo- and videograph – Lee Sin
Hosting and maintanance -Appex media Oslo
Budget:
50.000 KR
Lesson 1.4 (https://www.feedthechildren.org/)
Surf the web and find one good example of a website that uses hierarchy to guide the viewer’s eye on the homepage.
- Explain how visual hierarchy was achieved (scale, colour, spacing or contrast) and mention the viewers pattern if there is one.
They use a lot of space to get attention to the ”donate now” button. The red color also has good contrast with the background and the secondary white which makes it stand out. The main content is in a dark shaded square, which makes the content stick out and lets the eyes relax. The content square is not too blown up so they could balance this with the child’s face. The viewers pattern on this website is a Z for the front page and F for the information.
One start off seeing the big logo to the top left, then over to the red donate button, then down left to donate now and body text and lastly the child to the right.
- Take screenshots and use the colour picker in Photoshop or Illustrator to put together the website’s colour palette. Describe the use of colour in terms of primary, secondary, and accent colours.
The primary color used is a bright red, which works well to draw attention to the specific areas. The secondary is white which is used mostly for type and space. They use black as accent color for their type, but also as a shade to highlight areas of content like on the home page.
Use screenshots to show and discuss the different text styles and choice of fonts for these (mention at least the H1, button and body text styles).
They use a bold and modern font as their headlines and button. The style is bold, and for their body text they use a more lean style to differentiate the content. Due to the seriousness of the website, I think a serious font like this works very well to set the tone. Their logo is in a more playful font style, but still not a unserious font which works well with the overall design due to the content being about children.
