OUGD504: SB3- Final Designs and Website Explanation

As a final way to tie up studio brief three I decided to show how the website would look on other devices as well as giving an explanation of the various elements of the site (links, interaction any changes I want to add) just to guide people through how the site works. 

OUGD504: SB3- Final Crit and Final Developments

Today I received feedback on my web page designs, and although I didn't feel hugely confident in them I received some praise as well as very helpful criticisms. 

The main issue brought to my attention was the use of space and the lack of white space. It was suggested that I work with a larger 'scrolling' page to allow more space for my content and to gain the valuable empty space all designers crave. 

Other tips and hints included using my logo as the 'home' button for every page, removing the coloured bar from the links and leaving them on a white background and use the smaller decorative hexagons I had included as a means to focus user attention and direct a persons gaze across the pages. 

So I went back into illustrator and began playing about, adding in the suggestions given to me.

The results were almost instantaneous and rather pleasing. 

I dropped the hexagonal grid, having used it to space apart my images and factoids I decided to rely on a graph style grid to layout the rest of the page. I chose to keep my content, and most of the design, centred so as not to over crowd the space as I had done with my previous mock ups. 

I also added an extra page, the contact page, because as I rearranged the links, it felt unbalanced having all four at the top (and the logo citing as the home page link) and placing 'external links' alone at the bottom felt equally unbalanced. Adding a new page allowed for better use of the space.

I decided, seeing as my coding abilities are little to none existent, I would be producing GIFs to simulate certain experiences with the site (clicking links, scrolling down pages, etc) and only produce the bare and accessible minimum in code (e.g. font, type size and colour, links and headers etc).

GIF showing hover and clicked versions of a page link

GIF showing hover and click for an external page link

OUGD504: SB3- Digital Developments

Digitising Scamps

After revising my scamps I decided to reproduce these designs in a digital format. And so I began by creating my hexagonal grid in illustrator and creating a top links bar that would appear on every page.

I then began to create and slot in the images for each page. I was able to transform the images from rectangular full size into hexagonal shapes due to the mask tool in illustrator. Like the mask tool in photoshop, it can hide and reveal sections of an image, however it's a lot more strict in illustrator, but this worked to my advantage as I was using very strict straight shapes.

I then got rid of the grid when I began adding text to the page; it was decided during a previous crit that placing the text into hexagonal shapes like with the images would be far too confining and would prove impossible to achieve for pages with a lot of text.

I also added 'Fact Hexagons' with text in a larger size pointing out key factoids for the user who doesn't want to trawl through large amounts of text and smaller hexagons for decoration. 

The Digital Mock ups of Five Pages

OUGD504: SB3- Crits and Further Development

We had another crit today and I presented my scamps and spoke through the general purpose of my webpage. I asked for suggestions concerning the text as I worried that if I were to use the hexagon shapes that the text could be too squashed and confined, it was decided that I would be better off using the hexagons for images and using simple columns and boxes for any text. 

I also pitched my colour ideas, using a honey gold for the hexagons and navy blue for the text, one person came up with the idea to tint all my images with the same honey yellow/gold to make it match up with the hexagons- this is something I will be doing for my further development.

After the crit I went back to my scamps and redrew them out again, this time making column and box spaces for text and hexagons for images. The result I feel is a lot cleaner and makes better use of the space available.

After looking at a website called Built By Buffalo I was inspired to use space between my hexagons so as not to crowd and crunch them all together. This turned out to look a lot nicer in the scamps as well.

OUGD504: SB3- Development 1

After the crit it was decided that I was going to develop my honeycomb idea and that I should use a hexagon grid to layout my web pages. I took the advice suggested to me and went to a site called gridzzly where anyone can make up different styles of grids, even a hexagon style, and print them off.

I used this made up grid to begin setting out my pages, I laid out all five of the pages taking account for required text and image space.

OUGD504: Studio Brief 3- Initial Ideas

For our initial ideas we have to create scamps- these are sketched out versions of how we want the final webpage to look. I have sketched out three different ideas all based around loose concepts of bees.

The first is based around the honeycomb shape. Hexagons and honeycomb will contain each of the page names and there is a possibility of having small bees dotted around (and animated to buzz or flap their wings slightly). When a link is clicked on a transition occurs, the honey combs divide and gather into the corners then the page content fades in into the new space created. The logo links back to the homepage. The complexity of this design may be far beyond my minimal/none existent coding skills.

The second idea is inspired by the bees stripes. In the corner a photo or image is present and in the other corner the logo for the webpage is shown. The links are in the centre, all in a parallelogram shape mirroring the spines of the stripes across the page. There is a transition between pages, when a link it clicked on the bottom right corner expands across the screen and then peels back again, when it does the clicked page is revealed. This may also take coding skills beyond my ability, and also the design feels a little obvious.

The last design is a single page website, as you scroll down each page lifts up to reveal the next page beneath it. This would alter the content slightly making the story of the site more fluid rather than separated into very different sections. This is also beyond my coding skills but anything I could code would be an incredibly boring website indeed. 

OUGD504: Studio Brief 3- Research

For our research the inevitable idea is to look at lots of examples of website. We were told while doing this to ask three fundamental questions for each website.

What is the Purpose?

Who is the target audience?

What are the audience needs?

We were also told to look at webpages with an open mind and write down the first words that came to mind without thinking as with so many webpages a person decides whether they will stay and browse in the first 5 seconds.

A couple of examples used in class were:

Leeds College of Art

Initial Words: abstract, grid, shapes, busy

