Archives

OUGD501 - Theory Into Practice: Current Web Trends

I started looking at all of the current web trends that I could include in my project.

I focussed on

  • Responsive Design (RWD)
  • Flat Design
  • Typography based
 in my essay, but considered using:
  • Video
  • Static Headers
  • Hero Page
  • Smaller Content
  • Parallax
  • Bigger focus on mobile design
  • Long scrolling
These are all trends of 2013/14 and I want my website to look at a few more of these.

OUGD501 - Theory Into Practice: Visual Function

These are a couple of websites that are similar in how I want mine to work.

Bellroy
This is for Bellroy wallets, and is a long scrolling website which is what I want to produce. It teaches you how to slim your wallet, with diagrams, photographs, interactive elements and a shop at the end. It is really clean, easy to understand and involves the user which I think is important because it keeps their attention.


It gives you the option to scroll or shop.


It goes through four steps, with stars to represent those.


Shows examples of bulging wallets via photographs.


It then explains why using a diagram.


It gives you two ways to switch through three tips - arrows and buttons.


It then adds an even more interactive element by being able to slide and change the images.


It then gives an flow chart style question.


Which leads to the shop at the end. Now you've figured out how to slim your wallet, you should be able to easily select the wallet that is suited to you.


I want my website to be like this in the sense it is one long page, and each section has a different element to it - whether through buttons, sliders, quotes, images and diagrams.


Teehan + Lax
I thought of an idea of visually showing how website functions work on a web page, for example being able to resize an image of a desktop website to see how it works in tablet and phone version. I then found this website which does a similar thing, and I think it works really well.
To show how their project Readability works, they have included interactive features for the user to visually see what they have done, rather than just static images.

Here you can just move your mouse to see the original site and the redesigned one, side by side. This gives the user a clear vision as to what has changed. This is better than having to scroll to see two different images because users would have forgotten what they first saw.





This interactive feature lets you click to see how the site looks with different text sizes and with a light vs dark background.
I think this is an amazing interactive feature, because it shows how much work has gone into the project, how to interact with it and engages the user, keeping them on the page and wanting to learn more.
I want to implement this into my work because the audience will be people interested in usability and accessibility in the web, who will mainly be developers and designers. These people want to see how interactive code can be and will already know a lot of advanced features that code can produce. As it is about current web trends, it needs to be contemporary in both design and development to support the content.





Pizza Game Changer
This is a website which allows you to vote for pizza innovations, and shows the results in a long scrolling website. This is similar to how I want my function to work, because not only does it provide each innovation in a full screen section, it has a long scroll and you can see the results at the end.





OUGD501 - Theory Into Practice: Concept

After thinking of two initial ideas, I thought more about it and came up with a full concept.

I want to create a one page, long scrolling website which visually shows web trends and lets users vote if they think it has worked or not to see how effective they are.
To do this I was thinking of having a full size page for each trend, an introduction about it and then an example where the user can choose which they prefer. At the end, the results will be shown so the user can see how effective they have been.
As there is so many conflicting views on the subject, this would be a good way to visually see what people prefer.

This is my idea for the layout of it:


I then annotated each page with my initial ideas:

(annotations)

Home Page
One page, long scroll
Enlarge text option
High contrast colour

Responsive
Resizable desktop version of website to show tablet and phone version
Quote to show designers thoughts about it

Flat vs Skeuomorphic
A flat and skeuomorphic version of a logo
Click which you prefer - vote
Nav style buttons show how how many there is to do 

Type Led
Type led and non type led version
Click which you prefer

Results
Would update
Shows results of what people have said


Audience
The audience will be people interested in usability and accessibility in the web, mainly developers and UI/UX designers. They want to keep up to date with the trends, as they change yearly. This topic is also a big debate for designers and developers, so they will want to see another person's view on the topic.

OUGD501 - Theory Into Practice: Initial Ideas

After getting my essay results I was so happy getting a 1st because I thought I had failed, so I wanted to make the practical side equally as good.

