Sunday, October 24, 2010

Proposal of Web Design Final Project

Introduction
This project is about design a delicious coffee website that promotes the coffee products/café.  The brand of this café and all of the images and illustrations use was created by myself. Base on this project, I have learning more about the concept design and Graphic User Interface of web design.

Conceptual Design
The concept of this web site is contemporary. I try to use illustration style for this web site to create it unique. A litter bit funky animations were created to make the web site more attractive.

 
Interface Design
The background of this web site design is flat, it is to providing the resting point for the visitors. The reason is this web site was inserted a lot of animations, if the background is too crowded, it will make visitors confuse and run away from this web site.
-         Colour
Warm colour was used as background colour, it creating harmony look and feel to visitors. As a café web site, it is an important point.  
-         Typeface
To maintain the consistency of the style of this web site, I used the typeface which is hand-writing style and a litter bit funky font.
Navigation
The main navigation buttons are in the top of the web page. However, I created sub-navigation buttons at the bottom of this web site to make the visitors easier to go to another pages while they have scroll down to the bottom of web page.
Conclusion
It is a user friendly web site, because the navigation is simple to understand and use.

Final GUI

 Cozy Cafe logo










                  Home page



                 About Us page














Drinks page


Foods page


Nutrition page


Contact Us page

Sunday, October 10, 2010

Final Project-- Cafe Website Design

Site Map

Logo develop




Home page



idea 1



idea 2




Finalize- Information Architecture



Navigation buttons design







illustrations













Hot drink page







Contact Us page




Nutrition page



Sunday, September 19, 2010

Usability Testing


In the stage of web site development by using Adobe Dreamweaver CS4, I encountered several problems. While I changed the color of the font, the whole text was changed to that color together. It is same with changing the font size, when I want to highlight a word by change the size, the following text have been changed. 
Another problem is when the image has linked to other site, the image will automatically highlight with a color outline. The color outline cannot be remove or delete, it disturb the visual design of web site. This problem make me changed the original plan, so that the logo of Kuching Design Festival has no link to the main page.
While I saved my interface design as template, Adobe Dreamweaver is automatically saved at my desktop. It causing me has to remove the template folder into the specific folder every time.
After my web site was completely linking with other web pages, I test the functionality of the final web site. I test every one of those navigation buttons to ensure that are functional and link to a correct page. A main problem I encountered is the buttons have a litter change place from the original place I set. Although this problem has not affected to the functional of the buttons, it has destroyed the original interface design of the web site, especially for the calendar.
At last, I do the compatibility issues that viewing the web site into different web browser. Fortunately, my web site can be viewing in the Internet Explorer and Mozilla Firefox.
After usability testing is finished, I copied the whole folder to my friend’s laptop to ensure my web site is still functional.

Proposal of Web Design

INTRODUCTION
This web site was created for Kuching Design Week 2011 Festival. Before design the interface of this web site, I do some research to gather the information of web design. I have surf a lot of web site about Design Week, Design Festival, Design Show, and etc. From surfing this kind of web site, I have gather the common initial information about the purpose, goals, target audience, and specific content about a Design Festival Web Site.
In addition, I have read some books about the web design either from theoretical or practical. From reading those books, I have more understand about the elements and principles of web site design.

INFORMATION GATHERING
The first step in designing a successful web site is to gather information. The certain points to consider for a web site are the purposes, goals, target audience, and content of that web site. From the information I have gathered, the purpose of a Design Festival Web Site is to provide the information about the festival, activities, events, time and location to public. The goals of the web site are sharing information about the Design Festival and attract people have particular reaction. The target audiences of this web site are students and creative interested, between 18 to 45 years old. The contents of Design Festival web site should giving related information and good to have some images.

CONCEPT DESIGN
The concept design of this Kuching Design Festival 2011 web site is simple and easy to use for visitors. From observation the principle of Less is More, this web site is using simple color and simple font. The background color of this web site is using white color to create emphasis of contents and texts. To maintain the consistent of this web site, all of the navigation buttons are easy to recognize and setting at a same place for every web pages, so that the simple look and feel has been created and it is easy for users in this web site.   


PLANNING
In this stage, the site map of Kuching Design Festival 2011 was developed by using the information gathered. The site map is including Home page, Programme page, News page, About Us page, Exhibition page, Sponsors & partners page, and Contact page.
Random structure has been used in navigation system so that users can go to the page what they want by simply click a button. Furthermore, all of the web pages provide a sidebar that link to other sub-topics, such as graphic design, interior design, digital arts, furniture, mural, illustration, sculpture, and photography.

INTERFACE DESIGN
The Graphic User Interface of this web page was designed by using simple white color for the background of whole page. It is to avoid the web page look too crowded and making users focus to the contents and texts. At a same time, white space providing the resting point for users.
The logo of Kuching Design Festival 2011 was designed be a straight line of words without spacing. Black and grey color use to create contrast between the words.
The typeface is simply using Arial font, san-serif make users easy to read on the screen. To maintain the consistency of web pages, all of the typefaces are using the san-serif font.
The main navigation buttons were designed having underlines to show they are clickable. To create a good interaction between users and the web site, the buttons will change color while the cursor rollover them.



DEVELOPMENT
In this stage, all of the individual graphic elements from the prototype were used to create the actual, functional web site.
            First, the home page was created, and the followed interior pages have created by changing the contents using the template of home page. This method is good to maintain the consistency of every page.
The GIF animation was used at the home page because the GIF animation is more dynamic than still image and it can attract the users to surf continuously into the web site.
            Some images were used in the web site. To avoid the web pages are loading too slowly, all of the images size were be minimize to lower size.

CONCLUSION
Web site design is very interesting. However, it is not as easy as people looking from the exterior. There have a lot of knowledge I have to learn in this field.

REFERENCES
Books
Frank Thissen, (2004). Screen Design Manual, Communicating Effectively Through Multimedia. Germany: Springer-Verlag Berlin Heidelberg.
Gary B. Shelly, H. Albert Napier, and Ollie Rivers, (2009). Web Design: Introductory Concepts and Techniques, Third Edition. United States of America: Course Technology, Cengage Learning.
Jesse James Garrett, (2003). The Elements of User Experience: User-Centered Design for the Web. United States of America: New Riders.
S. Todd Stubbs, Karl Barksdale, and Patrick Crispen, (2000). Web Page Design. United States of America: South-Western Educational Publishing.
Zoe Mickley Gillenwater, (2009). Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. United States of America: New Riders.

Internet
Liverpool Design Festival 2010. From: http://www.liverpooldesignfestival.com/calendar/
London Design Festival 2010. From: http://www.londondesignfestival.com/
Kuala Lumpur Design Week 2010 Festival. From: http://www.kualalumpurdesignweek.com.my/2010/index.php
Singapore Design Festival 2009. From : http://www.singaporedesignfestival.com/designfest09/ 
Sydney Design 2010. From: http://www.sydneydesign.com.au/2010/
DMY International Design Festival Berlin. From: http://dmy-berlin.com/en

Finalize Web Pages

Home page

Programme page

News page

Exhibition page

About Us page

Sponsors & Partners page

Contact page

Interior Design page

Digital Arts page

Furniture Design page

Graphic Design page

Sculpture page

Illustration page

Mural page

Photography page

Idea Develop

Site Map


logo design


idea 1

idea 2


idea 3

idea 4

idea 5

idea 6

idea 7

idea 8


idea 9

idea 10