More Mock-ups For Wish Upon A Star

I think as a whole this mock-up works as the banner with the logo and navigation stands out due to the contrast between the blue and white. It also replicates their logos colours therefore replicating the branding. I have experimented with different backgrounds and illustrations of people to give the charity more options to show what they are about. I have chosen to experiment with a wand as a donation button because it will allow people to connect what wish upon a star does. It is also a symbol that is associated with the charity through their many events.

This is another version but I don't like it because I think the background is too harsh against the illustrations. i was thinking about doing a collage of all the different activities that the children get to do through Wish upon a star.
In both of the mock-ups I have used illustrations that are purely hand drawn to see how they would look with the rest of the design. if the charity likes any of the illustration in particular I intend to emphasis them with digital illustration techniques.

Also I have used a different banner that will use bigger photos that the audience can flick through in a slide show manner or that will change with a set time. The is also a blue text box that will over lap the photos to tell the audience a bit about what the events are etc.

Design process in the real world

Lately I have been thinking a lot about how I am going to transfer my skills I have learnt from my degree into real world design situations and have come across this diagram that I am going to implement in my up coming client project.

I found it on http://www.rustymonkey.com/web-design-nottingham/. I really like rustymonkey's approach to website design to the client through using their own unique design traits to tell the clients story. They produce impressive pieces of artwork through the creation of their website yet they are also informative.

Made Like Gaia...

It's time to get back to work! After moving about a lot over the summer and finally getting a decent Internet connection (don't get an 02 dongle) I have got updates on my portfolio website.

My concept is made like Gaia. Gaia is the original spelling of my name and is the earth Mother. Although through my designs I'm not recreating something as big as nature itself I put a lot of love and care into my passion of website design and illustration. I want my portfolio to be a brand of what I see myself as- a designer with many unique skills and qualities. I am not just a website designer. I code my own site in many languages, I am the graphic designer, fine artist, illustrator etc. I want my portfolio to portray a sense of growth as both a brand and as a designer so below are a few starting points...

I had the idea that my logo and be part of a tree to represent the growth of my brand with my tools 'growing' out of it

Initial ideas for a logo. Simple text, maybe experiment with patterns behind the text?

Portfolio Update

More Wireframes...

Fixed Elements In Website Design: The Good And The Bad

A vital part of a creative website is the positioning, which doesn't necessarily mean just a simple layout. It means taking into consideration where the most accessible position is for the navigation bar, the content, where would the area go dedicated to networking go (twitter, facebook etc).

Fixed elements have some advantages in website design that if used in the right way can draw the users attention to the content in the right way. Fixed elements are elements that are fixed to their position in relation to the screen rather than fixed to the website page.

http://www.webleeddesign.com/

This website has been my favourite for it's use of background graphics that moves with the screen. I like the way the simple, colourful graphic moves down the centre of the screen whilst you scroll as it creates an animation through objects that it moves through therefore drawing your eye down the page to follow the content. The object also changes it's opacity at the same time so that you can see the content clearly. Also I like the way that the animation works with the the word 'absorb' as the graphic sinks into the typography.

http://cdharrison.com/

Although I like the style of the fixed drawing I find it quite annoying that I have to scroll down to see all of the options as the fixed element is in the way.
http://bulletpr.co.uk/

I really like the movement in the website created by the blue and pink lines that move when you click on one of the navigation options. I like that the navigation is a fixed element because it is easily accessible and gives the user a reference point that they can always go back to to navigate their way around the site. Additionally, you can see the pages moving which matches the 'old school' style of the illustration that could have come out of a magazine from that era.

Looking at positioning more closely has made me think about bringing in different elements I can use to my future websites, such as illustrations that follow the screen but don't affect the visibility/accessibility of other features.

Photography Characters

There's a basic story board of the tripod chasing the flash and camera into the text. I want it to add a friendly feel to the otherwise quite structured website. I am keeping the characters simple, using the colour in the website so they don't look out of place. I'm probably going to add some characteristic facial features to them.

Below are three characters I have designed to animate my flash banner.

All About The Naviagtion

