PROJECT 5 Professional Practice

Research and write about one of the options below: 
CREATIVE AGENCIES

MOTHER

When you land on the Mother creative agency website, you see no branding. I felt lost like I’d landed on the wrong website. The navigation at the bottom is clumsy and disorganised.

MOTHER
MOTHER 2

 

STRAWBERRY SOUP

There is no appeal to me for this creative agency at all. Nothing visually grabs me or gets me excited to further look into. Images aren’t equal size and padding around text boxes is too tight to be clear and readable.

STRAWBERRY-SOUP
STRAWBERRY-SOUP-2

 

SOUL

I love the simplicity of the branding on this creative agency. Good navigation to get stuck into.

SOUL

 

BRND WGN
Apart from a lenthy name logo I can’t quite get my head around for a creative agency, at least you are first hit with big images and some moving imagery. So it grabbed me straight off. Bold clean fonts and space used through out their pages made it easy to navigate the content. And I really liked the simple color palette with colors that complemented each other – Important. A cleanly designed site I enjoyed looking around in.

BRND WGN 2

BRND WGN 3

BRND WGN 4

 

BRAVE

Ticks all the boxes for me this creative agency. Great branding, good use of fonts, lovely color palette, easy to navigate around, grabs your attention, feels confident with well thought out wire framing of the site. It’s simple on the eye and gives you all the right info you need first off to then want to look deeper into the agency. Over all I feel confident this agency could deliver the finish product I would be after.

BRAVE

BRAVE 2

BRAVE 3

BRAVE 4

 



 

FINAL PROJECT

For our final project we had to create an interactive showcase to host our individual profiles with links to our portfolio websites. Also we had to create a professional proposal as if we were pitching to a client for the showcase. With a fun movie theme we chose to be called Star Wars The Last Jedi Web Warriors. Little did we know that 6 weeks later the new star wars film was called Star Wars The Last Jedi, so we were on the right track – freaky! We created our showcase using Adobe Muse which could handle all the interactions of the Jedi’s Light sabers animations, movie and graphics we needed to throw at this to make it as close to the film as possible. It had to be convincing!

 

PROPOSAL

 

SHOWCASE

Adding my face to an existing Jedi image and using Star Wars like themes I was able to create myself as a Jedi and my landing page all about me for the show case.

JEDILee-homepage-2

 

PORTFOLIO WEBSITE

oneafternoon.co.uk
Taking little design ideas along the way, which you will recognise through out this blog, I’ve created my a name for myself as well as a website showing all my work. Use the link above to see my sight and also see it planned out in wire frame view below.

 

ONEAFTERNOON WIREFRAME

Advertisements

PROJECT 4 Social Web & Ecommerce

ANIMATED GIFF

Creating a web banner as an animated GIF

This slideshow requires JavaScript.

ANIMATION



imac

COMMUNITY WEBSITE: GRAFFITIART

I decided to create a community website for people interested in Graffiti as an art form, so I called it, wait for it… GRAFFITIART. This site I created from scratch, no templates used just Themeify builder. On my site you can explore places around the world where there is amazing art work. You can view a gallery which would be updated daily. Read about the latest artists and what they have been up too. Watch a time lapse video of a garage being sprayed. About page and Forum created in tabs to further the sites popularity. It also has a link to my GRAFFITIART shopping page (website design below) where you can by T-shirts, trainers, spray paint and more. Only on the live website you can see a nifty web banner created in photoshop as a GIF (seen above) as an example of advertising you can create for the web. SEO is in place as standard.
http://oneafternooncreative.co.uk/project4/

 

GRAFFITIART



imac

SHOPPING WEBSITE: GRAFFITIART

For my shopping website I tied it into what I had already created with my community site. On the GRAFFITIART  shopping website you can by Trainers, T-shirts, spray paint and more related to Graffiti Art. Here the two website work in conjunction with one another driving traffic backwards and forwards to one another. Using the same logo I designed for familiarity across both sites, I created individual product pages and brought them all together in a catalog. I added brands logos, a location map of the store and some advertising driving to my GRAFFITIART community website, also a subscribers option. Social media links as standard in the footer. Colors and fonts are the same across both sites to create uniformity in style and design. SEO is in place as standard.

 

