Interface Design

Anything was always going to better then the way I felt walking out the doors of last weeks teachings in CSS that's for real....so when today we began re-designing the same site as last week with  the base remaining the same in its HTML structure only introducing a new business/purpose of our own individuals choosing...I felt relieved and excited and set about creating the Jaycee Lauren Jewelry Home & About pages!!!

But firstly... the low down with an intro into the visual design process when it comes to building a web page was theorized.

...Research...establishing the purpose, target market & demographics of the web page & its functionality.  This includes researching the competitors within the sector your setting about creating a website within also.

...Brainstorm...collating ideas & gathering inspirations to assist you in the direction you intend to  follow.

...Concept sketching...quickly & efficiently sketching out thumbnails for the visual design on paper is hugely important.

...Developments...from your concepts in the previous step, analyse & make decisions on which designs you want to continue developing, opting to carry through 2 or 3 designs to move forward with and further in their design, adding finer details, colors, images & type experimentation's.  This is best achieved for some by taking it into a software program, such as Adobe illustrator to mock up the developments.

...Web process...with websites involving large volumes of content it is imperative to organize this material which may include text, images, video, multiple pages etc...so in order to achieve an effective design you must consider organisation such content into one of a variety of techniques being...

• card-sort - is a way to organize content based on hierarchy
• wire frames - also know as a page schematic or screen blueprint being a visual guide that represents the skeletal framework of the website allows you to foresee potential problems before you get down to the nitty-gritty of the designing
• paper-prototypes - this free form of quickly and collaboratively sketching out the architecture of the website is incredible for expressiveness and nothing is faster for capturing ideas
• clickable prototypes - with quick creation these can allow users to test actual functionality while still allowing conversations between the user and the design sometimes proving easier to understand than cumbersome design documentation

...Working with the client...generating variations of the homepage for the website is generally one of the first steps allowing the client input and feedback.  It is IMPORTANT the person who 'owns' the website feels it belongs to them, they have 'buy-in' to it, they understand it and want to essentially promote it.

...Template designs...overall websites can be small or very large.  To design in an efficient manner that doesn't waste time or money also enabling an effective, consistent & reasonably standardized format a good option is to use template-design on the 'key' pages ie: homepage, landing & gallery pages etc...one page that represents each 'level' of page that exists on the website.

<<Home Page>>

 [  DESIGN PRINCIPLES  ] 

..Dominance

..Directional lines

..Contrast

..Consistency

..Repetition

<<About Page>>

so... here, to the right are my JayceeLaurenJewellery home&about pages designed in Adobe Illustrator during today's class....which we will look into building offline next week in Adobe's Dreamweaver... ...coding and styling up the design, CHOICE!