Having chosen a sort list final design with my client. I still felt that some alterations needed to be done, especially with the navigation to make the website more interactive. So I had the idea of using a miniature camera that pops out for the words that aren't visible to make the audience want to explore the site. Also it will fit it with the idea I have for my banner (animated camera and tripod). All of the mock ups have helped me come to the final stages of the mock-ups. The two favourites are version 1 and 5 but we have decided to go with 5 because it won't be cluttered and leaves room to experiment with flash animation in the banner.

Original badge that sparked off the idea

A drawing to simplify the lines

Bright, bold easily attracts the audience

Version 1:

• Red makes the lettering stand out. Also in the Indian culture it symbolises luck and prosperity.
• Simple navigation arrows that will move with the words to match the navigation.
• Red border to match the rest of the website.

Version 2:

• Orange lettering for a softer look.
• Simple navigation where the sections of the gallery are laid out straight away, changing colour with the page you are on.

Version 3:

• To make the design more unique I have designed miniature cameras to go at the end of the words instead of arrows. People will automatically realise it's more photos and that they are in the gallery as soon as they enter the website.
• Small icons. Are they big enough?

Version 4:

• Bigger more intricate camera. does it clutter the website and take away focus form the title and photos?

Version 5:

• Red attracts the eye. The clients prefers the red as it is bolder than the orange.
• We both like the cameras as naviagtion but I am planning to to a flash banner with a camera and tripod so it will probably make it look to cluttered and take away focus from teh photos and title.

Previous Mock-ups

Some of my wireframes.

I feel the following mockups are too plan but they have helped the client and I visualise the site.

Too boxed in. No focus too the page.
Like the photos layout, dont like teh navigation.
Here are a few mocks that I create with Saira (the client) to get a feel for layout. She didn't like the wire frame part of the process as much as she couldn't visualise the outcome.

Photography Website Mock-ups

I thought I'd compare and black against a white version. To see what background makes the photography stand out. At the moment I like the black background more because it make the photo 'pop' more. I am going to have a word with the client to see where she wants to take it.

No matter what colour scheme I choose I need to change the font and overall logo design. I think It is going to be a very important part of the website to inform people about her photography and who she is. Also I could play on the title and do a little animation so it doesn't take away any emphasis from the banner . Maybe of a camera and tripod chasing each other?

I see her colours being black, white and red for a sophisicated, passionate representation of her.

This YouTube video briefly describes some of the disciplines I will take into consideration whilst designing/creating my photography website. Typography will be a good tool to use at it will enable me to keep the website simple alongside the bold photos.

Daniel Brown:Fine Art And Digital Design

Daniel Brown: On Growth And Form

I first found out about Brown's work through Jools mentioning his exhibition in the Decode Digital Design.

Daniel Brown is initially a fine artist who uses the Internet as a platform for his inspired work about form and nature. The idea of his work is to use computer-game like technology but for more artistic and aesthetic purposes. Whereas games portray superficial fantasies his work aims to portray emotion, beauty and aesthetics. Another one of Browns goals is to take website design away from the 'brochure like feel' and go beyond the limitations of the technology.

What I think makes his work unique is the fact he takes his inspiration from non web based items such as: art, fashion, film, photography and nature therefore I think that this allows his work to expand. It is injected with life to make the website a more enjoyable, free flowing experience.

As well as using all of those inspirations he works on the basis that code is a forever changing tool that can be used to produce art that is constantly changing. In my opinion I think this outlook in career has allowed him to broaden his horizons and not be 'pigeon holed' as he looks to fashion and music based websites of a more commercial appeal to bring in the money. See http://www.showstudio.com/ This leaves us with the question is he an artist, interactive/website designer, engineer?

Also how does this relate to me? What do I want to become in the design world since fine art is such a passion? How am I going to be able to build a career and life out of a mixture of fine art, illustration and website design/coding?

.

V&A Decode generative identity from postspectacular on Vimeo.

Ye Old Trip Website Reflection

I've have finished and completely finish the coding for my latest website 'Ye Old Trip.' I have found the coding a lot easier this time around. Although I am really happy that I am more confident with CSS I want to go back to the design stage.

