Tips for Redesigning a Site

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.

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.

Great Website Design Development Resources

Free Font Downloads

Free Fonts and Other Resources: Web Page Publicity

Huge Collection of Free Fonts: Da Font

Nice Selection of Free Fonts: Urban Fonts

Fonts and Other Freebies: Simply The Best Fonts

1001 Free Fonts for Download: 1001 Free Fonts

Over 9000 Free Fonts: Creamundo

A Small List of Free Fonts: Best Free Fonts

Paid Font Sites

A Large Selection of Fonts for Purchase: My Fonts

Quality Fonts for Purchase: Veer

Information and Fonts for Purchase: Fonts

Font Resources and Sales: Font Haus

Stock Photos and Vectors

The Best Stock Photo and Vector Website: iStockphoto

Quality Photos for Purchase: Shutterstock

Stock Photos and Other Pay Downloads: Veer

Quality, Affordable Vectors for Purchase: Vector Stock

Stock Photos With a Great Selection: Jupiter Images

Stock Photos and Photography Network: Stock Vault

Quality Stock Photos: Corbis

Free Photos and Vectors

Submit Vectors or Download Others for Free: Open Source Vector Art

Tons of Great Free Vectors and Photos: Deviant Art

59 Pages of Free Vector Art: Free Vectors

Large Gallery of Free Vectors: Vecteezy

Quality Vector Downloads: Vector 4 Free

Neat Collection of Free Photos From Around the World: Free Stock Photos

Great Collection of Free Vectors and Resources: You The Designer

Great Free Stock Photos: Free Foto

A List of Free Downloads: Bittbox

700 Free Stock Photos: Free Picture Click

Website Templates

A Few High Quality Wordpress Themes: Evan Eckard

Over 2000 Free Web Templates: OSWD

A Small Selection of Nice Templates: Open Source Templates

A Large List of Free Templates: Free CSS Templates

Nice Wordpress Templates for Download: Free CSS Templates

A Combination of Free and Pay Templates: Free Templates Online

Affordable, Quality Templates: Templamatic

Free Blog Templates: Blogging Themes

CSS Galleries

The Best Sites on the Web: CSS Remix

A Frequently Updated Gallery of Sites: CSS Mania

An Organized List of Nice Sites: Most Inspired

CSS Gallery of Quality Sites: CSS Design Yorkshire

A Selection of Only Nature Based Sites: CSS Nature

A Selective List of Well Designed Sites: Web Creme

High Quality CSS Showcase: CSS Tux

Nice CSS Websites: The Designed Tree

A CSS Collection Organized by Category: CSS Elite

Inspiration

A Great Site About Everything Type: I Love Typography

An Incredible Illustrator: Burst of Beaden

A Great Designer and Illustrator: Fully Illustrated

Customizable List of Design Resources: Cork Dump

The Society of Graphic Designers of Canada: GDC

Freelance Advice Blog and Resources: Freelance Switch

Amazing Collection of Logos: Logopond

Stunning Desktop Wallpapers: Desktopography

A Graphic Design Magazine: Computer Arts

Tutorials

The Best Photoshop Tutorials: PSD Tuts

A Talented Photoshop Designer: Abduzeedo

Photoshop Tutorials and Web Design Resources: Web Design Library

Tutorials for Photoshop, Illustrator and More: Tutorial Vault

A Few Neat Illustrator and Photoshop Tutorials: Design Spice

Great Photoshop Tutorials and Downloads: PS Wish

Tutorials for Every Computer Program: Tutorialing

Free Photoshop Downloads

A Couple Free Patterns for Download: Design Spice

Free Photoshop Brushes: Design Fruit

Free Photoshop Actions: Visual Blast

Tons of Free Photoshop Brushes: Brusheezy

A Few Nice Free Photoshop Brushes: Obsidian Dawn

Great Grunge Brushes and Others: Photoshop Brushes

Free Background Patterns for Photoshop: Free BG

Over 150 Free Background Patterns: Squidfingers

Design Blogs

A Frequently Updated Design Blog: Veerle’s Blog

A Design Magazine and Blog: Smashing Magazine

A European Design Blog: Design In Europe

A Unique Nerdy Blog: Design You Trust

The Personal Blog of a Graphic Designer: Larissa Meek

A German Design Blog: David Hellmann

The Blog of a Canadian Geek/Model: Mostly Lisa

A Graphic Design Blog: Bittbox

A Blog About Freelance Graphic Design Advice: Freelance Switch

A Design Blog Full of Resources: You The Designer

A Popular Design Blog: Fazai 38

Colour Palettes

A Flash Site of User Generated Colour Palettes: Adobe Kuler

Using Colours From Photos: Colr

Colours, Palettes and Patterns: COLOURlovers

A Colour Palette Generated From Your Images: Color Palette Generator

See The Results of Your Palette on a Website: Color Spire

Create and Email Colour Palettes: Color Blender

Tips and Tricks

Vector Do’s and Dont’s: iStockphoto

The Web Design Polish: PSD Tuts

Promote Your Design Business: Freelance Switch

How To Increase Web Traffic: You The Designer

Coders

Quality Programming: XHTMLized

Professional Web Slicing: PSD Slicing

XHTML in 24 Hours: We Use Scissors