I started thinking about how could I show how the current web trends have (or haven't) improved accessibility and usability for people in a physical format.
The obvious format to me is to do a web design - this is why I chose to do the essay topic afterall.



The two ideas I'm leaning towards are both in the format of websites.

Idea 1
Redesign a website that has bad usability and accessibility with the current web trends to see if it improves this.

Idea 2
Display information, visuals, quotes and statistics on a website demonstrating flat vs skeuomorphic, responsive design and type-led, to see how this improves usability and accessibility.

OUGD503 - Responsive: BEAR - Further Research/Bodycopy

When designing the packs we decided we needed more specific research, particularly on the Rivers box.
I also started writing the bodycopy








I started writing down more facts:

River Facts

Bear

8 species of bears

During the Winter, bears go into a deep sleep called Hibernation. They wake up again in Spring. They don't need to eat or drink. They do this because there is no food in Winter

Incredible sense of smell

Brown bears can give birth during hibernation

Bears have two layers of fur - a long layer to keep water away from the short fur and skin, and a short layer to keep the bear warm

Black bears, grizzly bears

Lake

Caspien lake is largest in the world
Great lakes of America, michigan, superior 

Finland has 187,000 lakes Land of the Thousand Lakes

Salmon

Salmon can be found in Atlantic and Pacific oceans as well as inland lakes like the Great Lakes

Salmon migrate to the Pacific ocean - how far do they travel? 
Some go as far as Japan before coming back to the river they were both.

Salmon are born in rivers, and then swim into the sea where they live most of their adult life. They then come back to the rivers they were born which is called the salmon run and they jump.

They can feel what season it is, and swim back to where they were born even after travelling for years and thousands of miles into the sea.

They can find the right stream to spawn (lay eggs) just by the smell of it

During the salmon run, they swim back to the river they were born, jumping over waterfalls. The highest recorded jump is 12ft!

Camping

Deer
They are the largest land mammal in England.
They can jump nearly 10ft - that's as many as ten of these cereal boxes!

Rabbit
They thump loudly on the ground if they get scared to let other rabbits know!
When they are happy they 'binky' - where they jump and hop around!
Some females can have up to 8 litters in one year!
Rabbits teeth never stop growing throughout its life!

Treetops

Tree Stump
You can tell how old a tree is by counting its rings! 

You can count how old a tree is, by how many rings it has!
1 ring = 1 year !

Squirrel
Grey Squirrels are quite the gardeners, planting thousands of trees a year by forgetting where they buried 74% of their acorns!

Owl
The Great Horned Owl gets its name from the tufts of feathers on their head - they look like horns!

Woodpecker
Despite pecking up to 12,000 times a day, woodpeckers don't get headaches!

Red Crossbill
The female Red Crossbill is actually yellow!

Tree 1
Big Tree Facts : The tallest tree in the world today is a Giant Sequoia named General Sherman - he's 275ft tall!
Tree 2
Big Tree Facts: A famous Oak Tree called Major Oak served as a shelter for Robin Hood and his merry men in Sherwood Forest. It has a waistline of 33ft!

Instructions

Instructions
Build your own table-top treetop!

Using a pair of scissors to… 

Fold/Cut

Always make sure you have adult supervision!

Mountains

Moose
Males are immediately recognizable by their huge antlers, which can spread 6 feet (1.8 meters) from end to end.

Eagle
The American Bald Eagle isn't actually bald.

Marmots
The marmot hibernates for up to nine months a year, and loses 20 percent of it's body fat in this time.

OUGD503 - Responsive: BEAR Lakes Research

We decided to get rid of 'woodland' as a theme for one of the cereal boxes as we feared it wouldn't be very exciting with just animals and shrubbery. So, we decided to go with lakes, as we can do a lot with that - canoes, lake, animals etc.







OUGD505 - Design Production 2: Cruises - Destinations

As I am including information on destinations and excursions in my publication, I looked for existing excursions and information.

Mediterranean


Santorini


Pisa


Corsica


Monte Carlo


Caribbean

Grenada


Jamaica


Puerto Rico


Antigua






Jamaica



Barbados




Grenada


Puerto Rico




Grenada


Jamaica


Scandinavia

Denmark


Norway


Sweden


Russia Activities


Tivoli Gardens











 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.