CSS and Web Design Articles



7 things (you might want) to avoid in web design!
Posted by admin, 9 Months, 1 Week, 5 Days, 1 Hour, 54 Minutes ago

Thuiven.com is a site I visit regularly. It always has some no-bull web design articles which are very useful, interesting and honest.

The latest post is definitely worth a read. Dor Dan explains the 7 most annoying things which web designers/programmers do. This includes pop-up windows, poor navigation and overused trends.

Click here for the full article

[3 comments]

 

Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided
Posted by admin, 9 Months, 2 Weeks, 15 Hours, 36 Minutes ago

One of the web 2.0 design and layout trends which I actually quite like is what I am going to call "clean and horizontally divided". Catchy name eh?

Every trend should have a poster-boy, and the poster-boy for this trend is *drum roll* shoeboxed.com!



So, hopefully from the above screenshot you can see what I am talking about when I say "horizontally divided". You can see there are several sections of the website which are all divided by different colors and layout. Each segment serves a specific purpose, with the amount of "real" information increasing as you move further down the page, and the amount of "marketing" information decreasing as you move down the page.

Before we analyze the elements of this trend, here are some more sites which are worth looking at to give you an idea of what this trend is about:

Wishlistr.com


Blogadda.com


ChurchPlantMedia.com


Corking Design


Dibusoft


Enrichment


BizMagic


NetNova


Studio3K


YikeSite


Oak Tree Creative


Revolver




OK, enough of that! Lets get to it!

Top Segment/Logo


Looking at all the above screenshots you will see that most of these sites follow a fairly similar trend for their logos and top segments.

The top-most segment tends to contain a darker background with a very simple text based logo:




The logos may also have a small amount of decorative extras, but nothing too over the top:




These top segments tend to contain very little elements other than the logo. This leads to a clean look where the user is not overloaded with information and navigation options at the top of the page.

Other Segments


The second segment tends to contain large typography and a bit of catch-phrase or selling point for the website.




Third and fourth segments tend to explain the website or product in more detail (e.g. feature-list, screenshots and focus points).





Colors


The color schemes on these websites vary. Gradients are used extensively but subtlety. Black and light blues feature heavily, with splashes of vibrant colors in large icons on the sites.

Let's take a look at the more vibrant of the color schemes:













Icons/Vector/Characters


Graphics play an important part in the overall look-and-feel of this trend. We have already mentioned the use of gradients, but in addition to this is vector cartoons and catchy icons.

Vector cartoon characters are visually appealing and help brand a website. They also make the user feel like the application/website is very easy to use:




Icons and badges also help add a splash of color to the site. They can also draw attention to the more marketable aspects of the product/application/service.




Navigation


A big theme of this trend is simple, effective and clean. In order to achieve the clean feel, simple navigation is a key. In the sites we have looked at, there is a maximum of seven menu items present on the home page. Some even have as little as three menu items (Home, Login, Sign up).




So there you have it - a complete analysis of the "clean, colorful and horizontally divided" web 2.0 trend. I hope you are able to use this as a tool to help your own creativity if you choose to design a site which fits into this trend.

I hope to do further analysis on other web 2.0 trends - it is rather time consuming though so let me know if this is useful.

[84 comments]

 

Free RSS Icons
Posted by admin, 9 Months, 2 Weeks, 1 Day, 15 Hours, 21 Minutes ago

Here are some fantastic looking free RSS icons created by a wonderful designer - Nyssa!
These icons are totally free to use and unique.



Click here to see Nyssa's blog post

[1 comments]

 

Ultimate Web 2.0 Gradients - FREE Download
Posted by admin, 9 Months, 2 Weeks, 4 Days, 2 Hours, 2 Minutes ago

The wonderful people at Desziner Folio have produced some great "web 2.0" style gradients which are free to use. They have put them all into one Photoshop Gradient file so all you have to do is drop it into your plugins folder and voila!

"Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient - As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff.

I hope v2.0 was helpful a lot. Now this current version includes almost all the possible gradient.

Feel free to use these cool set of gradients anywhere but please don't forget to share this too."



Click here to grab the file

[4 comments]

 

40+ Excellent Freefonts For Professional Design
Posted by admin, 9 Months, 2 Weeks, 4 Days, 2 Hours, 10 Minutes ago

Sourced from SmashingMagazine:

"The importance of typography in design can't be overestimated. The accuracy, precision and balance of geometric forms can give letters the elegance and sharpness they deserve. Besides, elegant fonts can help to convey the message in a more convenient way. In fact, while there are many excellent professional fonts (we've presented some of them in our article 80 Beautiful Typefaces For Professional Design) there are literally thousands of free low-quality fonts which you would never use for professional designs.

Quality costs. The price of "bulletproof" fonts usually reflects their quality and starts at 50$ per typeface. However, before purchasing a font you will probably use only once in your designs you might want to take a glance at outstanding free alternatives first.

Over the last year we've been observing typo-designers and their works; we've regularly collected high-quality fonts available for free download and free to use for personal or/and commercial projects. In this article we'd like to present an overview of over 40 excellent free fonts you might use for your professional designs in 2008. What is your favourite?"



Click here for the full article

[0 comments]

 

Archive



January 2008
November 2007
October 2007
September 2007