Wednesday, February 06, 2008
Wednesday, July 04, 2007
The "CRAP" principle
A term very interestingly coined by the design course at http://www.colorado.edu/.
The following is my version of the CRAP principle, which can be used in both graphic and web designs.
Contrast contrast brings in visual int rest and focus to the design.contrast can be brought in through fonts, colors and dimensions.a focal point (CVI) can be brought in the design using contrast, which is very essential in guiding the user through the design.contrast should also be balanced. Else it can create chaos.
Repeat repetition is a major factor in UI design to bring in consistency.repetition of elements like font color, header size, layout structure etc., tell the user that they are in the same web site.repetition also goes a long way in brand identity, repeating a particular style, by way of graphics, bylines or quote create a brand recognition.
Align alignment brings in rhythm and grace to the design.print designs like news paper and magazines generally justify the content and have a column alignment web pages favour left alignment and majority have a single column structure.every element in a page should be connected and aligned w.r.t each other. never have elements standing alone.always align a image with captions or baseline text.
Proximity group related design units in close proximity, thereby separating different units of the design.a single unity structure without proper grouping, results in a boring layout.there should be enough white space between one group and the other. maintain consistency in spacing different groups.
The following is my version of the CRAP principle, which can be used in both graphic and web designs.
Contrast contrast brings in visual int rest and focus to the design.contrast can be brought in through fonts, colors and dimensions.a focal point (CVI) can be brought in the design using contrast, which is very essential in guiding the user through the design.contrast should also be balanced. Else it can create chaos.
Repeat repetition is a major factor in UI design to bring in consistency.repetition of elements like font color, header size, layout structure etc., tell the user that they are in the same web site.repetition also goes a long way in brand identity, repeating a particular style, by way of graphics, bylines or quote create a brand recognition.
Align alignment brings in rhythm and grace to the design.print designs like news paper and magazines generally justify the content and have a column alignment web pages favour left alignment and majority have a single column structure.every element in a page should be connected and aligned w.r.t each other. never have elements standing alone.always align a image with captions or baseline text.
Proximity group related design units in close proximity, thereby separating different units of the design.a single unity structure without proper grouping, results in a boring layout.there should be enough white space between one group and the other. maintain consistency in spacing different groups.
Friday, June 22, 2007
UI Basics - Few gudelines
“A good designer knows the user and designs for the user”
The user interface is the aggregate of means by which people (the users) interact with a particular machine, device, computer program or other complex tool (the system). The user interface provides means of:
• Input, allowing the users to manipulate the system
• Output, allowing the system to produce the effects of the users' manipulation.
- Wikipedia encyclopedia
The following list is a compilation of some basic guidelines every designer will follow and some of my personal experiences.
Even before that, there is one point which I would emphasize -
It is not enough if a design is aesthetically pleasing it should also be technically flawless.
1. Know your user and understand their profile (requirement gathering, persona creation and other usability tools)
2. The client is not always the end user. If you feel a certain element is essential in terms of the user, let the client know about it.
3. Follow consistency in terms of placement, color, functionality etc.
4. Make visual cues clear.
E.g. if link text are underlined, do not underline submenus or titles. This will confuse the user.
5. Know how to attract attention. Animated gif or a promotional tool should be attractive at the same time be in sync with rest of the page.
6. Use css and html to give optimum results. Understanding of SEO basics and css2 go a long way in making a good website.
7. Provide Help to the user.
About boxes, help documents, tool tips, visual cues etc (feed back to say action is complete).
8. Visually define the context. Cancel and refresh buttons placed together in a form generally created confusion.
9. Give importance to typography. Defining correct font size for headers, sub-headers and other text help the user to a great extent.
10. Use proper metaphors when you design icons.
11. Use controls effectively. (Radio button, check box etc.)
12. User testing is an absolute essential.
This is not an exhaustive list. Comments and suggestions are welcome.
Saturday, May 12, 2007
Favorite Fonts of 2004 and 05
A must read... Gr8 insight into different typefaces.
Some favourites fonts of 2004
Some favourites fonts of 2005
Some favourites fonts of 2004
Some favourites fonts of 2005
Friday, May 11, 2007
some key factors...
I was browising through a article in the digital web magazine - "The Business of Blue", by Stephen Van Doren.
Few basic concepts which I thought will be of help to review.
Saturation is important to strong colour scheme because it is the primary criterion by which a reader or viewer will assess the work. Stronger saturations call for a much louder voice, where desaturated schemes lend themselves to a much lighter touch.
Visibility, of course, pertains to how the colours "jump" from the page. It is important to note that not all colours need to do this; they can be as transparent as you wish. At the same time, if you place a premium on visibility the choice of colour must be evident to the viewer, or the implied message is lost.
Hierarchy refers to the levels of colour utilized in a scheme: in each swatch combination, there are three colours.
The first is the primary colour, used in major washing of objects and blocks to give the first "punch."
The second is the subordinate colour, which is used to substantiate the claim the primary colour holds on the viewers attention.
The third the accent colour, which should be used sparingly within reason so that the viewer's eye can jump from place to place to ascertain what is truly important about a particular project.
Stephen Van Doren is a software developer and graphic designer from Denver, Colorado.
Few basic concepts which I thought will be of help to review.
Saturation is important to strong colour scheme because it is the primary criterion by which a reader or viewer will assess the work. Stronger saturations call for a much louder voice, where desaturated schemes lend themselves to a much lighter touch.
Visibility, of course, pertains to how the colours "jump" from the page. It is important to note that not all colours need to do this; they can be as transparent as you wish. At the same time, if you place a premium on visibility the choice of colour must be evident to the viewer, or the implied message is lost.
Hierarchy refers to the levels of colour utilized in a scheme: in each swatch combination, there are three colours.
The first is the primary colour, used in major washing of objects and blocks to give the first "punch."
The second is the subordinate colour, which is used to substantiate the claim the primary colour holds on the viewers attention.
The third the accent colour, which should be used sparingly within reason so that the viewer's eye can jump from place to place to ascertain what is truly important about a particular project.
Stephen Van Doren is a software developer and graphic designer from Denver, Colorado.
Friday, March 09, 2007
Typography and CSS2
CSS1 vs. CSS2
A designers dream will always be to bring some amount of typographic aesthetics into a webpage.
Because the main challenge online is that, people to a great extent tend to scan the content that actually read it. So one has to judiciously use techniques to highlight important text. How different yet technically viable a site can be made in terms of text, will be the top of mind concern for any designer.
With little extra time spent on style sheet authoring, all these can be achieved to a great extent with the CSS2 techniques.
The effect of judiciously exploiting CSS2 can be seen in the following links which Garrett Dimon in his article "CSS Typography" in the Digital web magazine.
http://www.Kottke.org
http://www.RobWeychert.com
http://www.Subtraction.com
http://www.AListApart.com
In CSS1 fonts used were assumed to be in the client's system and were identified solely by name. Alternate fonts were specified through the properties. CSS2 gives the liberty to the author to describe the font that is to be used. And the user to select a font when the author's requested font is not immediately available.
The beauty of CSS2 is that, it defines the information in the client/user agent database and allows stylesheet authors to contribute to it. To display a character with a particular font, the user agent first identifies the "best fit" form the data base. Then retrieves font data locally or from the web to display the character using the particular glyphs.
So in css2 there are basically two mechanisms, font specification by the author and font selection by the user agent.
css2 specifies fonts according to the following characteristics
Font family, font style, font variant, font weight, font stretch and font size.
As a fall back mechanism generic family name is always specified as in css1. The five generic font families are serif, sans-serif, cursive, fantasy and monospace
In font selection by the user agent, there are four possible actions. Font name matching, intelligent font matching, font synthesis and font download.
This is just a snap preview of the concepts. Elaborate details are available at w3c
A designers dream will always be to bring some amount of typographic aesthetics into a webpage.
Because the main challenge online is that, people to a great extent tend to scan the content that actually read it. So one has to judiciously use techniques to highlight important text. How different yet technically viable a site can be made in terms of text, will be the top of mind concern for any designer.
With little extra time spent on style sheet authoring, all these can be achieved to a great extent with the CSS2 techniques.
The effect of judiciously exploiting CSS2 can be seen in the following links which Garrett Dimon in his article "CSS Typography" in the Digital web magazine.
http://www.Kottke.org
http://www.RobWeychert.com
http://www.Subtraction.com
http://www.AListApart.com
In CSS1 fonts used were assumed to be in the client's system and were identified solely by name. Alternate fonts were specified through the properties. CSS2 gives the liberty to the author to describe the font that is to be used. And the user to select a font when the author's requested font is not immediately available.
The beauty of CSS2 is that, it defines the information in the client/user agent database and allows stylesheet authors to contribute to it. To display a character with a particular font, the user agent first identifies the "best fit" form the data base. Then retrieves font data locally or from the web to display the character using the particular glyphs.
So in css2 there are basically two mechanisms, font specification by the author and font selection by the user agent.
css2 specifies fonts according to the following characteristics
Font family, font style, font variant, font weight, font stretch and font size.
As a fall back mechanism generic family name is always specified as in css1. The five generic font families are serif, sans-serif, cursive, fantasy and monospace
In font selection by the user agent, there are four possible actions. Font name matching, intelligent font matching, font synthesis and font download.
This is just a snap preview of the concepts. Elaborate details are available at w3c
Tuesday, February 27, 2007
Creativity in cartoon channels...
How things can be made simple and easy, I got to understand today. Actuall my neighbours kid was watching POGO channel and I happened to be ther in his house that time. This is the program call "Mad". It is really very intresting wher a host of art activities are introduced to the kids in a playful and funny way. Not just POGO but almost all cartoon channels have a program like this, i was told by my lil friend. How intresting... there is always something to learn, even from kids!
Subscribe to:
Posts (Atom)
