PROJECT 2 Interface Design

moodboard

CREATING BRUSHES
brushes

SKATEBOARD SUSSEX WEBSITE REDESIGN FROM SCRATCH (NO PUN INTENDED)

skateboard-sussex


BAD WEBSITES

This slideshow requires JavaScript.


FLAT GRAPHICS I DESIGNED IN ILLUSTRATOR

vegetables

fruitillustration


IMAGE OPTIMISATION

image-optimisation

Too low res

image-optimisation-2

The image now looks identical after optimising 
image-optimisation-3
Saved as a PNG 24 to retain high quality transparency
image-optimisation-4

DREAMWEAVER TEMPLATE RE-DESIGNED
Name of website added, recipes option in navigation put in, color of band changed 

the-cookery

Parallax Hero image uploaded and background image fitted so it creates a seamless background image through out the website.

the-cookery2

Teaser images added and headers changed

the-cookery-3

Subscribers type added in and color of band changed to match color palette

the-cookery-4



BAD WEBSITE REDESIGN IN
FLAT & TEXTURED: THE COOKERY

A GOOD WEBSITE
This is a good website because everything is very easy on the eye and clear to navigate around. A strong hero image with the logo and text to the right size, limited color palette and images that work to the colors all amplify the well designed and layed out website. Teaser images are gorgeous and in rows of three, which is renowned on websites for a solid number of functionality. The website loads quickly and functions as it should when clicking through into pages. This is a great example of simplicity being key.
cereal-magazine
A BAD WEBSITE
Everything about this site is bad. No hero image, to many navigation options, weak logo, too much white space, poor quality images with inconsistencies of image style and shape, sloppy click through pages which leads into badly layed out pages leaving you scanning everywhere to make sense of anything. For a food website you aren’t left with much confidence when shopping around or purchasing products. I was left feeling annoyed, not what the user experience should be left with.

the-cookery


COMPETITION OUT THERE IN THE MARKET

TYPEFACE AND LOGOS RESEARCH

DOODLES AND SKETCH’S FOR INTERFACE IDEAS…

img_0197

img_0198

img_0200

img_0201

img_0202

img_0203


REDESIGNED IN A TEXTURED STYLE OF WEBSITE

HOME PAGE

textured-website

SECOND PAGE

textured-website2

textured-iphone

textured-pg-2-iphone


REDESIGNED IN A FLAT GRAPHIC STYLE OF WEBSITE

HOME PAGE

flat-website

SECOND PAGE

flat-website2

flat-iphone

flat-pg-2-iphone

Advertisements

PROJECT 1 Water The Source Of Life

Image Def3 c t z

moire patterns.jpg

Moire Patterns

These occur when two digital medias clash. Pixels can’t take focused pictures of pixels. i.e. a digital camera photographing a screen as above.
This can also happen in print when the registration or offset can miss align, causing a moire type effect, like the rubber duck below.Non-registration image-2.jpg


Screen grab.png

Screen Grabs

These are extremely useful on a mac using cmd+shift+4. You will see the cursor icon change to a crop tool. You can now select just the right part of whats on your screen that you need to reference. If you want the whole screen, which is useful for presentations or showing directions with software in a manual, you can use cmd+shift+3, seen above. Screen grabs will only capture the detail of the image displayed. So if its a low res image or pixelated, thats what your computer will capture.


Screen Shot 2016-10-05 at 16.02.56.png

Pixelation

All digital images are pixel based. The amount of pixels in an image can vary from 72 dpi commonly used in web based design to 300 dpi used for print media. The higher the pixel count the sharper or better quality the image is.
So pixelation occurs when an image is being used to big for the space or just is so low res the pixel count is way too low. Then you start to see pixelation like above. The picture actually starts to show how the image is made up in single pixels.


1280px-Hitman_barcode.jpg

Scanning

DPI comes very much into play here when scanning an image or photograph. When using the scanner you control the Dots Per Inch. So you could scan an image too low res if you needed it larger, then it would become pixelated. Scanning photographs from books or magazine due to the nature of the way they are printed, in CMYK plates, you can actually see the different colored dots making up the image, like above on the right. When scanning you can help stop this with the De-screening option.


photo-shoot-2.jpg

Digital Camera

 The best way of capturing an image!
RAW files, JPEGs are all at the control of you to what size you need the media to be for youthen to convert into the appropriate file format for your work, such as a TIFF, PNG. TIFFs are great because they don’t compress and slowly destroy an image like a JPEG does. But they create large files, ok for print, but not great for the web as a JPEG will compress the image to your liking helping keep down the digital memory footprint. PNGs are great for using when you need to preserve a transparency.


Layer Effects

Using layers in Photoshop and adding an effect to it, you can create textures and colors that are quite abstract to the eye.



WATER THE SOURCE OF LIFE

Below is my brainstorming and research on the subject, typography and visual content. Websites and screen grabs help to show you my path.

untitled-1


Websites and Documentaries
Web
https://en.wikipedia.org/wiki/Global_warming
http://www.wwf.org.uk/what_we_do/tackling_climate_change/
http://news.nationalgeographic.com/2016/10/climate-change-national-parksearly-spring/
Documentaries
Chasing Ice – Jeff Orlowski
https://chasingice.com

Typography
http://www.myfonts.com
http://www.dafont.com

Images

imac

WEB BANNERS

banner-1

banner-2

The main focus of my designs for these banners was to get you to stop and let your mind wonder. Switching over the animals natural habitats comes in to play here and setting them in new habitats after the world has suffered from the constant changing climate. Be it the glaciers have melted so the once dry desert like terrain for Elephants is now constantly under water. With the huge increase of water now melted changing the weather cycles dramatically, more moisture will be deposited into the environment causing endless rainfall. Or on the other side of the banner the water has all dried up because of increasing hotter summers due to the sun raising the planets temperature year on year. Anyway you interpret it there has been a huge shift in climate and subtly the image hints at the devastating habitat out comes. The banner directly above homes in on the harsh weather and  no mans land the elephant now has to roam in as his habitat.

WEB ADVERTISEMENTS

add-1-water

sneak peak

add-2-drought

sneak peak

 I wanted these teaser advertisements to be mainly type focused because my main banners have a strong visual mind provoking direction. In these adds I’ve taken the two extremes of water environments and incorporated the type to have a direct visual impact keeping it very simple. Layering type and submerging it into the environmental using cut outs, layering, layered effects, cloning and adding detailed photographic effects at the end to further convince the audience “the type is really there” have enabled me to produce a very photo-realistic finish.

WALLPAPERS

This slideshow requires JavaScript.