OUGD504 // Studio Brief 03: Research: Website designs

David Engzell - davidengzell.com

This website belongs to an artist called David Engzell, who is an abstract artist. This ties into my summer project so I decided to look at it for this brief. It is a side scrolling website, which suits the content of mainly images. I like the idea of this as its not the norm and it reminds me of an art gallery. A lot of my research is image based so this would suit, however with text it would be more difficult.

Printed Pages - printedpagesmagazine.com

• Simplistic
• menu across the top which accompanies the content as you scroll through - this makes it easy to use and accessible.

Ross Gunter - rossgunter.com

The permanent 'R' logo standing for the designers name is quite a bold move, as it doesn't move at all when scrolling through the website and content, it's also right in the centre of the whole page. I think that it's a bit too distracting; it would work better if it was to the left or right of the page, as it the white does work well against the muted colours.
The horizontal scrolling is, like the first website, like an art gallery and I like that. However it makes it feel quite one-dimensional and restricted.

Art Fucks Me - artfucksme.com

I'm not sure that the teal colour suits the websites content, it feels a little too clean and social media like... or maybe its just my personal preference. I'm not too keen on white and teal together, they are quite clinical colours.
The layout works well and it is straightforward.

Mirko Borsche - mirkoborsche.com

scroll up to get a drop down visual menu.

To go through images, the viewer navigates with left and right arrows. Scrolling up and down makes two different menus pop up, which I quite like, as it is interactive and makes the website nice and clean if you just want to look at the featured images. The all white with black text design seems to work quite well, as the images speak for themselves and add the colour and detail.

Superpaper - superpaper.de

The articles are all clear and I like the neatness and small size of each feature, as it gives a better overview of the content and doesn't force you to scroll a lot. However I feel quite uninspired by the overall design... it's quite boring. A bit more colour wouldn't do any harm.

Karmarama - karmarama.com

This website is one of my favourites that I've looked at, as the colours pop out and create an exciting and vibrant atmosphere. Some may think that too many different colours are being used, however so I'm not sure about using such an idea in my own website.

OUGD504 // Studio Brief 03: Canons of Page Construction 2

Van De Graaf grid with columns and paragraphs.

Newspaper grid

Magazine grid

 Surprisingly the magazine spread has more columns than the newspaper spread.
The newspaper has a large image overriding both pages, eliminating room for more columns. It is perfectly symmetrical whereas the magazine grid is uneven, with four columns on the left page and three wider columns on the right page.

OUGD504 // Studio Brief 03: Numiko web design

Two designers from Numiko gave us a talk about how their design studio runs. They said that they like to focus on projects that they care about and that matter. Some of the examples they showed are Make Things Do Stuff & Design Council.
They told us that not every single individual page on a website needs to be designed; a content management system means that the core aspects of a page are designed.

The navigation of this website is really straightforward and easy to use. Bright and youthful colours are used but only in small amounts so that they aren't too overbearing for children.

I made the screen slightly smaller and everything on the page changed size and placing to work with it.

I made the screen even narrower.

This website is very well designed and has been designed for different formats, and for different screen sizes. This makes it a responsive website.
I like how the menu down the side of the screen gets minimal when the screen is smaller, and the simple 3 colour theme works well with the information heavy style of the pages.

Responsive // Studio Brief 01: Initial live brief/competition ideas

Penguin non fiction book cover design - Freakonomics by Steven D. Levitt & Stephen J. Dubner
http://www.penguin.co.uk/static/cs/uk/0/minisites/penguindesignaward/adult_non_fiction_prizes.php

The cover design needs to reflect that this is a fresh, witty and illuminating book which looks at the big – and the not so big – questions of life in an original and entertaining way. It needs to hint at the very broad range of topics the book covers. It needs to convey that the Freakonomics way of seeing the world is at the heart of everything we see and do – these are the subjects that bedevil us daily: from parenting to crime, sport to politics, fat to cheating, fear to traffic jams. This book asks provocative and profound questions about human motivation and contemporary living and reaches some astonishing conclusions. The cover is the ‘way in’ to how people will change the way they see the world.

