Saturday, January 16, 2010

Web Design 2_Project Definition and Mood Board

Project Definition
This project is about to redesign the website for COMPUTERTOTS.

COMPUTER EXPLORERS is a worldwide computer education center for children aged 3 to 12 and the learning center which located in Malaysia is called COMPUTERTOTS. This company expanded globally in 1994, and the program reaches thousands of children and schools worldwide.

Since it is a international company, their website should be bring the customer a standard, comfortable feeling and provide information to the customer clearly.


Current Site's Analysis Goals
For this website, the purpose is to let their customer know what product and service they provide and the benefits of the programs. The goal is to make it more attractive, as we know the first impression will affect how audience look at this company.

The usage of the color in this website catch audience's attention, yet it's too much. The background colors are too strong. Our eyes will feel tired and do not feel like move on to other pages. The typography treatment and information arrangement also need to be enhanced. The links and buttons are lack of attractiveness and hard to read,especially the navigation bar. It is important to let users feel convenient, so clean and neat website will let them feel comfortable.


Client's Analysis
COMPUTERTOTS and COMPUTER EXPLORERS, was co-founded in 1983 by Karen Marshall (M.Ed., Ed.S.) and Mary Rogers (M.A., Ed-now retired). This company was franchised in 1989, expanded globally in 1994, and the program reaches thousands of children and schools worldwide. As educators and mothers of young children, they shared the vision that computers would play an indispensable role in the education of children.

COMPUTERTOTS provide services to teach children how to use the computer as a tool for communication, productivity and learning and provide children with a creative, discovery-oriented computer experience.

Their unique selling point is that they offers a variety of programs which challenge students to be innovative technology users. The classes are also offered in many places of Malaysia and even internationally.


Long-term Site Goals
To lead the way by providing quality computer education for children. Having a quality computer education provide, so do have a good quality website. Enough information will let users/customers feel convenient and build confidence to the company. Subscription of monthly newspaper is also a good way to let customer keep updating the news from the company.

Short-term Site Goals
Keep updating the news and new programs on the website. Having fan page on Facebook and Twitter is a trend nowadays which can promote website to community and let users upgrade the news of company. Create the buttons of Facebook and Twitter in the website can help users click on the fan page on Facebook and Twitter.


Target Audience
Parents, educators and students are the main target audience. Parents and students can get the clear information and program benefits from the website. The franchise and career opportunities information are provided to educators or business partner. The information and contents should be clear and neat as build the confidence of target audience. The users can engage with this website by browser, advertisement, some relevant forum and etc.


Competitor's Analysis
From my research, most of the primary competitor's website lack of design and do not have any technology feel. But if compare to other education websites, their information management is better, even though that is different approach.




Mood Board of redesign website_Computertots




Sunday, January 10, 2010

Web Design 2_Preparation










+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+



Client Website: Computertots.com.my

this is a website of computer education center for kids
it has many learning centre in M'sia n other countries




Intro Page


About Us Page


Gallery Page


Career Opportunities Page


* the overall color not harmonious and too pop, make ppl feel dizzy.
* the information and images didn't manage well, cause the layout too blank.
* Navigation bar is too small, can't get the people's attention.
* put all the information all together, make people lose the interest to read it.


+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+


Competitor's Websites




www.digitalmediaacademy.org
this is a digital media academy in US
* the typo treatment make the information clear and simple
* the overall color is match

* images are interesting





www.davinci.com.my
Da Vinci kids
although it's an art & craft learning centre
but it oso an education website
* the category and navigation are clear and easy to read
* interesting images
* layout design very match to the image of learning centre






www.computerxplorers.co.uk
this website is one of the oversea corporate of COMPUTERTOTS
it's located in UK
wonder why same company but come out the web page design are totally different-.-"

* the color of the chosen button(navigation bar) will change, easy to find out which page we locate.
* well typo treatment
* the color combination is match





this website is the international headquarter of COMPUTERTOTS which located in US
* their website is colourful and color using is same as the M'sia one, but well-managed of the color for this website.
* the category on the navigation bar is clear and obvious.
* also have interesting images

+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+



Nice Commercial Web Design


www.showandtellsale.com
* the layout design is nice and neat
* well typo treatment
* consistency
* color using is harmony and match





www.ricoverdeo.com
* the information is neat and clear with some nice images
* consistency
* elegant layout
* use rolling effect for changing to another page






www.brooklynfare.com
* layout design is simple and neat.
* color combination is simple but harmony.
* well typo treatment, show the hierarchy.




* the layout design is unique and artistic
* navigation is clear.
* consistency
* attractive



+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+



CSS/HTML Code Tutorials



+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+.+


Design Tutorials