I think I should start designing for larger browsers and on feedback from Brett Russell of LogiWeb I need to think about layout, bold colour schemes in RGB. Also he recommends a cleaner layout, which know looking back at I agree with. I want the website to suggest a sense of history, warmth and pride of Nottingham's oldest pub. Maybe I could introduce warmer reds?

Additionally I need to make the photos and text work together to tell a story of the pub therefore immediately grabbing the audiences attention.

Wire Frames for Ye Old Trip

I have created 6 wireframes for Ye old Trip. I have kept all of them simple so that I can let the colour and texture of the images speak for what the website is about. Also I have made a conscious effort to keep the navigation simple as the naviagation form my last website overcomplicated the website coding. This time I want to clarify my coding skills without worrying about the navigation as much so in the future I have got a solid base to work from.

• Bold navigation that the audience can't miss as it's placed in one of teh most popular places. Simple boxed structure that will be easy to work with when it comes to div ids.
• Second wireframe big navigation using the 'F' shape. Structure will work well with pics but not much space for text.

• Same as the last wireframe but room for text. There is a small amount of space for the text so the audience don't get bogged down with information.

• Bigger title and logo to express what the website is about and footer for extra details.

• I don't like the first wireframe on this page because the title and logo are out of sink with each other. However the background picture could work well being exposed on the left hand side. Maybe a curtain to 'introduce' the pub in a 'theatre style'.
• I really like the second one of this page because I could work with transparency effects and background imagery whilst keeping the image central.

Complications

Today while I was trying to validate my website I came across numerous complications. My website function and looks like I want it to but I have over complicated the CSS coding.

I have done 2 websites in CSS overall to try to combat the navigation throwing the rest of my navigation off course. I found a solution but have made far too many div ids so it has become overcomplicated to manage the code. Also all of the JavaScript is working up to standard so the only problem has been that I have been placing the div id's next to each other and not all of them are within a box so knock each other out of the page.

E.G.

My first website

Here are 2 screen shots to give you a general idea of what that CoffeeShop website is like. I'm really happy with the outcome so far enough though it has been a painful process. I've asked a few people to look at the website and they all find it easy to use. The colour and textures of the site make them hungary as well. I just need to validate it.

The hardest part was the navigation which ideally I would've liked to be animated but thats another challenge for another project, maybe flash?

CoffeeShop Mock-ups

I have developed both of these mock ups to entice the audience. I have been careful to avoid colours such as green and blue as they are appetite suppresses. I have gone for brown/creamy tones in the first mock-up to remind the viewer of the rich, delicious products tat the coffee shop has to offer. I've put a big image in the background of chocolate to let the audience know what the website is about automatically. I think women will find this particularly enticing.

Also I have done an extended menu bar across the page so that it guides the viewers attention across the page. I am definitely going to change the font to make it warmer, and less generic,

Although I like this mock-up I think that it is a little too plain and all the information might be a bit too cramped into the left hand side. This could work out well for me though because it is proven that audiences tend to see images as links and people always look along the left hand side in a triangle shape )taking int eh logo and tittle) or in an 'F' shape (taking in the menu,logo and title).

Design Interviews

Dan Saffer: 'Interaction design is an applied art'

The first thing that stands out to me from Saffer's interview is the passion for the combination of disciplines he uses to define his work (e.g. film making, anthropology, art science etc) but his base is mankind. He makes it for the people and is grounded by that. In my opinion this is very important because to create a successful website you have to constantly think about how the websites going to be used and what will draw in. He also has a mixture of inspirations that constantly keep his ideas flowing.

From reading about Saffer he is continuously growing as a designer, always looking at new designers, inspirations and challenges that keep him disciplined, for example he has suggested looking at new technology (in particular touchscreen devices). Interacting with the technology gives you a basic knowledge of it's function therefore you can improve it.

Joel Schafer: 'I'm into minimalistic clean design'

Whilst Saffer describes his work form a creative point of view and how important research etc is Schafer relies heavily on planning. He plans it down to the last detail so that he knows what coding relates to what page and what possible problems could occur.

From reading both articles I think that your design process has to be intricately planned, however you need to know what you audience want/need to do this. The only way to go about this is to research, experiment and (for me) draw.