Penguin fiction book cover design - Oranges Are Not The Only Fruit by Jeanette Winterson

Jeanette Winterson’s writing is vivid, experimental and imaginative and your cover design should reflect this. It should appeal to a contemporary, enquiring and literary readership. This book has been chosen because there are many themes and layers within. Try and reflect this in your design.

1st Prize

• four weeks in the Penguin Random House Design Studios on a work placement*, working on live briefs.   

• The work placement will be paid at a rate of £50 a day (subject to any applicable taxation) and the winner will also receive a cash prize of £1,000.

2nd Prize - £500 cash prize.
3rd Prize - £250 cash prize.

Bolivia Biennial poster design
http://www.bicebebolivia.com/PosterCall.html

• Category A Posters on cultural topics and activities.
• Category B Posters on political and social issues.
• Category C Posters advertising commercial events, products or services.
• Category D Unpublished posters on the topic: HAPPINESS CULTURE WITH SOCIAL RESPONSIBILITY.

Categories A, B & C

• First Prize Medal & diploma

• Second Prize Medal & diploma

• Third Prize Medal & diploma

Category D

• First Prize $us. 4000.- Medal & diploma

• Second Prize Medal & diploma

• Third Prize Medal & diploma

D&AD New Blood Awards
http://www.dandad.org/en/new-blood-awards/?utm_campaign=New%20Blood%20Awards%202015&utm_content=9066669&utm_medium=social&utm_source=twitter#grid

YCN - J2O 
http://www.ycn.org/awards/ycn-student-awards/2014-15-ycn-student-awards/briefs/j20

YCN - Topdeck Travel
http://www.ycn.org/awards/ycn-student-awards/2014-15-ycn-student-awards/briefs/topdeck-travel

iF Student Design Award
http://www.graphiccompetitions.com/students-only/if-student-design-award-2015


Design a sticker for Booooooom
http://www.booooooom.com/2014/10/23/design-sticker-booooooom/

This is a call to all you artists and illustrators out there to design us a 3″ x 3″ sticker. It can be whatever you want it just needs to have the word “Booooooom” somewhere in it. Make whatever you want, in your own style.

3 winners 

500 stickers of your own design sent to you 

We will also get these stickers made for us and the back print on the stickers will have information about you (your name, website, etc) so when we give them to people we will essentially be handing someone your business card!

OUGD504 // Studio Brief 03: Canons of Page Construction 1

The Golden Ratio is a mathematical proportion that has been studied for centuries. It is used in many aspects of design and is believed to be harmonious and aesthetically pleasing.

In the diagram above I drew the golden ratio diagram that is as so:

Ratio used: 1:1.618

Width divided by 1.618 to get height of rectangle, and so on.
I then created columns from the diagram which can be seen in the photo. I did this by flipping the golden ratio around to make the measurements on the opposite side of the rectangle.
This grid is used often in web design and could be a starting point for our own designs for web.

Potentials
A neatly thought out layout with ideal proportions
Avoids boring straightforward symmetry and introduces contrasting proportions
Problems
Quite unnecessary in modern design
Restricting if small changes are wanting to be made

Van De Graaf Canon grid.

OUGD504 // Studio Brief 03: Web design session 2

Important:
UI User Interface
UX User Experience
Always consider when web designing


Limitations
Web safe colours
12 shades of grey
or
216 colours
Not a good habit to type in the colour's name instead of the code

Never start designing while working in dreamweaver - always away from the computer.

Web safe colours
RGB is capable of reproducing nearly 17 million colours - 16,777,216
The 216 are web safe, the rest are not.
Colours are created by specifying the percentage of 255 per RGB.
100% red is: rgb(255, 0, 0)

Web safe fonts
For a chosen font to display consistently across different computers a standard font must be used.
Most computers will not have uncommon fonts installed so they will not show up.
A font with multiple words in the name need to be grouped together with speech marks, otherwise they will try to be identified as two separate fonts.
Fonts that you want to be chosen will need to be put in order of preference incase the first is not found or available.
eg Arial, Helvetica, sans-serif
using @font-face with CSS breaches copyright with font foundries, so be careful.

