OUGD504: SB3- Crits

For my feedback session I brought in three rough ideas and sketches for page designs. I didn't want to put a lot of time and effort into create full sized scamps until I was certain of which idea to pursue. Here's the feedback I received.

Use the hexagon design (can obtain hexagon grids from Gridzzly.com) 

Look at bee hive slots/frames for further inspiration of hexagon layouts.

Be careful with colour- use half tone pallets, yellow and navy/blue. Don't let the yellow and black become too JCB.

Potential 'popped colour' or colourised techniques in imagery. 

OUGD504: SB3- Seminar: User Experience Design (UXD)

What is User Experience?

UX (User Experience) is not usability, it is the role a product plays in a user's existence.

It is the totality of end users; perceptions include effectiveness (who good is the result?), efficiency (how fast/cheap is the product/service?), emotional satisfaction (how good does it feel?) and the quality of the relationship with the entity that is created for the product or service (expectations, does it create subsequent interactions?)

Hassenzahl and Roto:

People have and use technical products because 'they have things to do'; they need to make phone calls, write documents, shop online or search for information. These are 'do goals' appropriately evaluated by the usability and usefulness measures of their 'pragmatic quality'. Users also have emotional and psychological needs, including needs involving self identity, relatedness to others, and being satisfied with life. these are 'be goals', appropriately evaluated but the emotional impact and phenomenological measures of their 'hedonic quality'. 

User Experience: Comparing regular hand dryers to the Dyson Air blade. 

More hygienic, no dripping water on shoes, better branding, better look.

Other products/services with significant user experiences (in comparison to their rivals)

iTunes vs Windows Media Player

Ebay vs Amazon

Coke vs Pepsi

What is User Experience Design?

The creation and synchronisation of the elements that affect users experience with a particular company, product, service etc. with the intent of influencing their perceptions and behaviour.

The application of user research in the development and production of user interface. User centred design. The purposeful engineering of user experiences through the application of UXD methodology.

Garrett's Model of UXD

1.User need and site objectives: what's the point? What does it need to do?

2.Content Requirements: What needs to be there?

3.Information Architecture: What's the most important content? 

4 and 5. Info, Navigation and Visual Design: Aesthetics, how it needs to look.

The Model of UXD Applied to my Own Webpage

1. To get more people proactively saving bees and to deliver information about bumble bees, bee problems and bee conservation.

2. Information on bee numbers and threats and solutions to these problems.

3. Awareness of danger, what the world would be like without bees.

4/5. A well organised flow of information, show issues first followed by solutions. 

UXD Methods

User Research: What are the users? Goals of particular user groups, attitudes and behaviours while completing goals. Can be obtained through observations, questionnaires, focus groups etc.

Personas: Documents that describe a user based on user research. Personas describe a specific person who acts as an example of a particular group. They are based on goals, behaviours and attitudes of users.

Content Strategy: Based on research, personas as well as the overall brand/project strategies. What is the necessary content? The hierarchy of information? what content reflects brand identity? Use data?

Task Models/Flows and User Journeys: The journey that a user will take through a webpage.

Wire Frames: Content structure/architecture of site, similar to scamp designs.

A/B Testing: A method of testing a variation of a system against the existing system.

Creating a Persona and Task Flow for 'Bee Aware'

Example Persona:

My Persona

Key Goals: 

Wants information

Doesn't want to be bogged down with too much content/text

Wants straight forward, easy to access information

Must Do: 

Break up information/text so as to not clog up a page

Present content in an easy flowing format

Make layout pleasing to look at as well as to support flow of information

Behaviours:

Quick Browser

Make decisions quickly

Doesn't like over complicated pages

Easily distracted

Mustn't Do:

Have lots of plain text on a page

No breaks in content

Make the site difficult to navigate

Make page design dull

My Task Flow

For this who can't read my writing

Home

Click: Info on Bees

Read information on what our world would be like without bees*

Click: Bee Problems

Reads bee problems, lack of flowers, pesticides, intensive farming etc

Read what can be done to help

Do tasks or visit external links to buy seeds or donate money.

*Potential skip straight to what can be done.

OUGD504: SB3- Study Task

For this study task we looked into an example of new media and researched some of the issues surrounding it.

I looked into gaming and why it is that girl gamers are ignored or considered to not exist. My two main references for this research was a book entitled 'Beyond Barbie & Mortal Combat: New Perspectives on Gender and Gaming' and an article on JSTOR called 'Gamer Girls Rising'.

About 38% of video game players and 42% of online game players are female. About 70% of casual gamers are women.

In "Getting Girls into the Game" Tracey Fullerton and her co authors point out that "computer labs in schools or clubhouses are often dominated by boys who tend to elbow out girls and take control of equipment." And Carrie Heeter and Brian Winn, in "Gender Identity, Play Style and the Design of Games for Classroom Learning," report:

