Mockups - Artist Website

After recieving feedback from my last project i decided to do more mockups this time round and ask for more feeback from the client. Here are some of the designs i have done...

Ideas and Wireframes

Some sketches and notes I made for the initial Wireframes...

More Wireframes...

Brief 2 Client

For my project I am designing a website for my friend Kelly Webster. She is a Director who specialises in Horror/Thriller type videos. She wants a website creating which reflects herself but is mainly used as a portfolio website.

Client information:

Name: Kelly Webster

Type of Website: Personal/Portfolio

Favorite Colour: Green

Layout: Simple and clean

Social Networks: Twitter, Facebook, Youtube.

To get and idea of what Kelly regards to as a 'simple' website. I asked her if she could provide me with an example website.

The following website is a website she likes (Adline) which is a co-workers of hers. She is not bothered about a fancy website, she just wants a website which gets across the message in a basic form.

Website - http://www.adline.co.uk/

Antony lane -Filmmaker

Artist Website - Brief

Exploring Multimedia :
Interactive Media Pathway
WEB Design, WEB Applications & Interaction Design:
Assignment Brief Two

Set Week 29 (12.02.2010)
Deadline Week 34 (19.03.2010)

Brief: Artist/Arts Organisation Website

Design and build a artist / arts organisation website. A site which acts as a promotional website for an individual/organisation and which will increase both profile and online traffic for the client.
The choice of artist is wide and could include musician, craftsperson, writer etc etc.

These must be real individuals either known to the designer or if not known then with sufficient background material available (on or offline) to make an effective ‘mock’ website (not historical or dead artists!). They can be real ‘live’ commissions if available.

Include:

• 5 page website (minimum)
• Widgets
• Flash Banner
• Diary/Journal page XHTML/CSS
• Database using MySQL (to store user info etc)
• ERD to document your database design
• Journal page must have an option to upload an image/video
• Contact info and form
• Link to social networks e.g. Facebook, Twitter, Myspace
• Validated to W3C standards

Flash Banner - Finshed

Here is the final Flash Banner.

Flash Banner - Designs

Here is my design for my Flash banner.

Banner - Sketches

Here are some sketches Ive done. As i have never done a banner before i want to keep the idea simple (boring) so i an get to grips with Flash and later on develop the banner further.

Gantt Chart - Artist Website

Here is my gannt chart for Project 2.

Design Exercise 13 - Samsung Jet

For the design exercise I have chosen to use my phone (Samsung Jet).

Current Advertisement





The current TV/Web advertisement being broadcast is based around being impatient. This obviously reflects the phones selling point about being the fastest phone with its 800 MHZ processor.

Below is a screenshot of Samsungs banner/advertisement from there website. From what I can make out, they used Flash with XML.

Design Exercise 13 - Banner

Scenario: You work for a web design company that has been commissioned to develop a new campaign for your mobile phone.

The part of the site you will create is a simple FLASH animation that links to a main product website and is to be deployed across a variety of websites.

It should consist of at least 6-8 separate sections that include some animation and interaction. Research your phone and its current advertisement and build a new campaign banner.

Who will the audience be?

What is the message that needs to be communicated?

How will the FLASH banner appeal to the intended audience?

What are the designs for the visual appearance (provide 6 minimum)?

How will the interaction work (provide 4 variations minimum)?

Does the interaction increase the ability to communicate the intended message?

If so then how?

Provide an evaluation (300 words) of the final implemented design.

Did the design and implementation succeed (Yes/No)?
Where did it succeed?
Where it failed how would you improve the design and/or implementation.

Design Exercise 12

Homepage

My first impression of Metalab's Tumblr theme is both positive and negative. I think web 2.0 idea of clean, simple and gleaming with colour is the way forward keeping in with the new trend. I do not like the sudden impact of a rainbow colour theme in the background. It clashes and compromises content in the way your eyes are not drawn to the more important content e.g. the users photos.

I do not like the way they have used the new trend of transparency and overlapping graphics. It is a good concept but does not work with the background image. The structure of the website however compliments the fundamentals of Web 2.0 in using the idea of simplicity.

One of the elements which i like and would consider using is the 'Tumblr theme'. The Tumblr theme from what i can make out is a sharing application, which allows users to effortlessly share anything e.g. photos and videos. You download a theme which allows customizable pages using html and CSS.

I have researched into the website but have not managed to locate a portfolio website to get an idea of the style they have used. From what i can make out is that it was designed by Jacob DeHart along with his wife Mischa. Jacob has a website but currently has nothing on his website apart from his contact details.

Jacob DeHarts Website

Spaceship Collaborative - Company's Website

My 2 Retail Websites

My original Version of my website before i changed it.

http://maeda.ads.ntu.ac.uk/~n0238051/websites/pub1/

This is my website after a re-design.

http://maeda.ads.ntu.ac.uk/~n0238051/websites/pub/

New Idea

from my new designs i came up with a final design for my second website.

Website re-design

After Shauns Seminar we were told to come up with another website which either can be a different design or make changes to our original version.

Validated

Ive finally got round to validating my website which to my suprise, did not come back with any errors! lol

Broad Oak Website Elements

I have decided for one of my website elements i wanted to bring a vector version of their oak tree. I did this by taking the photo of the tree and drawing it using the 'Pen' tool in Illustrator CS3.

stage 1

stage 2

stage 3

stage 4

stage 5

Criticism

Now that i have put my first initial website together i received feedback from my tutor to make changes and now come up with more ideas for our website.

Points made about my design:

• Too much white space
• Not symmetrical enough (the tree is off centred making the design look off centre)
• Size is too small (I made the design 800 x 600 but realised it doesn't work with bigger monitor sizes

Broad Oak website ideas

Pictures for website

For my website for the Broad Oak i went out and took pictures which i may be able to incorporate into my design.

Mind Map