Size, dimension, pixel resolution
640 x 480
800 x 600
1024 x 768
2880 x 1800 (220 ppi)

1024 x 768 is recommended.
Be aware of different screen sizes when web designing.

File formats
PNG, GIF, PDF, JPEG
72ppi, RGB
lossy, compressed

JPEGs do not support transparency, while PNGs do.
PDFs for multiple page documents.

There is always a bandwidth limitation, which is cut into every time a web page is visited. Using 72ppi makes the file sizes a lot smaller, rather than say 90ppi.

Best to do 3 sketch designs initially.
If you sign a design that a client agrees to, they have to pay you even if they aren't happy with it when it's finished.
Make all measurement decisions on paper, which is called a wire frame. 








User work
everything has to go in the same folder
Hard drive > Local > images

Dreamweaver
Site>New site>

save the home page as 'index' because the web is universal

Add CSS as link to html, not import.

Do not delete the file extension when saving.

Do not go File > Open. From the side bar.
HTML
Only things that affect the functionality of the website go in between <head> and </head>, nothing visible.
Content goes in between <body> </body>, and will only become visible this way.

(Sitemaps) -

HTML
index.html
>about.html
>contact.html
>gallery.html
>shop.html
coding has to be done on all separate pages.

CSS
>stylesheet.css
coding only has to be done once, it links to all of the pages.

CSS
/* notes here */
Anyone can see notes.
Never import a CSS file into a html file.



Useful books
Html & CSS - John Duckett
CSS Mastery

For next session
A scamp
Sitemap -
Wireframe - measurements

OUGD504 // Studio Brief 02: Final 'Woozy' kickstarter logo

I created the final logo by using a graphics tablet to draw both the type and the imagery. I warped the shapes and angles to make them neater and I played around with different sizing and placing.
The 'z' stood out to me early on as a feature that relates to sleeping; cats use the hammock to relax and cats are known to sleep very often. 'Zzz' in a diagonal line seems to fit perfectly with the word, with clear connotations.
I have used negative space within the 'W' to create a cats head, which is a clever and humorous detail. I added the tail to complete the illustration, which adds softness to the logo with its curves and mimics the shape of a cat curled up asleep, thus suiting the product.
For placement on photographs, I think that a fluffy cloud type shape to frame it works well; it adds to the connotations of softness and comfort.
I find the logo very suiting to the product. In terms of target market - people who are interested in stylish and minimal furniture, young cat owners - it has maybe a little too much of a playful looking style, as it probably wouldn't appeal to everyone in them categories. However, it is difficult to design a logo that portrays the hammock for what it is - a pet product - while trying to be 'stylish and minimal'. It is also impossible to ignore the branding for already existing pet care, which is successful partly due to the clear and concise appropriate branding. So bearing these points in mind, the logo has a nice balance of both animal care and youthful stylishness.
Having been given more time, I would have liked to experiment more with the logo fitting in to a shape or being joined more together, which it lacks because of the angles and imagery sprouting off the name 'Woozy'.
Overall I think that the logo emits comfort and friendliness. It clearly portrays the product without giving too much away or including too much detail. The hand rendered type fits well with the word which is playful and silly.

OUGD504 // Studio Brief 02: Logo colour

Deciding on colour is quite tricky, and its also hard to not fall victim to the ideas of colour that are ingrained into us, for example green: health, clean, eco. However, certain colours are picked for a reason, and its impossible to ignore colour ideals entirely when there is a target audience.

Below are some colours I think suit the project.

I want to use two colours to distinguish between the product name and the imagery around it. More than two colours will complicate things.
Teal and dark blue appeal to me, as they are friendly looking and are easy on the eyes; they aren't harsh like primary colours, or black. They go together well. I think I'll choose the last image, as it feels right that the name is the darker colour for boldness.

OUGD504 // Studio Brief 02: Logo development