When boys play games (or use computers), when there are fewer machines than people, girls step aside. It is difficult to determine whether it is the girls' 'stepping aside' front heir opportunity… or the boys 'crowding out' the girls… Nonetheless, this chemistry seems to exist between males and females pervasively when it comes to using gaming machines. 

In her essay "Becoming a Player" T.L. Taylor notes,

The population that does play games is frequently seen as an anomaly rather than a prime informant for understanding how play works. Researchers, and people in the gaming industry, often talk about trying to capture that demographic of non playing 'Vogue Readers' to the exclusion of looking at the group that actually seems to be succeeding in inhabiting game culture now.

From "Body, Space and Gendered Gaming Experiences: A Cultural Geography of Homes, Cyber Cafes and Dormitories" Holin Lin

The layout of some cyber cafes serve as gender barriers: girls must pass through a room of pool tables to access the back spaces that are reserved for computers. Most girls are not willing to subject themselves to the scrutiny of and comments made by the pool players, and therefore only enter when accompanied by male friends. 

Lin also points out: Women's fear and perceptions of risk are deeply routed in their bodies, and avoiding dangerous places is a common practice for managing the fear of male violence. In contrast, no threat of physical harm exists for players wearing either female or male avatar bodies.

In relation to dormitories Lin says: Gender culture plays a crucial role in shaping gaming dynamics in Taiwanese college dormitories. Being mindful of the needs of others is considered an important feminine virtue, whereas competitiveness and aggressiveness are considered male values. As members of a small minority, female gamers must be more sensitive to their roommates' reactions. Instead of inviting roommates to join them, they play alone and try to cause as little disturbance as possible. Many decide it is better to quit playing than to face further peer pressure.

In "Maps of Digital Desires", Nick Yee explores perceptions of female players in Massive Multiplayer Online (MMO) games, noting barriers in the virtual world:

Men are allowed relatively free access to online games, but a woman's presence in an online game is seen as legitimate only if it occurs via a relationship with a man. Other male players use a female player's relationship with a man as a means to legitimate her actual biological sex, to know whether a player claiming to be female is indeed a woman in real life... These stories imply that physical and social barriers to entry for woman become misinterpreted as a lack of desire to play video games. 

"What games Made by Girls can Tell Us" notes that girls express a dislike for games where female characters are sexualised or portrayed as victims and not heroes. 

We want to be Heroes. What we don't want is to be hyper sexualised, because that's not a comfortable feeling. We do not hyper sexualise the male characters in any way, shape or form… 

Girls cannot be pigeonholed into any one game. Girls are not a genre; they are a market that's just as broad and diverse as any market anywhere. There is no silver bullet. There is no one game you can make for all girls or all women, and to think so is silly and naive. 

OUGD503: Responsive- Penguin Brief

Project Rational

Penguin produce a yearly brief asking art and design students to produce a new cover for a selection of books. This year includes the first adult non-fiction category and the book to redesign is Freakonomics- a book written by an economist Steven Levitt about presenting data in an interesting way. 

The brief requires a design that's witty, original and interesting, one that reflects the tone of the book and the way it sees the world and potentially hint at the wide range of topics included within the book. The judges look for an imaginative and clear, clean concept presented in a professional way that is suitable for it's market and yet can stand out clearly from a crowded book shelf.

The cover must include all the cover copy as supplied and be designed to the specified design template (B format, 198mm high x 129mm wide, spine 20mm wide).

I started the brief by looking at previous covers for the books as well as getting a brief understanding for what the book is about.

 

The two previous covers aren't exactly the most eye catching of designs (and if they are it's for all the wrong reasons), they're both quite busy, and personally to me, the photo montage on the right seems to make very little sense linking to the title. It may, however, link to the content but I feel the link isn't obvious to someone who hasn't read the book.

So many people do judge a book by it's cover and based off of these it seems that a more eye grabbing simplified design is needed.

Summary of the book (taken from Book Rags)

'What trait is shared by both Ku Klux Klan members and real-estate agents? In what way do the working worlds of Chicago schoolteachers and Japanese sumo wrestlers intersect? These questions might seem puzzling at first glance, but the answers provided in Freakonomics: A Rogue Economist Explores the Hidden Side of Everything reveal that fundamental notions of economics can be used to interpret just about everything in modern society.'

Freakonomics essentially looks at how economics and gathered data can explain almost anything, including things that seem to have no correlation.

OUGD504: Studio Brief 3- Seminar: Canons of Page Construction 2

Canons of Page Construction: Grids and Grid Fields 

Developers of different grids and grid fields include Tschichold, Vignelli and Muller Brockmann.

Today we looked at Muller Brockmann's grid system- based on the Van De Graaf canon learnt in the previous session. The Muller Brockmann grid field is one that contains many rules and mathematical principles, however unlike the Divine Proportions there is room for flexibility, interpretation and choice. in columns and rows.

The basic rule for developing a two column, three row grid within a Van De Graaf canon:

