Redesigning a site can be a tricky process because you have to deal with the weight of expectation, the resistance of users to change, and the ever present spectre that you might be making a step backwards. In my experience the trick to a succesful redesign is to preserve the overall feel of a site and capture some of the hallmarks of the old design into the new one
By keeping that feel you ensure there is a continuity in the site and users still feel familiar with the new site. Preserving the feel of a site doesn't need to mean the new site needs to look the same however. There are a number of things that keep it related:
1. Most page elements - navigation, logo, pagination etc - are in the same locations. This is important because it prevents the user from getting lost or having to relearn the system.
2. The key page of the site, the Listings Page, is quite similar to the Old Listings Page. Listings are presented top down in rows, the image is on the left, details on the right.
3. The style of the design is not dissimilar. Although the designs look vastly different, both are mostly simple, flat monochromatic designs with a few sharp uses of red.
Showing posts with label website design Tips. Show all posts
Showing posts with label website design Tips. Show all posts
Thursday, December 18, 2008
Wednesday, October 1, 2008
20 Websites To Learn CSS
20 excellent websites to help you "grok" CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.
1. A List Apart CSS Topics
A List Apart, the premier site to read articles about web design and best practices, has a collection of articles on the topic of CSS dating back to 1999. Most articles are geared towards intermediate to advanced developers who put a strong emphasize on standards-compliant designs.
2. CSS Help Pile
CSS Help Pile is an aggregate of CSS resources, tips, and how-to’s. The site is well-organized and a wonderful resource for any level of expertise. There’s a category for beginners, browser bugs, and short reviews of CSS books.
3. CSS Basics
CSS Basics is formatted like a book with 18 chapters dedicated to educating readers about fundamental CSS concepts. The writing is clear and succinct - making it a great resource for those just starting out. All 18 chapters can be printed or downloaded in PDF format.
4. Holy CSS Zeldman!
Holy CSS Zeldman (not a site by Jeffrey Zeldman) is a useful collection of resources that link to standards-based CSS tutorials, tools, and layouts.
5. Eric Meyer: CSS
Here’s a collection of works by Eric Meyer (acclaimed web professional and author). Some resources you’ll find on this page are css/edge (Eric Meyers experiments on CSS) and CSS reference.
6. 456 Berea Street – CSS category
Roger Johansson’s 456 Berea Street has over 300 posts under the CSS category. Some posts talk choosing an image replacement method while others teach you CSS techniques.
7. /* Position Is Everything */
Those just getting their hands around authoring CSS code will quickly realize that a significant chunk of time (and frustration) stems from getting rid of browser bugs. Position Is Everything discusses known browser bugs and shares CSS methods that work across browsers. Here, you can read about the one true layout or learn what happens when you nest absolutely-positioned div’s.
8. HTML Dog CSS Tutorials
HTML Dog is a tutorial website dedicated to teaching XHTML and CSS best practices. There’s three CSS tutorial sections: Beginner, Intermediate, and Advanced.
9. Learn CSS Positioning in Ten Steps
Positioning elements using CSS can be a tricky concept at first. If you’re having a hard time understanding the fundamentals of CSS positioning, check out this 10-step tutorial to get you positioning stuff in no time!
10. Andy Budd CSS/Web Standards Links
Andy Budd (directory of Clearleft, CSS guru, and author of one of my favorite books – CSS Mastery) has a set of CSS/web standards links to help you find reliable, useful information about CSS.
11. W3CSchools CSS Tutorial
W3CSchools has a CSS section that covers the very basics of CSS up to more advanced topics.
12. css Zen Garden
css Zen Garden is a showcase of the things you can do CSS. Most importantly, it highlights the concept of separating content from presentation. Using the same HTML file, designers submit external stylesheets to style the HTML file. I suggest using the Web Developer Tool to inspect how the layouts work and what styles affect certain elements of the page.
13. CSS at MaxDesign
At MaxDesign, you can find Russ Weakley’s brilliant set of CSS-related tutorials. Some things to expect here are: Listmatic – which shows you a variety of ways you can use CSS to style lists, and Floatutorial – which goes through the fundamentals of floating elements.
14. CSSeasy.com
CSSEasy.com’s slogan is "learn CSS the modern way". The site promotes learning by experience, with the idea that if you inspect the source code and see how things fit together as a whole, you’ll gain a better understanding of CSS. The Web Developer Tool will also come in handy on this website.
15. CSS-Discuss
CSS-Discuss is a community of CSS enthusiasts. The CSS-Discuss Wiki is a comprehensive collection of real-world usage of CSS.
16. Web Design from Scratch: CSS
Ben Hunt’s Web Design from Scratch has an excellent section on CSS that covers basic concepts about CSS. I highly recommend beginners start off with Introduction to CSS, a quick but very informative starting point to getting your hands dirty with CSS.
17.CSS-Tricks
CSS-Tricks is a blog dedicated to the topic of CSS. You’ll find helpful posts such as what CSS Sprites are (in a nut shell), techniques for image replacements, and even screencasts on topics like conditional stylesheets.
18.CSS on Delicious
The CSS tag on Delicious is a great way to find popular links that relate to CSS. It allows you to see what people are currently reading.
19. SitePoint CSS Reference
SitePoint has a CSS reference section that discusses introductory level CSS topics. You can get a crash course on general CSS syntax and nomenclature onto slightly more advanced topics such as CSS hacks and filters.
20. CSSDog
CSSDog has a section for both beginners and more advanced developers. Aside from CSS lessons, their CSS Reference section - which lists quick guides and color references - are very helpful.
Tuesday, December 25, 2007
Logo Design: Links to Design a Better Logo
- LogoPond: A great source of Logo Design Inspiration
- Corporate 2.0: If Major Corporations had 2.0 Logos
Logo Creators: The
Albeit it won’t be the best, this is a great resource for getting a new Logo done fast when you are strapped for time. Also works for creating a placeholder logo while you work on the real deal.
Sources for Logo Design Tutorials
Looking for a certain style for your new logo? Between the two sources below, there are 64 logo design tutorials to choose from.
- eLogoDesign: 50 Logo Design Tutorials
- LogoTutorials: 14 Logo Design Tutorials. A few of them are worth a look.
Some Popular Logo Design Tutorials
Out of all the logo design tutorials available at the sources above, these are some of the ones that got the best feedback.
- Alleba: How to Make a Web 2.0 Logo
- BAMagazine: Designing a Logo with just Letters
- SpoonGraphics: Designing a Logo: From Concept Sketches to Completion
- DigitalWeb: The Process of Re-designing a Logo
Logo Design: 10 Links to Help You Design a Better Logo
Tuesday, November 27, 2007
Free web design resources for website design
To get designing using photoshop you will need some resources to help you. I will quickly run through some different resources which will help you:
Tutorials
Great for people new to designing to get the basics. Also good for some new tricks which people use. Websites I recommend are http://www.good-tutorials.com/ and http://www.pixel2life.com/.
Stock Photos/Images
Everyone needs good photos from time to time to use on their designs. Some good free ones which I use are: http://www.sxc.hu/ and http://www.deviantart.com/.
Free Photoshop Brushes/Shapes/Patterns
These really do come in use when you are designing. You can download a variety of patterns/ brushes and custom shapes for photoshop. The place which I use for this is deviantart.com. You must check the details about each that you download as they are designed by users of the websites and sometimes require link backs.
Free Renders
Renders are images which have been cut so they have no background. Often people use renders of celebrities or characters from computer games. They really do come in use if you know how to use them. A nice site for free renders is http://www.planetrenders.net/. There are also many more so just search around if you can’t find a render which you like from there.
Source : http://uniongraphite.com/web-newbies/free-webdesign-resources
Thursday, October 11, 2007
Website Design tips to Plan your website
. Define the structure
Give the customer the information they will be looking for and help them find it easily and quickly. If you offer a large range of products, use a search facility, if your products carry a detailed specification, add a “click for specification” button. Keep the structure and progression as simple and logical as possible.
. Save your Credibility
Few things are more likely to cost you customers which are incorrect information or poorly written or misspelled text on your business website. It will destroy your credibility. Read through all your text carefully and double check all the facts, get someone else to proof read it and run the text through a spell checker after checking your language settings (English – US or UK for example). Then do it all again, twice!
. Check Facts, Spelling and Grammar
Use HTML correctly. Even if you use a WYSIWYG editor, a core knowledge will help you sort out the unexpected problems that will inevitably arise. Try to hand code your site in Notepad. If you can do this, you will be able to locate errors extremely quickly.
. Home Page
Provide a way back to your home page on every single page of your site, via a logo, icon or a simple text link.
. Consistentence
If you're planning a consistent look to your site, do yourself an enormous favour, and build a template. Add temporary 'blah blah' text to cover as many options as possible including, heading(s), paragraphs, text highlights, links etc. Build, then tune your style sheets to display these texts to your satisfaction (or HTML tags if you're not using style sheets). When it's all to your satisfaction, THEN add your content! This will save you a huge amount of time.
. Templated Site
You have built a templated site, added content to 100 pages, and now you want to make a major change. Doh! Don't go through each page finding and changing the offending bit by hand. Search for, and download a 'multifile find and replace utility' from the Net, than make all those changes in an instant.
. White Space
You don't have to fill the whole screen with text and graphics. Use 'white space' effectively, and allow elements to breathe.
Source : http://www.3fn.net/guide/Essential_Web_Site_Design_Tips.html
Give the customer the information they will be looking for and help them find it easily and quickly. If you offer a large range of products, use a search facility, if your products carry a detailed specification, add a “click for specification” button. Keep the structure and progression as simple and logical as possible.
. Save your Credibility
Few things are more likely to cost you customers which are incorrect information or poorly written or misspelled text on your business website. It will destroy your credibility. Read through all your text carefully and double check all the facts, get someone else to proof read it and run the text through a spell checker after checking your language settings (English – US or UK for example). Then do it all again, twice!
. Check Facts, Spelling and Grammar
Use HTML correctly. Even if you use a WYSIWYG editor, a core knowledge will help you sort out the unexpected problems that will inevitably arise. Try to hand code your site in Notepad. If you can do this, you will be able to locate errors extremely quickly.
. Home Page
Provide a way back to your home page on every single page of your site, via a logo, icon or a simple text link.
. Consistentence
If you're planning a consistent look to your site, do yourself an enormous favour, and build a template. Add temporary 'blah blah' text to cover as many options as possible including, heading(s), paragraphs, text highlights, links etc. Build, then tune your style sheets to display these texts to your satisfaction (or HTML tags if you're not using style sheets). When it's all to your satisfaction, THEN add your content! This will save you a huge amount of time.
. Templated Site
You have built a templated site, added content to 100 pages, and now you want to make a major change. Doh! Don't go through each page finding and changing the offending bit by hand. Search for, and download a 'multifile find and replace utility' from the Net, than make all those changes in an instant.
. White Space
You don't have to fill the whole screen with text and graphics. Use 'white space' effectively, and allow elements to breathe.
Source : http://www.3fn.net/guide/Essential_Web_Site_Design_Tips.html
Wednesday, September 5, 2007
Design tips which every website designer should know
- . Every single feature of your website must either
. Help your visitors achieve their goals , or
. Support the site's goals without obstructing the visitor's goals - Color is an individual preference but colors have an affect on people's emotions. You need to go with the flow. If you have a financial investment site then conservative colors seem to follow. If you sell beach items then lots of fun colors apply. First think about your audience and you will know the color scheme.
- website design should have 3 levels of web pages - no more, no less. Any deeper than this, and visitors can very easily become 'lost. If levels of web pages is less than 3 levels then website appears to be too light weight.
- Avoid use of bright colours, patterned backgrounds in website as much as possible
- website that uses templates is not very appealing ( most often ) .
- Website designer have about 5-6 seconds to make first impression of their website . Therefore, the first screen should display useful info in about 5 seconds.
Monday, September 3, 2007
Brilliant design tips to catch Visitors on Website
Browser/platform compatibility + Professional Design + Quick loading + Simple, excellent, Effective navigation + Provide a whole Site Wide Search + New, Fresh content + Use Accurate, Strong Headlines to Tell Readers what the webpage is About + Use informative description of the page
= a Professional, Competent, User-friendly website
= a Professional, Competent, User-friendly website
Friday, August 24, 2007
Design an Eye Catching Website
Below are the tips for designing an eye catching website which you will be proud of .
1 Consistency : It is always better to keep your design from page to page consistent so that the visitor knows that he is still in the same site and didn't jump to another site.
The page or site color scheme and navigation should be the same throughout the site.
2 Navigation : Always keep your navigation simple . Tell the visitor which page he is on . This can be done in many ways and the way which I think is the best way is to remove the link from the page which he is on .
For example, Let's suppose that you have the following navigation text on your home page ...
Home -- About Us -- Contact Us -- Services -- Order
Then suppose that the visitor clicked on the services page .
When the services page is loaded then the link which says services will not be a link instead it will be a normal text with different color . That helps the visitor know which page he is on .
If you are using graphic buttons then You can provide a different version of the button and make it without a link .
3 Use Browser Safe Colors : What are browser safe colors anyway? Browser safe colors are 216 colors which remain the same when displayed on any computer or browser.
Colors which are not browser safe may dither when displayed some computers ,meaning if a computer can't display a color 100% it will then display the nearest color to it instead.
So make sure that you use browser safe colors throughout your site.
4 Minimize the use of Graphics : A site with a lot of graphics will take forever to load. Even though graphics make sites better but it is always better to minimize the use of them for many reasons including but not limited to the following :
A lot of Graphics make your site or pages take forever to load which will make the visitor of your website close the page or hit the back button .
Search Engine Spiders have problems with graphics because they will not be able to index any page that has a lot of graphics .
Of course you can use small, yet fast loading graphics instead of the big ones . Also You can use them as a table or cell background but make sure that the text is readable before the background image is loaded.
And don't forget to use the ALT tag for all of your images .
5 Flash : Flash is is much like the graphics . Even though Flash brings your site to life but avoid using a lot of it on your site because that will make it load forever .
You can use small Flash animations and also You should give the url of the Flash Plug-in for the visitors who haven't got the Flash Player on their computer.
After all You want people to be able to see your Flash animations .
So don't over use it because they say Flash is evil.
6 Frames : Frames are not good for many things including but not limited to the following :
Search engines have problems with them .
. The links can be opened into the wrong frame.
. Distracting scroll bars are displayed when the content doesn't fit it
Frames enable us to manage sites easily. Suppose you want to update the header of your website ,if you designed it with just an html then You will have to update all of the pages on the site but Frames made that easy by just updating one page and You will not have to update the rest.
There are many alternatives to the frames. You can use PHP Includes to include the desired file to the desired location .
You can use this code to do so .
. Where the filename.php will be the file name which you want to include.
But The page which you are going to insert the code must be saved as yourpage.php and have .php file extension
Also You can use Extended Server Side Includes which is like the PHP by using the following code
But The page which you are going to insert the code must be saved as yourpage.shtml and have .shtml file extension.
So avoid using Frames on any part of your site.
7 Organize Your site files well : It is good to organize your site files well and divide them into categories for easy file management.
For example suppose you have a lot of products and then you can organize them as follows
products/product1/ or products/nameofproduct/
So the url of the product will be like http://yourcompanyname.com/products/product1 or http://yourcompanyname.com/products/nameofproduct/
In that way You can organize your web files easily .
8 Use Limited Colors only : Avoid using many colors on your site . Limit your colors to four or six .
9 Links : Your links should be descriptive . And should be readable . Also Use one color for all of your major links .
These were some tips which is necessary to use for designing an eye catching website.
After all We all want to design great sites .
Abdillahi Abdillahi is a web designer, founder and president of http://kooshin.com , a company providing affordable web hosting and web design solutions to small to medium sized businesses and individuals. For more information , please visit http://kooshin.com
1 Consistency : It is always better to keep your design from page to page consistent so that the visitor knows that he is still in the same site and didn't jump to another site.
The page or site color scheme and navigation should be the same throughout the site.
2 Navigation : Always keep your navigation simple . Tell the visitor which page he is on . This can be done in many ways and the way which I think is the best way is to remove the link from the page which he is on .
For example, Let's suppose that you have the following navigation text on your home page ...
Home -- About Us -- Contact Us -- Services -- Order
Then suppose that the visitor clicked on the services page .
When the services page is loaded then the link which says services will not be a link instead it will be a normal text with different color . That helps the visitor know which page he is on .
If you are using graphic buttons then You can provide a different version of the button and make it without a link .
3 Use Browser Safe Colors : What are browser safe colors anyway? Browser safe colors are 216 colors which remain the same when displayed on any computer or browser.
Colors which are not browser safe may dither when displayed some computers ,meaning if a computer can't display a color 100% it will then display the nearest color to it instead.
So make sure that you use browser safe colors throughout your site.
4 Minimize the use of Graphics : A site with a lot of graphics will take forever to load. Even though graphics make sites better but it is always better to minimize the use of them for many reasons including but not limited to the following :
A lot of Graphics make your site or pages take forever to load which will make the visitor of your website close the page or hit the back button .
Search Engine Spiders have problems with graphics because they will not be able to index any page that has a lot of graphics .
Of course you can use small, yet fast loading graphics instead of the big ones . Also You can use them as a table or cell background but make sure that the text is readable before the background image is loaded.
And don't forget to use the ALT tag for all of your images .
5 Flash : Flash is is much like the graphics . Even though Flash brings your site to life but avoid using a lot of it on your site because that will make it load forever .
You can use small Flash animations and also You should give the url of the Flash Plug-in for the visitors who haven't got the Flash Player on their computer.
After all You want people to be able to see your Flash animations .
So don't over use it because they say Flash is evil.
6 Frames : Frames are not good for many things including but not limited to the following :
Search engines have problems with them .
. The links can be opened into the wrong frame.
. Distracting scroll bars are displayed when the content doesn't fit it
Frames enable us to manage sites easily. Suppose you want to update the header of your website ,if you designed it with just an html then You will have to update all of the pages on the site but Frames made that easy by just updating one page and You will not have to update the rest.
There are many alternatives to the frames. You can use PHP Includes to include the desired file to the desired location .
You can use this code to do so .
. Where the filename.php will be the file name which you want to include.
But The page which you are going to insert the code must be saved as yourpage.php and have .php file extension
Also You can use Extended Server Side Includes which is like the PHP by using the following code
But The page which you are going to insert the code must be saved as yourpage.shtml and have .shtml file extension.
So avoid using Frames on any part of your site.
7 Organize Your site files well : It is good to organize your site files well and divide them into categories for easy file management.
For example suppose you have a lot of products and then you can organize them as follows
products/product1/ or products/nameofproduct/
So the url of the product will be like http://yourcompanyname.com/products/product1 or http://yourcompanyname.com/products/nameofproduct/
In that way You can organize your web files easily .
8 Use Limited Colors only : Avoid using many colors on your site . Limit your colors to four or six .
9 Links : Your links should be descriptive . And should be readable . Also Use one color for all of your major links .
These were some tips which is necessary to use for designing an eye catching website.
After all We all want to design great sites .
Abdillahi Abdillahi is a web designer, founder and president of http://kooshin.com , a company providing affordable web hosting and web design solutions to small to medium sized businesses and individuals. For more information , please visit http://kooshin.com
Tuesday, May 29, 2007
Simple Design Tips for Non-Designers
Web design is an interestingly unique skill. Due to its infancy, it is a career in which many professionals have very little formal training. Designers may not have training in programming and programmers rarely have training in design. As much as I understand and appreciate design, I'm more of a programmer at heart. My design skills aren't very impressive. I've picked up a few little tricks over the past few months that I thought others more inclined to programming may find useful.
I've prepared the following quick list of tips that I've found useful in improving my design skills and appreciation of design. In some cases, I'm very aware that there are industry standard terms, but the point of this isn't to teach a full course on typography or color theory, but rather to provide some simple tips that can be used as a starting point for improving some basic design skills.
Don't Underestimate the Power of Typography
Experiment with different line-heights, letter-spacing, and word-spacing with your headlines and body text. Try using all uppercase in some situations. You may not realize it at first, but those kind of changes play a huge role in your visual design as well as readability. I'm not just talking about headlines either. Experiment with your body text fonts and spacing. You'll be amazed at the improvements. If you'd like to learn more, I strongly suggest the more detailed explanation of typography by Mark Boulton and Cameron Moll's advice on typeface selection.
Discover & Understand Your Unique Style
All too often, new designers look at other designer's for inspiration. This can definitely be useful, but is much more useful after you understand your own style. Embrace the way you design and what works for you before you try to draw inspiration from someone else's style.
When designing for clients, you always want to put their design needs before your style. However, it's alright for that design to have hints of your style. It's what makes your designs unique. Focus on their business needs first and determine what is appropriate. If you know yourself, you'll be able to use your own style better as a result.
Start Simple
If you want to really polish your design skills, try designing for a little while without extra graphics or photos. This forces you to have a better understanding of how the more subtle design elements work together to achieve their own state of zen. If there's no graphics, all you can worry about is typography, color, and layout. If that's all you've got to work with, you better bet you'll learn to understand your choices on a slightly deeper level.
Use a Variety of Colors
Finding the right colors can be difficult as well. Once you find them though, they can help a design fall right into place. Many new designers have a hard time using the right amount of colors. I've found the sweet spot to be around 4-5 colors not including black or white. They don't have to be completely unique colors, but you should at least try using different shades of a color. For example, Jon Hicks has always done this exceedingly well with different greens. If you need help picking out a color palette, find a photo you like and pixelate it. Using different colors helps add another layer of variety and interest.
Content is King
Trying to design without content is like trying to drive a car without fuel. You can't get anywhere. Pieces of content are your design. Whether it's body text, headlines, dates, photos, or graphics, if you don't have content to drive the design, you're going to have a rough time. I always start off with more content elements than I need and then start cutting them as I realize they aren't needed.
Start Big
Start out with your big elements first. Figure out a high level layout that makes sense for your content. Then once you have the page laid out, you can pick one piece of content at a time and figure out the details. Try designing just that one piece without any regard for the surrounding elements. This lets you focus and not get distracted by trying to do too much at once. Besides, you can always integrate all the pieces back together in the end. Also, when working on layouts, make sure you are very aware of how the reader's eye will move across the page. There should be one emphasis, with other parts that smoothly and seamlessly guide the eye across your design.
Worry About Details at the End
If you start designing your graphic bullets before you've even chosen a logical page layout or color scheme, you're getting ahead of yourself. Of course, you may find that the layout or color scheme need to change later, but that's alright. Just keep moving forward. Iron out the details after you've taken care of the big stuff.
Rapid Fire Design / Keep it Moving
If you sit there designing for hours and are never happy, that's just how it goes. You'll always be your toughest critic, and the longer you look at your work, the less you're going to like it. In these situations, I'll timebox myself. I give myself 10 minutes and force myself to work as fast possible to create a basic design. Then I repeat it a few more times until I have several to compare. During this process, I don't undo anything, I just keep it going and force myself to make happy mistakes. Don't let yourself get hung up on pixels or details, just make some sort of forward progress.
Summary
These are by no means meant to be a deeply professional and highly profound series of rules. I chose not to try to explain kerning, leading, gutters, or any of that. I just wanted to throw out some basic tips that have helped me improve my design chops or break out of irritating ruts.
Author : Garrett
I've prepared the following quick list of tips that I've found useful in improving my design skills and appreciation of design. In some cases, I'm very aware that there are industry standard terms, but the point of this isn't to teach a full course on typography or color theory, but rather to provide some simple tips that can be used as a starting point for improving some basic design skills.
Don't Underestimate the Power of Typography
Experiment with different line-heights, letter-spacing, and word-spacing with your headlines and body text. Try using all uppercase in some situations. You may not realize it at first, but those kind of changes play a huge role in your visual design as well as readability. I'm not just talking about headlines either. Experiment with your body text fonts and spacing. You'll be amazed at the improvements. If you'd like to learn more, I strongly suggest the more detailed explanation of typography by Mark Boulton and Cameron Moll's advice on typeface selection.
Discover & Understand Your Unique Style
All too often, new designers look at other designer's for inspiration. This can definitely be useful, but is much more useful after you understand your own style. Embrace the way you design and what works for you before you try to draw inspiration from someone else's style.
When designing for clients, you always want to put their design needs before your style. However, it's alright for that design to have hints of your style. It's what makes your designs unique. Focus on their business needs first and determine what is appropriate. If you know yourself, you'll be able to use your own style better as a result.
Start Simple
If you want to really polish your design skills, try designing for a little while without extra graphics or photos. This forces you to have a better understanding of how the more subtle design elements work together to achieve their own state of zen. If there's no graphics, all you can worry about is typography, color, and layout. If that's all you've got to work with, you better bet you'll learn to understand your choices on a slightly deeper level.
Use a Variety of Colors
Finding the right colors can be difficult as well. Once you find them though, they can help a design fall right into place. Many new designers have a hard time using the right amount of colors. I've found the sweet spot to be around 4-5 colors not including black or white. They don't have to be completely unique colors, but you should at least try using different shades of a color. For example, Jon Hicks has always done this exceedingly well with different greens. If you need help picking out a color palette, find a photo you like and pixelate it. Using different colors helps add another layer of variety and interest.
Content is King
Trying to design without content is like trying to drive a car without fuel. You can't get anywhere. Pieces of content are your design. Whether it's body text, headlines, dates, photos, or graphics, if you don't have content to drive the design, you're going to have a rough time. I always start off with more content elements than I need and then start cutting them as I realize they aren't needed.
Start Big
Start out with your big elements first. Figure out a high level layout that makes sense for your content. Then once you have the page laid out, you can pick one piece of content at a time and figure out the details. Try designing just that one piece without any regard for the surrounding elements. This lets you focus and not get distracted by trying to do too much at once. Besides, you can always integrate all the pieces back together in the end. Also, when working on layouts, make sure you are very aware of how the reader's eye will move across the page. There should be one emphasis, with other parts that smoothly and seamlessly guide the eye across your design.
Worry About Details at the End
If you start designing your graphic bullets before you've even chosen a logical page layout or color scheme, you're getting ahead of yourself. Of course, you may find that the layout or color scheme need to change later, but that's alright. Just keep moving forward. Iron out the details after you've taken care of the big stuff.
Rapid Fire Design / Keep it Moving
If you sit there designing for hours and are never happy, that's just how it goes. You'll always be your toughest critic, and the longer you look at your work, the less you're going to like it. In these situations, I'll timebox myself. I give myself 10 minutes and force myself to work as fast possible to create a basic design. Then I repeat it a few more times until I have several to compare. During this process, I don't undo anything, I just keep it going and force myself to make happy mistakes. Don't let yourself get hung up on pixels or details, just make some sort of forward progress.
Summary
These are by no means meant to be a deeply professional and highly profound series of rules. I chose not to try to explain kerning, leading, gutters, or any of that. I just wanted to throw out some basic tips that have helped me improve my design chops or break out of irritating ruts.
Author : Garrett
Tuesday, May 1, 2007
Web Design Tips And Techniques For Site Usability
If you are a web designer or a webmaster, website design is one of the most important tasks you do. In designing a site, you need to create a design that is easy for users to use, is compatible with different systems, and is search engine friendly.
Making a site that is user friendly:
In some ways, creating a user friendly site is just common sense - other aspects are not so obvious, though. Obviously, you'll want to make the text easy to read, the navigation links easy to find, etc. Here are a few other tips: Put contact information on every page. Make it obvious what you want the user to do after reading a page.. Make it easy for the user to reach your homepage from any other page
Making a site that is cross-platform compatible:
The main factors you need to consider in platform compatibility are the user's browser, screen resolution, color depth, and plug ins.
Browser compatibility is easy - just test your site in various browsers, and fix any incompatibilities. The same for screen resolution - just be sure that you site looks good and is easily navigated with any common screen resolution. Color depth is also relatively simple. Just restrict your design to using web safe colors.
Plug-ins can be a little more complicated. If at all possible, try to use media that is compatible with most versions of a plug in. For example, try not to use a flash movie that requires the latest version of a flash player.
Making a site that is search engine friendly:
The biggest thing you can do to make your site friendly to the search engines is to give it a good link structure. Be sure that each page on your site is linked to from at least two other pages with a plain text link. Image links are OK, but not as good as optimized text links. Javascript and flash links are very bad for search engine usability.
Visit Web Design London for help getting a great site design: http://www.datadial.net
Article Source: http://EzineArticles.com/?expert=Gabriel_J._Adams
Making a site that is user friendly:
In some ways, creating a user friendly site is just common sense - other aspects are not so obvious, though. Obviously, you'll want to make the text easy to read, the navigation links easy to find, etc. Here are a few other tips: Put contact information on every page. Make it obvious what you want the user to do after reading a page.. Make it easy for the user to reach your homepage from any other page
Making a site that is cross-platform compatible:
The main factors you need to consider in platform compatibility are the user's browser, screen resolution, color depth, and plug ins.
Browser compatibility is easy - just test your site in various browsers, and fix any incompatibilities. The same for screen resolution - just be sure that you site looks good and is easily navigated with any common screen resolution. Color depth is also relatively simple. Just restrict your design to using web safe colors.
Plug-ins can be a little more complicated. If at all possible, try to use media that is compatible with most versions of a plug in. For example, try not to use a flash movie that requires the latest version of a flash player.
Making a site that is search engine friendly:
The biggest thing you can do to make your site friendly to the search engines is to give it a good link structure. Be sure that each page on your site is linked to from at least two other pages with a plain text link. Image links are OK, but not as good as optimized text links. Javascript and flash links are very bad for search engine usability.
Visit Web Design London for help getting a great site design: http://www.datadial.net
Article Source: http://EzineArticles.com/?expert=Gabriel_J._Adams
Subscribe to:
Posts (Atom)