Affordable, Quality Coding: PSD2HTML

From Design to Code, Quick and Cheap: Front Enders

Designer Geek Merch

Great Nerdy Clothing and Accessories: Veer

Nice T-Shirt Collection: Design Loot

Graphic Design T-Shirts and Accessories: Cafepress

Geek Merchandise For Everyone: Think Geek

Graphic Design T-Shirts: Zazzle

Unique T-Shirt Designs You Can’t Find Anywhere Else: Allmightys

Experienced Web Designer Resource

24Ways to Impress Your Friends
Web design and development articles and tutorial for advent.

37 Signals
Weblog by 37signals about design, business, experience, simplicity, the web, culture, and more.

A List Apart
Magazine that explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Accessify
Tools, wizards, articles and tutorials on Web Accessibility for the conscientious web developer

ActionScript
A large online community for Flash, Flex and ActionScript developers and designers at all skill levels.

AlastairC
A technically oriented site about the web and how people use it by Alastair Campbell.

Core77
Industrial Design content and community site - articles, discussions, interviews and resources.

Coudal
The site edited by Coudal Partners, a design, advertising and interactive studio in Chicago, as an ongoing experiment in web publishing, design and commerce.

CSS Mania
The most updated CSS showcase all over the globe.

CSS Remix
A Fresh Blend of the Best-designed Web 2.0 Sites

CSS Beauty
A project focused on providing its audience with a database of well designed CSS based websites from around the world.

Design Observer
Features critical essays and selected writings of design culture.

Design is Kinky
A digital publication geared to graphic design in all media. Profiles, mug shots, theory and galleries.

Digital Web Magazine
Articles, tutorials, features, reviews, classified advertisements and other resources for webmasters.

Farm
A free Singapore’s online arts and design web network with local event listings, creative opportunities and websites featuring local creatives and their works.

FFFound
A web service that not only allows the users to post and share their favorite images found on the web, but also dynamically recommends each user’s tastes and interests for an inspirational image-bookmarking experience.

graphicPUSH
Contains articles on web design, creative management, hiring, freelancing, business of design, and free icons, including blog icons.

JuicyStudio
Programming and web development tutorials, including ASP, PHP, and javascript.

K10K
The designers’ lunchbox, a global digital design portal. Updated weekly with a new issue, updated hourly with global design news.

Monday by Noon
A resource established for those interested in Web development, Web standards, the semantics of Web, Web accessibility, and Web Design.

Smashing Magazine
A weblog dedicated to web-developers and designers.

Style Boost
A showcase that exemplifies outstanding visual design and collects the very best design links on the web.

Think Vitamin
Subversion for Designers by Chris Nagele.

WebCredible
User experience research & design consultancy, offering a host of usability & accessibility services. Site includes 150+ free articles.

Web Creme
Web design inspiration

Source : Professional Web Designers Resource

Free Icons Download - website design resource

Free Icons download has a very exclusive collection which you can not find on other popular icons websites. The quality of the icons is really good and most of the icons are 256×256px.

The icons are organized by 15 categories, and can also be organized by “Most Downloaded” or “Most Popular“.

The website also offers individual designers or design companies the possibility to upload their designs and showcase them to the world. So if you want to showcase your icons, or you are looking for great, high-quality, free icons for your designs, Free Icons Download is what you are looking for.

Source : Free icons download - a cool free icons resource | CrazyLeaf Design Blog

25 websites - Beautiful appearance with Less work

Rainfall Daffinson
A design firm whose website uses a minimalistic approach to show its work.

John Merrells
The blog of entrepreneur John Merrells uses a simple layout with a distinct header image.

SEO Design Studio
A UK SEO Design company that makes a nice use of a few colors.

Ben Hulse Design
The portfolio of a designer and photographer.

Amy Levy Public Relations
Los Angeles based PR consultant with a very simple and attractive layout.

Jan Reichle
A director and cinematographer with black and white homepage.

Brand Spanking New
A three-columned blog whose simple layout allows the content to stand out.

SMO Blog
A nice minimalistic WordPress blog with an attractive color scheme on white background.

Frieze Magazine
A European magazine of art and culture, Frieze uses several photographs to complement a simple, but beautiful, design.

Mitch Bryson
A portfolio of a UK designer.

simpleModus
Another design company that uses a simple design.

Daniel Scrivner
The portfolio of a web and print designer.

Indie Labs
The home of a two-man team of web developers.

Jeff Croft
The blog of an accomplished web and graphic designer.

Kind Company
Web and print design company that focuses on simple, usable designs.

Vitec
The portfolio of a freelance web designer.

Rikcat Industries
A portfolio that uses a black and white look.

The Morning News
A different kind of news site that doesn’t include a lot of the extra design elements found on most news sites.

Cracked Shell
A California-based designer with a very nice portfolio site.

WordPress
The home of leading blogging and CMS provider.

Mark Boulton Design
A small design studio that focuses on simple designs.

AIGA/NY
The New York Chapter of a professional association for design.

Jonno Riekwel
The minimalistic portfolio of designer Jonno Riekwel.

None-Design Media
A portfolio site that uses a black background.

Wan Zafran
A personal site that uses minimal amounts of color.

Source : http://vandelaydesign.com/blog/design/minimalistic-web-design/