What is it's purpose? To entice potential creative students to enrol at Leeds College of Art

Who is the target audience? Creative students, school/college leavers, parents (?)

What are the audience needs? To be excited about LCA, want to enrol here as a college or university student, to want to be on one of LCA's courses. 

Evangel Cathedral

Initial Words: American, overdramatic, cringe worthy, over compensation

Purpose? To convince people to attend their church and prayer meetings over other. To seek them for spiritual (Christian) all American guidance 

Target Audience? Christians, potentially trying to reach a younger audience- it won't work but I think they're trying to reach teenagers... especially with the electric guitar

Audience Needs? To want to attend their church and be keen and excited about going to the Evangel Cathedral. To believe their cathedral is the most exciting and the best.

From these examples, as well as others we then went on to find our own and continue with the initial words exercised as well as ask the three fundamental questions of web design.

I began by looking at a miss mash of general websites.

Caliser

Initial Words: Busy, simple, organised, absorbent

Purpose?  To entertain/inform about celebrity gossip and shocking stories- lighter gossiper version of the news

Target Audience? Young people, gossip lovers, procrastinators and social networkers, people who are bored

Audience Needs?  To be entertained and the kill time, to be engaged in 'interesting' and 'shocking' stories.

 For Dummies

Initial Words: Busy, dull, text heavy, clean

Purpose? To teach people the basics on nay different topics, in a simple easily understood way

Target Audience? All ages, beginners (on any subject), people wishing to learn new skills/refresh forgotten skills

Audience Needs? To learn how to do something in an easy, simple to understand way.

 The Escapist

Initial Words: Bright, futuristic, grids, full

Purpose?  To entertain/inform users on all topics geek and subculture, including science and tech, table top, games etc

Target Audience? Fans of any of the subjects (table toppers, cosplayers, gamers etc), geeks and nerds, mostly male

Audience Needs? To be informed and entertained on all geek related topics, to keep up to date with news and informations from geeky niche markets.

 IFLScience

Initial Words: Bright, clean, vectorised, simple, cold

Purpose? The inform people about current events, new discoveries and news updates in science in an easy to digest format

Target Audience? People interested in any scientific subject, people who wish to learn, time killers and procrastinators

Audience Needs? To be entertained/informed, given a brief summary, kept up to date and educated in scientific topics.

After browsing and analysing a variety of webpages I decided to look into webpages that focus around the area that my website would be based on: Charity and animal charity webpages.

NSPCC

Initial Words: Bright, clean, green, simple, children

Purpose? To encourage people to donate to the NSPCC, to inform people about the NSPCC's work

Target Audience? People wishing to donate to a charity, parents, families (I'd list the people that need the NSPCC like abused children or concerned adults however just because the charity supports them doesn't mean it's website is aimed at them)

Audience Needs? To understand the work done by the NSPCC, to be convinced to donate regularly

Blue Cross

Initial Words: Blue, simple, puppies, calm, cool

Purpose? To encourage donations and/or sponsorship or animal adoption, to inform viewers of the Blue Crosses work and offer advice to pet owners

Target Audience? Animal lovers, charitable people, pet owners, families

Audience Needs?  To be persuaded to donate, sponsor or adopt an animal, to be given information on pet ownership, to understand the work of Blue Cross

Bumble Bee Conservation Trust

Initial Words: Vector, white space, grids, floral, nature

Purpose? To inform and provide information about bumble bees and bumble bee conservation, to encourage donations for the charity, to educate people about bees and conservation work

Target Audience? Animal and nature lovers, charitable people, gardeners, families

Audience Needs? To understand about bees and bee conservation, be informed on charities work, be confined to donate money

Give Bees a Chance

Initial Words: Green, garish, clip art, clashy

Purpose? To persuade people to donate and to inform people about bees and charity work

Target Audience? Nature and animal lovers, families, charitable people, gardeners

Audience Needs? To be convinced to donate money, to understand about bees and their importance, to learn about bees and charities' work

After looking into and analysing webpages I decided to look into 5 different, recent web site design trends.

Skeumorphism

Skeumorphism is a form of design that tries to make something within a digital format resemble something from a  real world format. With this example here we can see that although this is a website, Team Fannypack have designed their website to look like a physical newspaper.

Flat Design

Flat design is very opposite to skeumorphic design, it is purely for a digital world and every looks, as the name would suggest, very flat- a bit like a vectorised image.

Single Page Websites

Single page websites have all their content on one page that you continuously scroll down making one, long page. They can have issues when it comes to being found on a  search engine.

Responsive Design

Responsive design is a form of digital/web design that works on multiple platforms. The pages are designed to work, and still look good on many different screen sizes from a large mac down to a phone.


Type Based Websites

Type based websites do what they say on the tin, they are websites that rely heavily on their typography to drive the look and design of the pages.

OUGD504: Studio Brief 3- Web Design

For this brief we were informed we would be using our summer project research in order to create a multi-page website that informs users with interesting facts, figures, observations, visual content and information we have gathered. 

The content of our research should inform the design and the tone of voice used in our website. 

We were also given a quick presentation on web design and websites in general. Something interesting I discovered from this is that I'm as old as the internet, and what the very first webpage looked like. It's still up and running: The First Webpage. We also learnt what certain web speak stood for.

HTML: Hyper Text Markup Language- the language used in the creation of webpages

HTTP: Hyper Text Transfer Protocol- The basis for the transfer of data across the world wide web.

URL: Uniform Resource locator- Used to reference web addresses and web pages.

CSS: Cascading Style Sheet- Markup language used for formatting.