Structure Site

  "home page" // "gallery page"

"menu page"

Strategic Brief

Project Definition

The definition of this project is to redesign a commercial site, Soul-ed Out into a interactive and functional website while maintaining the identity. The purpose of redesigning this website is to improve the website look more attractive to look at.

Current Site’s Analysis Goals

Soul-ed Out’s website should be more neat and tidy in a way so that users know where to click and start with since it serves mediocre food. Now, it is too much of repetitive elements in every page at the bottom which causes confusion which to click, what to click, link to a new link, where is the button located .Everything isn't organized properly. 

Client’s Analysis

The banner shouldn’t be in such funky direction. Since it is about delicious food and drinks, I would suggest changing it into a simple background for the logo to stand out more than it is now. Now, it looks more like a music website with music visualization. Their unique selling point is perhaps is communication as it can be seen everywhere throughout the website. The way they type and greet people who surfs their website.

Short & Long-term Site Goals

Since the long term of this site is to bring peace, freedom and celebrate good times. It is good that the website is full of friendliness by the way they greet users/customers.The short term of this website should be easy to understand and narrowed down so that users can easily navigate from a topic to another topic without clicking too many pages of under a big title. Like the reservation shouldn't be hide, which on the other side should be clear to see at the contact us. Too many sub menu of a menu will not do. Not only that, menu has to be the first priority since it's about food. 

Target Audience

Their main target audiences are mainly rich people and teenagers. They even prove their place is full of soul by placing the testimonials page from their customers. This website is full of friendliness in my point of view. In order to be respected, communication and manners is important.

Competitor’s Analysis

Very attractive and tidy with the grid system. Color mood suit their theme very much since it’s about food. Has drop down menu and flash elements like animation to cure the boringness of the website.Good navigation which is understandable, simple button and yet clear.

Idea & Concept Implementation

In my opinion, I would suggest removing the repetitive banner at the bottom. Having social buttons to be beside but, on top layer of the design might be better for viewing. Some of the unnecessarily content should be remove since it’s about food, lounge and bar. Identity of Soul-ed Out will be remained which is the yellow green and white so that it is still recognizable as Soul-ed Out at first glance of the colors used. The importance of white space is also important to a design so that readers could breathe through it.

Moodboard

Version I [click for enlargement]

Version II [click for enlargement]

Version III [click for enlargement]

Beautiful CSS websites

site: http://www.ghosthorses.co.uk/

site: http://smartessay.co/

site: http://bareandbeautiful.co.uk/

site: http://www.thethingswemake.co.uk/

Competitors' websites for Souled Out

site: http://www.thewineryrestaurant.net
analysis: very nice layout and animation of the website. very neat and clear. It also provide interactive with the user which make the website very elegant with the wine. Lots of interaction with user which make user to browse more for the content and expectation from the user itself. Animation of the site is very nice and very good to look at it. Music wise is very comfortable.
site: http://www.geographer.com.my
analysis: the color suits the theme of the restaurant. It is also very neat in a way for the form. The feel of the website brings out the building feel since it's very historical. Provides a lot of information about itself. A good way for people who like to know about the place before visiting it.

site: http://www.chilis.com

analysis: uses of the chili's color itself. Very nice and comfortable to look at. The rollover is very nice too. Background texture is very interesting to make the background doesn't look that plain. They even have drop down menu for their user under e-mail club tab.

site: http://www.fridays.com.my
analysis: very nice theme. very neat and clear to user. Although it is very nice. It doesn't display some of the menu using Chrome browser whilist it display nicely and everything is shown using internet explorer. Very attractive color to attract the user to browse. It also provides drop down menu for heavy contents. I find the music is a little bit frightening to me.

Site Map of Client's Website(Souled Out)

[ click for enlargement ]

Websites with analysis

site: http://www.20thingsilearned.com/

analysis: an interesting way of delivering the content. very nice illustration. It also provide instruction on the bottom left panel to let us know how to use it. it is also very neat and hierarchy. it can be fast forward on the bottom with different section provided.














site: http://www.fucking-windows.com/


analysis: interesting websites with a resizing-the-browser technique. there are few others there. please visit. It is very interesting!
















site: http://www.imaginaryforces.com/


analysis: lots of information being neat using the dropdown technique.










site: http://www.ostragoth.co.uk/

analysis: another scrolling browser like the nike's websites. it's interesting just by scrolling without clicking on the links

Design Tutorials

+ create funny stuffs and nice using this trick
+ click here to go to the site















+ creating a vintage theme of traveler diary in photoshop
+ click here to get to the site











+ this is a site where we can learn about how to create retro folded typography with photoshop
+ click here to get to the site

+ this is a site on a tutorial how to transform photo into
watercolor painting
+click here to get to the site

Beautiful Commercial Sites

site: http://nikebetterworld.com/index

analysis: the scrolling and layers are amazing! please visit!

















site: http://levistrauss.com/

analysis: nice drop down menu compiling everything under a tab making the site looks nice


















site: http://www.acromediainc.com/

analysis: very interesting design and color used. roll over effect is nice. the big head is so nice to play with. Please use your mouse and hit it. It is very fun! so elastic!


















site: http://www.ea.com/

analysis: another great site of layout, typography wise and design. clean and neat and very very clear to user. Section is separated nicely!

HTML library

site: http://www.line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery










site: http://www.smoothdivscroll.com/










site: http://www.admixweb.com/2010/05/12/creating-a-bubble-coda-style-with-css3/










site: http://www.aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/











site: http://www.slodive.com/web-development/best-jquery-dropdown-menus/

Gantt Chart of SOUL-ed Out

[ click for enlargement ]

Client's Website (Souled Out)

analysis:

+ repetitive of uncertain things which can be click on the menu

+ thumbnail isn't at the same size for the clarity

+ typography wise still can be better
+ details is overfloating without hierarchy

+ main menu button isn't obvious for the user to interact with

+ sub menu button is too funky

+ too many excalamation mark on the events panel

+ rollover isn't obvious

solutions:

+ drop down menu for user friendly

+ same size thumbnail for neatness of the website
+ fonts will be enhance using modern typeface

+ sub menu will be enhance

below are pictures which can be found on this site

" home page" page
"about us" page

"what we offer" page

"what is happening" page

"contact us" page