SHOPIFY-WIREFRAME

 

PRODUCT-PAGE

RESEARCH

I looked at broad range of community websites and shopping sites of which some included, Brighton council, Facebook, Macrumours, Apple store, Amazon, Net-A-Porter, All saints, Topman, Size to gather understanding of what content and used in what way when creating both my sites. Sketches of wireframes are also useful when starting a site from scratch so you can position content to give the right look and feel for your site.

PROJECT 3 Website Production

 

LOOKING AT CODE
readcereal.com

Head Section Of Code
What version of HTML is it (look in Doctype – is HTML5)
screen-shot-2016-11-30-at-4-53-35-pm

Title

screen-shot-2016-11-30-at-4-56-14-pm


2 other Meta tag types eg. Keywords, Description Generator etc)
screen-shot-2016-11-30-at-5-07-13-pm

screen-shot-2016-11-30-at-5-10-51-pm


Link to javascript file
Screen Shot 2016-11-30 at 5.12.48 PM.jpg

Link to css file
screen-shot-2016-11-30-at-5-13-47-pm

Indication to how the site was made
screen-shot-2016-11-30-at-5-26-57-pm


Body section of code
Is the site using tables or divs?

Screen Shot 2016-11-30 at 5.42.39 PM.jpg


Is the site using h1 and h2 heading tags?

Screen Shot 2016-11-30 at 5.52.04 PM.jpg


Is the site using alt tags for images?

Screen Shot 2016-11-30 at 6.24.32 PM.jpg


Is the site using descriptive folder/file names?

Screen Shot 2016-11-30 at 6.00.35 PM.jpg


HTML5 hand coded website

screen-shot-2016-11-30-at-6-52-17-pm

screen-shot-2016-11-30-at-6-52-25-pm



BUILDING MY WEBSITE

Creating a wire frame for my site to help with design layout and SEO
wire-frame

Creating Project Folders

Title, description, meta tags and image descriptions

title-description-and-meta-words-tag

description-in-images


CSS creating a gallery and pop up

Coding a contact form and adding a google map

Adding fonts to your website using Squirrel

font-change


Writing CSS to style up fonts and layout

writing-css


Designing a Favicon file
http://tools.dynamicdrive.com/favicon/

oa

favicon-designs

oa

 



WWW.ONEAFTERNOON.CO.UK

This website I’ve created is a full service design agency where creatives and companies can seek Art Directors and Photographers to get a whole range of briefs answered. The colors of the site emulate colors that spring to mind of an afternoon say walking in the countryside. This with the minimal design and beautiful tranquil imagery really set the standard and mood of the type of beautiful product you will finish up with. It’s telling a personality along with the wording in the navigation that we are professional but also real creative friendly people to work along side.
The idea behind the name is I’ve always said in conversations “oh one afternoon lets knock our heads together and see what we can come up with” It rolls of the tongue in conversations, its familiar and sounds productive. All those things comfort it’s audience when people view the website to look to spend there creative budgets with us.

SO HERE IT IS…

index-page

 ENLARGE IMAGE FEATURE IN TEASER GALLERY AND CONTACT AND WHERE TO FIND INTERACTIVE GOOGLE MAP

 ‘CLICK’ THROUGH GALLERY PAGE FROM ‘SEE OUR WORK’ IN THE NAVIGATION

gallery-page

ENLARGE IMAGE FEATURE IN GALLERY, PLUS ALL NAVIGATION LINKS BACK TO RELEVANT PART OF INDEX PAGE. LOGO IS RESPONSIVE TO GOING BACK TO THE HOME PAGE

COLOURS CAHNGE IN NAVI BAR

gallery-enlarge-feature

 

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

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.