1. Determine the type area

2. Divide into 2 or more columns and separate columns with an intervening gutter

3.Divide text columns into 2 or 3 more fields

4. Determine type size and leading 

5. Insert 'empty lines'. Field lines must be separated in order to accommodate for gaps between images. Separate field lines- must be same width as 1 line of type and leading

6. Each field should contain a number of lines of type while each empty line should be able to contain a single line of type. Images placed on the adjacent column will perfectly align with type

Muller Brockmann fields in a Van De Graaf canon.

Following this very strict way of forming grids we had to search for grids within existing documents, either newspaper, magazine or book. This was my grid deconstruction from a double page spread in an I newspaper.

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- Seminar: Canons of Page Construction

What is a canon? 

The systems or approaches of a particular practice. In relation to graphic design it refers to ways of organising type and image on the page.

The Golden Ratio

(The Divine Proportion)

1:1.618

A mathematical proportion creating pleasing harmonious construction, found in nature and design.

Creating the golden ratio:

100/1.618= 61.8cm

100=61.8cm + 38.2cm

Ratio of 61.8 to 38.2 is 1:1.1618

100 x 1.61= 161.8

Ratio of 100 to 161.8 is 1:1.618

Reproducing this:

14.5cm width

14.5/1.618= 9 cm

9/1.618= 5.5 cm

5.5/1.618= 3.4 cm

3.4/1.618= 2.1 cm

2.1/1.618= 1.31 cm

1.31/1.168= 0.8 cm

Using the same numbers to produce columns and a grid(and getting it horribly wrong as I do so)

Golden Ratio in graphic design

The National Geographic logo used a golden ration rectangle, the BP logo's circles are created using the golden ratio, Habitat's webpage uses the golden ratio as a layout device.

Van De Graaf Canon

 See in early books such as ones published by Gutenberg this canon states that text and type areas are determined by the page.

Adapted versions include Raol Rosarivo's canon where the page is divided into 9ths and Tschciold's who created the harmonious ratio of page size as 2:3.

Reproducing the Canon

Making sure the page was in a 2:3 ratio (10x15cm) and using the canon to draw the text space.

Van De Graff Canon in graphic design

Work Compilation

OUGD504: Studio Brief 3- Webpage Workshop

UI- User Interface 

UX- User Experience, target audience, make the design relevant and usable for the appropriate audience 

Limitations in web design- 

Designing for the lowest common denominator, the worst quality screen

Web safe colours- 216 colours 

(RGB mode capable of reproducing 16 million different colours instead of HEX's 216) 

Wider range capable of production with CSS using percentages similar to photoshop and illustrator.

Web safe fonts- for consistently in display it must be a standard font. (fallback options- if a font family is chosen and a browser or system does not support the first font it tries the next one listed)- if the font is just one word it does not require speech mark e.g. Georgia, if it contains more than one word it requires speech marks e.g. "Palatino Linotype"

CSS font face- font face allows you to install fonts to a website meaning the font choice remains consistent regardless of the browser or system. (It can breach copyright and licensing of certain fonts- a free licence font must be used for font-face kits including font squirrel)

Size, dimension, pixel resolution- typical sizes, 640x480, 800x600, 1024x768, 1920x1080, 2880x1800 (220ppi). Current common denominator- 1024x768.

File formats- PNG, GIF, PDF, JPEG- average quality should be 72ppi, higher resolutions=more bandwidth. Lossy format- lossless, save the detail of previous image, compresses the file.

(Produce a scamp- quick sketch of a website/design- consider limitations in design and skills, consider target audience and what is needed from design. Measurements must be key and precise, fonts chosen and colours sorted- this will make the production process much easier)

Dreamweaver- WYSIWYG, what you see is what you get

Building the site:

New Document- HTML

Go to: Site

New site (site setup window)

Select local folder and name site

Split into three sections, design, code and split (shows both code and design)

Create new HTML and save

Save home page as: INDEX

Code Meaning

Line 1: Document type

Line 2: HTML webpage language- from this point on everything ail be in HTML (line 10 HTML stops, open and a close)

Line 3: Open of head- everything that affects the functionality of the webpage- but isn't visible in design of webpage. 

Line 4: Blank

Line 5: Title of webpage, as seen on the tab- used for SEO (search engine optimisation)

Line 6: Close of head

Line 7: Blank
Line 8: Open body- anything visible on a webpage
Line 9: Close body
Line 10: Close HTML

Changing title name- asterix means not been saved.
Little world icon, preview webpage live.

Typing between body creates visible content.

Using CSS to create a style sheet- any style choices can be applied across all pages.

Using /* */ creates notes that can be left for future reference, will not be seen on final website only in code.

Choosing font for the style sheet. 

Import the style sheet into HTML page

Site will now be in chosen style.

Creating layout- plan and MEASURE


create a container for the layout- create a DIV ID