OUGD501 - Theory Into Practice: Testing

As the user can vote for their opinion on each debate, I wanted the results to be real. To do so, I created a form with the information on I could print out and give to people to count the results. I just used the relevant content from the page and added boxes where people can write their vote.

Flat Design

RWD

Type Test

I then thought these are actually quite long, because I want to print them but I want to print them as small as possible to save cost.

So I took out all the information that I could without missing the point.

OUGD501 - Theory Into Practice: Site Map

I wanted to produce a site map so you know what links links where.

I began with the banner, and created it in the same style as the site.

I added the primary navigation onto it.

Then I thought about the links that are on the pages, and whether or not I should include them. I thought I may as well - if it is wrong I can take it off.

I made the secondary links smaller, as they are mini links on the page that I'm referring to.

I then realised I need to take the menu icon of it as it's not actually part of the site.

OUGD501 - Theory Into Practice: CD Cover

As I am submitting my work via a CD, I decided to design the cover for it.

I measured the slot of the CD I had, which is 12.5mm and 12.5mm.

I made the design the same that is on the hero banner of the home page as this fits in with the aesthetic.

I decided there was too many red icons next to each other on this one.

I adjusted it a little, and this is the final design.

I put to on an artboard with a 3mm bleed around it ready for print. I did two just in case one messed up when I cut it.

I also mocked it up onto a vinyl cover, because why not?

OUGD501 - COP2: Disseration Lecture

A lecture on dissertation

• Focus
• Relevance

Research Methods

• Visual practice, experiement, interest and enquiry (research and critical diaries)
• Questionnaires (qualitative/quantitative)
• Interviews
• Do A Case Study

Literature Search 1

• Books
• Journals
• Websites/Blogs/Online Forums
• Videos/DVDS
• CDs/Tape Cassettes/Vinyl Recordings
• TV/Radio

Sconul card to go into Uni of Leeds.

OUGD501 - Theory Into Practice: Final Pages

Here are the final designs.

Home Page:

Responsive Web Design:

Here is the flat design page:

Here is the typography led design page:

OUGD501 - Theory Into Practice: Designing the Flat Design Page

This is the development for the Flat Design page.

I changed the hero banner to the colours of the trend colour scheme and changed the icons. I also added the intro for the flat design.

I then added the icon for flat design, with a button underneath it saying skeuomorphism - this would change the icon to show what it looks like skeuomorphic.

Here is what the quote section looks like.

I then started working on the illustrations for how it improves accessibility and usability.

Here is the page for this section.

The topic up for debate is forms, and how flat  design may not be the best solution.

I thought of three areas to do with forms that I could compare flat with skeuomorphism. 

I found two examples for the field section that use both flat and skeuo.

I then mentioned in the description which uses flat and skeuo.

Here shows primary and secondary elements.

Here the examples discuss button shape.

Users can then vote which style they think is best for when using forms.

The debate section is still the same.

Here is the end of the page, where the user has a choice of what to do next.

Here is the final page:

OUGD501 - Theory Into Practice: Mobile Scamps

I wanted to do a mobile version to show a responsive site - I think this is necessary because it is afterall a website on current web trends, with a big focus on responsive web design.

Home Page

On the desktop version, the three trend icons are placed next to each other, but I decided that for the mobile version they would be turned into a carousel slider with one icon being shown, and arrows to click through the rest. This takes up less space, and isn't necessary to have them stacked because the links are available in the navigation anyway. 

RWD (Flat/Type)

Here, rather than the navigation examples being stacked on top of each other, the images would turn into a slider to take up less space, with the information still being written underneath.

The links under What's Next would be stacked on top of each other rather than placed next to each other.