Anatomy of grids

After reading this website (click here), I found out that layout of grids is more complicated than I thought it would be. There is so many different parts of grids such as margin, format, row, column, marker etc.

Here is the picture that explain every part of grid very well (downloaded from here)

grid-anatomy

Explanation of grids/4 main types of grids

(Information read and pictures downloaded from www.vanseodesign.com/web-design/grid-types)

When I started to do a research about grids, I found the website (click here) which was great to get basic information I needed for my research.

Grids are vertical and horizontal lines that divide pages vertically and horizontally into margins, columns, lines of type and spaces between blocks of type and images.
Also there are two types of layout – landscape and vertical.

There are 4 main types of grids:
Manuscript grids – simple single column grid; they are used for continuous blocks of text for example books and long essays. However, images can be used to fill the space instead of text.

manuscript-grid


Column grids – it is usually used when there is different information presented

column-grid

Modular grids – they are usually used for  image galleries and shopping carts as this layout offers you more control of space in tables.

modular-grid

Hierarchical grids – this type of grid is used when non of grids mentioned above are good enough to use because they don’t fit into criteria. It is usually seen on websites.

hierarchy-grid 

Every single type was designed for different requirements and that is why designers need to be familiar with these main types of grids.

If you’d like to read more about main types of grids, please click here

Researched areas I will cover

Researched areas I will cover in my research will be:

  • Grids 
  • Typography – extended copy
    – type style
    – positioning/ alignment
    – size/weight
    – colour/texture/style
    – writing copy (content)
    – creative copy (brand,section headers,sub headers)
    – headers/footers
  • Graphics – photos/vectors/rasters/illustrations/graphic elements
    – image layout
  • Layout – composition/ hierarchy/ positive & negative space
    – grid/ size
  • Output – file management
    – file format/ print delivery
    – paper
    – print finish
    – generating print ready file

Introduction to assignment

In previous assignments I was working on my brand identity and how to best pitch myself within the field that I would like to work. In this assignment I will have to produce a brochure that promotes me.

The final submission for this assignment will require:

  1. an eight face document
  2. print ready artwork that progresses my brand
  3. evidence of graphic/typographic element design

 

Ideas for a 2000 word comparison essay

In semester two, I will have to write 3 essays. First one is a 2000 word comparison essay on topic ‘Analyse, compare and contrast two examples of graphic/design interface or two examples of user experience online from the 20th and 21st century‘.

My first idea was to compare design and user experience of old (one of the first) websites ever created and new ones. The reason why I thought it would be a good idea was that design of one of the first websites was very simple, consisted only from text and maybe a few pictures, that was it so they couldn’t give users a lot of user experiences apart from information that they were looking for. However, technology and everything developed so much since then that websites these days not only give completely different user experience to users but also information that they can get. I thought it would be interesting topic to research but when I had a conversation about my task with my sister, she gave me a better idea what to write about.

I am going to write about Amazon and Facebook. These two websites are great for this topic as there is sooo much to research and write about.

How I intend to do it

I will do a deep research about Amazon and then Facebook for example who, when, how, why they were created (basic information). I will write about user experience on Amazon and what it gives to users for example shopping online while you’re sitting at home watching tv, ability to find anything you want to buy without having to go around shops (sometimes when you go to the store and they don’t have what you want, they advise you to look online), easy and accessible website. I will use information from lecture in semester 1, where we watched a video about ‘virtual revolution’ and one of the topics was Amazon. Everything that you type into search box is remembered so they can offer you similar things you might be interested in or similar things that people who bought the thing that you want to but were looking at; basically it influence you and your decisions. There are many more things to write about.

Then I will write about user experience on Facebook for example it allows you to contact people on other side of the world that you would not be able to know without Facebook, keep in touch with friends and family, free and easy access to fun but also I will talk about ‘dark sides’ of it like loosing privacy and ‘paying the price for free using of Facebook’ (this will link to my research in semester 1 about social networks and also to Jane McGonigail’s talk on TED – social networks might give people feeling that they belong somewhere. Also Sherry Turkle’s book called ‘Alone Together (Why people expect more from technology and less from each other)’). It will be relevant to Amazon as well.

Later on, I will move on to design part of these two sites and compare them.

I must say that I’m looking forward to write this essay as it is going to be very interesting to read and write about.

Designing of mock up – step 6

I opened Adobe Photoshop CS6 and started to design. This is what I came up with –

1st version

As you can see on the picture above, I tried to stick to colour scheme that I’ve chosen but I don’t think it looked good. Title of the site is in white colour but middle word ‘healthy’ is in rainbow colours because I thought that it might give it a bit of ‘playful’ look; rainbow has 7 colours and this word consists of 7 letters so I thought it would be perfect. But when I looked at it later on, I didn’t like it!
After consultation I decided that it is not good design at all and I didn’t like it because it does not look professional at all.

Second attempt

After unsuccessful first attempt of design and consultation, I had a few very good ideas drawn on the paper.

2014-02-19 20.03.41

As you can see, there is a new layout of the site drawn and instead of words in navigation, I decided to have icons that symbolize words instead. The reason for that is that this task is more about the design than about anything else and people automatically link pictures to words, it is common sense and humankind did it thousands and thousands years ago when they painted pictures in caves.

I opened a new page in Adobe Photoshop CS6 and started all over again. This is what I came up with but this time, I sticked to exact colours that I’ve chosen –

2nd version

As you can see on the picture above,there is a massive improvement and professional look added into it comparing to my first design of the site. I sticked to font colours and the reason why it has two different colours is that I wanted to make word ‘healthy’ to stand out a little bit so your eyes automatically look there. They layout of the site stayed the same, I just toned down colours so it does not ‘shout/scream’ at you as much as the first design did. As you probably noticed, the left sidebar for navigation is empty as I am having a problem to find right icons on internet.

Research about colour scheme

In my previous posts (click here to read more), I was talking about colour scheme for my website. However, after quick visit of a shop one day, I saw a box of tea and colours were just beautifully matched. I took a photo of it on my phone so I could work with it later on. (Inspirations are everywhere around us!)

Untitled-1

Research about colours

I did a little research about theory of colours to see if I could actually use it as my topic is ‘children’s healthy eating’. I found that purple colour is ‘the color of good judgment’ and that most children love this colour. I also did a little research about personality of people who like purple colour and I found out that  those people are sensitive, supportive, thinking of others before themselves and other people like to come to them for help. (read more about it here) All of these information gave me a good evidence that this combination of colours for my website would be a good choice as I want to target parents instead of children (read more about the target audience in my post here) even thought it is unusual colour scheme for website about healthy eating. Colours that are usually used are green, brown, orange, gingery colour and soft blue.