Create a Wireframe

Week 20

This Learning Activity is about creating a website wireframe. For that, I first have to answer the 10 essential questions from my previous post.

The client I chose is Little Explorers, the same I worked with on my Semester Project.

ESSENTIAL QUESTIONS

What kind of visitors are you expecting on your website?
Parents with children under the age of 12 that want to buy handmade, ethical- and sustainably produced clothes that allow their kids for free movement and autonomy.

Who are your competitors and how do you differ from them?

There are a few online stores that sell similar clothing, using organic cotton. Even though most of these stores offer sustainable designs that can be considered comfortable in most cases, it is not one of their central claims. Little Explorers differentiate themselves by focusing on children’s clothes only, with a broader size range and putting stress on the functionality and durability of their garments.

What actions do you want visitors to take on the site?
I want them to make a purchase.

What is your deadline for completing the site? How big is the budget?
The business is not established yet, so the deadline could be something like two months. It is a very small business and so is the budget.

Please list the names of three sites that you like and explain what you like about them.
1. Lucía Be
2. Little Adventurers
3. Små Spor
What I like about all of them is their use of image, the structure and organisation of the web and how easy it is to find the information you are looking for. They use the right amount of information and focus on showing what they are selling with high-quality images.

Do you have any colour preferences? What should the look and feel for the website be?
The colours should be a light grey for the background, with copy in dark grey and headers and accents in green and turquoise. Same shades as in the products previously designed.

What is the main goal behind building the website?
The main goal is to sell the products that my client makes.

Do you have a style guide or any existing images?
The brand has a style guide, logo, clothing tags, packaging design, business card and brochure. You can see them here.

What is the most important information your site must relay to the user, especially on the home page?
A description of the brand values and photos of the products they sell.

Do you have the content for the website or will content creation be a part of the scope of work?
The client will create the content.

Little Explorers is located in Spain, and so their website should be in Spanish. For the sake of this learning activity, I will use English.

I have chosen a lo-tech architecture because Little Explorers is a small, new business with low budget. Besides, drawing the wireframe by hand allows me more creativity and it’s easier to adjust and update.



Providing your own hosting service

Week 20

This week we continue learning about web design. This mandatory assignment is about getting our own hosting service that we will use for the rest of the studies.

I chose to use one.com as recommended by Noroff and I even got a referral link that gives a NOK 110 discount to those who register a domain using my link.

My domain name is monicaoterodesign.com and here is the confirmation email.

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
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.

Browser
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 – https://www.bloganaalbiol.com
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 – https://www.icelandair.com/is/
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 – https://www.maquillalia.com
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 – https://www.yr.no
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 – https://www.pickuplimes.com
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 – http://www.nimuazotea.com
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 – https://avinor.no
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 – https://gadja.no
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 – https://www.luciabe.com
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 – https://www.zalando.no
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 – http://www.alovelyworld.com/index.html
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 – https://www.grannen.no
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 – http://ve.no/Index_henrik.html
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 – http://www.petersbuss.se
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 – http://www.gatesnfences.com
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 – https://mednat.news
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 – http://www.irishwrecksonline.net
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 – https://www.lingscars.com
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 – https://www.art.yale.edu
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 – http://www.arngren.net/
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.

MA 04 – Photography

The purpose of this assignment was to experiment with photography throughout the semester and explore different topics and techniques. We had to shoot, at least, one image for each of the themes listed below and create a well-thought composition. The photos may be cropped, but not manipulated.

– Night Photo
– Freeze water
– “Misty / veil”
– The golden section
– Motion blur
– Contrast
– Low key or high key
– Curves and lines
– Drawing with Light
– Depth

These are the 10 photos I picked for the assignment. I shot all of them with my Nikon D5200.

Semester Project 1

Week 14-17

Client: Little Explorers is a children’s clothing online store. They design and sell handmade clothes for children aged 0 to 12. It is a new small online business to be established in Spain in the near future. They seek to offer an affordable and sustainable alternative to children’s clothing. Their designs are handmade, functional and fun, with playful colours and prints that are made using ecologically and ethically produced organic cotton. Their main goal is to make practical and comfortable clothes that allow for easy movement and promote the child’s autonomy.

