Computertots Interface Design

Moodboard & Sitemap

Tutorials

http://www.htmlcodetutorial.com/

http://www.echoecho.com/javascript.htm

http://dynamicdrive.com/dynamicindex14/flexislide.htm

http://www.quackit.com/html/codes/html_code_library.cfm

http://www.psacake.com/web/

Beautiful Website

http://www.livefreeridealive.com/#/facts_figures/

http://clubepharmaton.com.br/

http://www.girleffect.org/

www.xixinobanho.org.br/

Competitor's Site

http://www.davinci.com.my/index.html

Analysis:

-good hierarchy

-looks attractive and colorful

-comfy layout

-clear navigation

http://whizzkids.uk.com/

Analysis:

-friendly looking site

-clear navigation

-got a nice theme

-everything is categorized neatly and titled nicely

http://www.toysrus.com/shop/index.jsp?categoryId=2255957

Analysis:

-very harmonious color and pleasing to the eyes

-nice typography

-good hierarchy

-clear navigation and buttons

http://www.tutortime.com/

Analysis:

-boring design and layout

-navigation not that clear

Gannt Chart + Site Map

Client Website

Analysis:

-every pg of bg is different

-different grid system

-home pg is very different frm the other pages

-no hierarchy

-navigation is very messy and unclear

-navigation bar is mini and unattractive

-font is not attractive

-alot of unnecessary pages

-title on every page is not cleary shown
-other pages logo is missing
-no info on gallery
-navigation inside another navigation is not shown making it confusing
-categorize the navigation
-images too small
-no info hierarchy
-FAQ's should consist of an asking form

Flowchart

MOOD BOARD

How To.....

How To Set Up Snake Enclosure

Who am I : Snake keeper

What is it: Vine Tree Snake

What for : Snake's artificial home

1st task : Get a tank at least 13 Inch in height made from glass.

2nd task : Cover ground in substrate mixture & add in rocks & branches.

3rd task : Build artificial waterfall.

Outcome : A happy pet snake

Showcase : Gallery

How To Decorate your Boring Wall

Who am I : Design student

What is it: Plain wall in front of u

What for : Decoration & Inspiration

1st task : Rummage through ur stuff for Eg: clothe tag, packaging, brochure...

2nd task : Collect anything in paper when shopping, dining...

3rd task : Draw speech bubbles in markers to liven things up.

Outcome : Designer's wall

Showcase : Gallery

How To Handle a Tarantula

Who am I : Fashionista

What is it: Flame Knee Tarantula

What for : Modeling

1st task : Wet hand & lower hand in front of it .

2nd task : Give its butt a soft push.

3rd task : Let it walk on your hand.

Outcome : Live Deco.

Showcase : Gallery

Tutorials Reff

How To Design a Sweet Linework & Typography Combo

http://vector.tutsplus.com/tutorials/designing/how-to-design-a-sweet-linework-typography-combo/

How To Make a Highly-Textured Site Layout in Psd

http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-make-a-highly-textured-site-layout-in-photoshop/

How To Make Digital Photo Look Like Lomography

http://digital-photography-school.com/how-to-make-digital-photos-look-like-lomo-photography

Light Painting Guide

http://abduzeedo.com/ligh-painting-guide-christopher-hibbert

Beautiful Web Design

http://www.warpedstore.com/

http://www.starbuckscoffeeathome.com/

http://minilogue.com/

http://himynameismark.portfolio1.juxtinteractive.com/

pattern & color palette

color palette for DDMM

MoOd bOaRd

Flowchart

Why do you want to use flowchart in your mobile interface design & screen interface design ?

How will it help your users to meet the interactive goals ?

• A flowchart can immediately gives the reader the general idea of what is going on with just a few simple words. Hence it is way more attractive than when you have a whole paragraph of words just to tell you a simple message, when you can present it with a simple symbol or image and a few letters and it will do the magic for you.

• It also clearly signifies what is next or even have multiple choices that leads to different conclusions. It is straight to the point without any other fuss.

• By integrating the system of a flowchart into our mobile & screen interface design, users will know what is next and what comes next vice versa. It served the whole purpose for us to convey our message quickly, shortly & clearly.

below is a clear example i got frm breezetree

alarm clock icon~

hmm 1st assg in class [pixel icon]..now baru post~

saya buat
dia buat

improve hoi color...bagaimana~???

PLEASE COMMENT ON THESE EVEN IF UR NOT IN THE ART FIELDS~~~ 8D

Questionnaire~~~

1. How is the color

2. Tell me what are these

3. Suggestion for how to improve them?

4.Harsh comments are welcome so just be truthful~

~Deeply appreciate those who commented =D