These images show my development of logo ideas in illustrator. I can't choose which one to fully develop so I have worked on all of them simultaneously.
1. The top left logo is simple, cute and playful. the minimalistic style is quite effective, however why are there two cats? This seems like something that would need reasoning behind it other than there being two 'o' characters. It also doesn't say enough about the project or product.
2. (top right) I like the informal style of this one, which is why I can't seem to let go of it, but also why I don't think it is professional enough. The upside down face is maybe a little confusing because of it's orientation and isolation.
3. I like the hammock logo, but I feel like it has maybe too many details for a logo, as well as the shape being quite awkward compared to the rest. It is definitely lighthearted and playful, however.
4. This is one of the more logo-looking ones. It has 3 details that effectively communicate the product: sleep, cat face, and cat tail. However again the upside down cat face isn't quite right.
5. This logo has the most potential, I think. It is simple, informal, and the negative space of the 'W' is clever and works really well.

Others opinions have said that 1. isn't clear enough, and 3. is effective.
I am not decided on colours quite yet.

OUGD504 // Studio Brief 02: Study Task 04

Branding considerations

Faults I have gathered from the Woozy project:

• There is no branding; the closest thing is 'WOOZY'  in a playful typeface on a photograph of the product.
• The grammar isn't perfect as English is not their first language, so some sentences don't make sense.
• The typeface used on the images is very undesirable and ugly.

Qualities that give branding potential:

• Cats are very popular pets, so a unique product for pets has a lot of potential.
• It is compact and fits in nicely to any home, as it hangs on already existing objects.
• It can be assembled very easily and quickly.
• Comes in a variety of colours etc.
• The video shows it being used effectively by a cat.

Pet product research: 

Whats already out there? I looked into similar products for cats on Amazon.

None of these products have appealing designs to relatively young people, or people who don't want to ruin the look of their homes with a chunky bed. They seem very outdated and only appealing to older people.

This is where the Woozy comes in. With some effective modern branding, it could take the place of these unappealing beds.

Context/market audience:

• Cat (and potentially dog) owners.
• People who want a stylish alternative to normal pet products.
• People between 24 years old and 40 years old: a younger alternative to products already on the market.

Brand positioning:

• 'Woozy' - a unique and memorable name.
• Stylish and minimal design that appeals to a new, younger market who own pets.

Brand values:

• innovative
• modern and up-to-date
• multifunctional
• eco-friendly
• high quality

Reproducibility/adaptability - how would it appear in different situations?

• It needs to be appropriate for product packaging, Kickstarter, websites, emails, and letter headings.

Communication (audience/customer)

• Comfort for the customer's pet is what needs to be communicated the strongest, as well as trustworthiness and quality, as by paying towards the Kickstarter they are putting trust in the product.

OUGD504 // Studio Brief 02: Logo development

Key aspects i am using in my design ideas:

• cats, as it is aimed at cat owners/lovers
• playfulness
• friendliness
• lightheartedness

• The first things I noticed about the name 'Woozy' is that the 'w' resembles cat ears, and the 'y' a cat tail, so I've incorporated them into some sketches.
• The 'w' makes for a upside down cat head, so I tried that as if the cat is playfully stretching or poking its head down. However, I think if its the wrong way up then it is confusing and doesn't work as a product logo. 
• The top left sketch works better, as it is a nice use of negative space. I'm just skeptical about the neatness of it as some may think it is an extra letter stuck on if it isn't clear enough.
• The 'oo' in 'Woozy' has potential, so I have played about with paw prints and cat eyes. However I think both may be too typical and widely used enough as it is.
• I used the 'z' and added more of them to add the affect of sleep, while keeping the tail in the 'y' to make it seem cat orientated.

• I have tried to fit the name in the shape of a cat or around the edge of the cat to make the shape. 
• I drew realistic cat eyes with Woozy underneath, which I'm quite fond of. However, I don't know if it's clear enough that the eyes are feline.

• I'm not crazy about any of these ideas,  however I like the idea of the cat profile outline. 

• I thought of adding the visual of a proper hammock that people use, for imagery value. The ears and tail poking out make it clear that its for cats, and its quite minimal.

Chosen initial ideas:

Crit feedback:

• The top left design is most popular
• The big eyes don't reflect comfort, so it doesn't really suit the product.
• Top right is effective