Noupe.com has created a small showcase of more than 70 outstanding header graphics with excellent use of visual elements and interface design. This is an excellent example of current trends in Web development.
Take a look at this article @ http://www.noupe.com/design/70-visually-impressing-header-graphics.html
Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has established as a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.
We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.
Continue reading 10 Principles Of Effective Web Design
Imagine that you are designing an online-store. Since stakeholders are only interested in the number of sells, the success of your work directly depends on how well you manage to drive users to the “Checkout”-button. In this case you might want to consider some design approaches which will set you apart from your competitors. After all, the probability that they’ve done it wrongly is extremely high.One of the simplest examples of flawed design decisions is the incorrect use of the shopping cart icon — a traditional icon which stands for the virtual holding place for any products of the store. Used properly, this little yet powerful element can help users to buy a product as quickly and painless as possible. As such, it is essential for the purchasing procedure and therefore deserves to be considered carefully during the design process.
Read the rest of Shopping Carts Gallery: Examples and Good Practices
Grid systems allow a Web developer to layout pages in an organized and easy to read manner. There are many articles on the Web about using grid systems and also many tools for designing with grids. I thought I would outline some of the articles and tools that you might find useful:
A good place to start learning about grid systems is the article Grids: an invisible foundation at Ideabook.com. This is an easy to understand, 10 minute overview of how grid systems work. GRIDS MAKE EYES HAPPY: HOW TO USE GRIDS is also an informative read. Designing with a Grid also offers a good introduction to using grids and a sample grid PSD (Photoshop) file.
Tutorial Blog - A roundup of the best articles on grid systems. See article: Grid systems in Web Design
Web Style Guide - An easy to understand introduction to using a grid system for most new designers. See article: Design grids for Web pages
DesignbyGrid.com - Is an entire site devoted to using grid systems for design. There are many interesting and informative articles at this site in addition to examples.
ESWAT - This framework is meant to remove the hassle of recreating the same folders, HTML tags, CSS rules, Photoshop guides, etc. for every new project, and help create grid-based layouts in Photoshop to boot.
See article: ESWAT web project framework
Smiley Cat Web Design - Here you can download a gif or png file of a grid that you can attach to any Web page you are developing as a background image. This grid will help you to layout objects precisely. See article: Using a Background Image Grid to Lay Out Your Web Site
Air Bag Industries - Has a terrific ruler that you can download and apply with CSS as a background image on any element. See article: Ruler
Mark Boulton - Has numerous articles on grid systems including Why Use a Grid and a Five Simple Steps to Designing a Grid System.
Be sure to read the article Oh Yeeaahh! at Subtraction which is about redesigning a familiar web site with a grid based system. This article includes an excellent, 152 page presentation, Grids are Good, to read. (Please do not print this presentation in our temporary class)
If you haven’t found enough grids to work with either as background images or in your favorite image editing software try Grid Designer to generate a grid with your own specifications.
Finally, there are several frameworks available for use by developers. Blueprintcss by Google (tutorial) and Yahoo! UI are two framework sites to help you to get a head start on your Web development process.
Digital Web Magazine, an outstanding resource for web developers, has an excellent series of articles on design. The first three articles have been mentioned here before, but here are links to the articles:
Part four of this series, A Web Design Review, is now available. This article discusses eight CSS Zen Garden designs. This article pulls the series together, giving examples of most of the techniques discussed in the previous articles.
Designing for the Web is an excellent article that discusses the constraints a designer must face when developing a web page/site. The article discusses resolution, browsers, percentage vs. pixel based design, color, graphics, text, and accessibility and usability.
Seems that web design and development trends for 2006 is the hot topic in blog land. Both Cameron Moll and Andy Budd have posts about the web development trends in the new year.
There are also several articles and posts on fonts and typography surfacing lately. SitePoint offers The Anatomy of Web Fonts which is a good article on typefaces for the web; the only drawback is the lack of discussion of scalable fonts.
The Elements of Typographic Style Applied to the Web is a companion site for the book Elements of Typographic…
Mark Boulton blogged Semantic Typography: Bridging the XHTML gap - links and patterns between typographic theory and Web Standards.
The Beauty of Simplicity describes why making things simple is the new competitive advantage.
The subject of email design comes up quite a bit in class. I thought you might find this article Email Design Guidelines for 2006 helpful.
Open Source Web Design is a community of designers and site owners sharing free web design templates as well as web design information.
Designing a Rainbow - Sexy Hot Colors - Lorelle on WordPress has a wonderful roundup of color resources on her blog today. Yummy!
graphicPUSH offers a Blog Icon Pack, a set of free icons for your blog or web site. Take a look at the graphicPush archives, there are a lot of interesting and informative articles.
WordPress.com is now offering free, WordPress based, blog hosting accounts to all; you no longer need an invitation to sign-up. Speaking of WordPress, WordPress 2.0 Beta 1 is now available.
Brothercake has a free CSS based simple website menu that you can download, customize and use on your sites. This zip package includes the necessary CSS, JavaScript, and XHTML to create both horizontal and vertical list menus.
In addition to validating HTML, XHTML, and CSS the W3C now offers an RSS/Atom Feed Validator.
php-editors has a list of PHP editors which includes licensing information, platform specs, and user rankings.
Ten Easy Ways to Improve Your Resume - Katharine Hansen offers ten tips for improving your resume. You may also be interested in reading this post made on Craigslist on Tips for applying to a job from Craigslist - Good tips for making your cover letter stand out from the rest. 25 Words That Can Hurt Your Résumé may also be helpful when you’re revamping your resume.
MaxDesign has an excellent Basic Web Standards Workshop that I would recommend that you all read. It outlines xhtml, standards, css, accessibility, and css issues and bugs.
Yahoo Site Explorer allows you to explore all of the pages in a domain. Simply enter the web sites address that you would like to explore and Yahoo will display all of the site pages that have been indexed by Yahoo. It’s a great way to quickly display an index or site map of a site that you may enjoy.
Are you still unsure about tags and how to tag your content that you’re bookmarking? Tagyu suggests tags for your content. Give it a URL or some text, and it will give you some suggestions for tags.
Goggle now has an RSS feed reader. Just type the topic that you are looking for and search; Google will find related content. You can then subscribe and read the RSS feeds.
Digital Web Magazine has two design articles that you may want to review: Principles of Design and Elements of Design.