The aim of the Project Exam was to create a complete an authentic graphic design project for a client. In my case, it includes designing a logo, a business card, a bi-fold A6 brochure, clothing labels – to be sewn to the garments – and a cardboard shipping box – design to be printed on the packaging in which the clothes will be shipped -. Besides, it was required to make a Brand Style Guide to provide the client with all of the necessary details for consistent branding.

These are the products I designed.

MA03 – Recipe booklet

The goal of this assignment was to design a recipe book targeted towards students and young adults in the topic of eggs. The booklet should have a front and back cover, a preface, content repository, recipes and contact information. The text was provided and could not be changed, while the use of pictures was more flexible.

After submission I got feedback from my teachers and made further adjustments before submitting the design as part as my portfolio. Here is my final version.

Experimenting with “Drawing with light”

As part of my photography mandatory assignment I had to experiment with different styles and techniques. One of those was “drawing with light”. I waited until the long, bright days of Norwegian summer started to get a bit shorther to attempt this technique. It turned out to be a lot of fun and ended up with a lot of photos, of which these are my favourite. Now comes the difficult task of choosing only one for my assignment and portfolio.

Design of Layout in InDesign

Week 10-11

Using InDesign, design a 4-page brochure for a fictitious travel agent.

  • The size of the brochure should be A5 (when it is folded).
  • Design the brochure in full colour.
  • Use fake body copy, but create sensible headings.
  • Use titles, headings and images of your choice.
  • Be sure to pay attention to:
    • Choice of type
    • Choice of imagery
    • Use of layout and grid to communicate the content

Back and front of the brochure

Left and right inside pages

Saga Travels is a fictitious travel agent that offers trips to Iceland. This is the first brochure I design in InDesign, and there are things to improve, but in general, I’m satisfied with the result.


Sources:
https://www.pexels.com/
https://pixabay.com/

Pace and contrast

Week 10-11

Compare the design (in terms of pace and contrast) of an online magazine, blog or website to that of a printed magazine, book or journal. What differences can you see between the kinds of design strategies used in the two formats?

For this Learning activity, I’m going to compare the Spanish edition of Elle magazine, March 2020, both their printed and online versions.

Cover of the printed magazine

Home page of the online version

The cover of the printed version uses one big photo that can also be seen on the homepage header of the online magazine. The logo is present in both versions as well.
On the printed cover, the designer has used a combination of typefaces -serif and sans-serif- to catch the attention of the reader. The online magazine also uses a mix of serif and sans-serif typefaces and similar colors as the printed one. The difference is, of course, that the web version is interactive, and the information can be presented differently. There is a menu just below the header with some fixed categories that the reader can click to get to the desired information. If we scroll down the main page, we see the same categories with some of their content, showed in a grid design with pictures and the title of the article they link to.

Printed spreads

Online article

The design for the printed magazine has a lot of pictures to make the read easier and more dynamic, and so does the online one. The difference lies in the way the text and photos are distributed in the article. In the images above, I show the same story in both paper and online. In the printed one, the designer uses a 3-column grid where they add large pictures, some even taking a whole page. The web article, on the other hand, has a unique column, and the photos are inserted in between the lines, more like a blog post, since the reader will scroll down to read the piece rather than turn the pages on a more traditional magazine.

The way a reader navigates a magazine is very different for printed and web, and it is essential, as a designer, to consider that aspect when designing the layout and the way the information will be presented.


Sources:
http://lector.kioskoymas.com/epaper/viewer.aspx?noredirect=true
https://www.elle.com/es/

Basic Principles of Layout

Week 10-11

Take a magazine, newspaper or book that includes images and text. Lay tracing paper over the top of three spreads (both left-hand and right-hand pages). Using a pencil and ruler, carefully trace the grid underlying the page layouts. Remember to remove specific text elements or images, and to only draw the grid lines. Note column widths and margin sizes at the top, bottom, and to the left and right of the main body of text. Is your document based on a two-column, three-column, or another type of grid? Which elements stay the same on each page, and which change?

I decided to use the magazine Hus & Bolig. The three spreads I chose are based on a three-column grid, like most of the pages in the magazine. All the pages selected have a mid-range amount of text, which works well with this type of grid. All three spreads have large images/graphics; the first and the last one have an asymmetric distribution between picture and text, while the second one is symmetrically divided.

Column width: 5,7 cm
Column hight: 25,4 cm
Top margin: 2,2 cm
Bottom margin: 2 cm
Left margin: 1,5 cm
Right margin: 1,5 cm
Gutter: 0,4 cm