Day 17: 75+ Resources to Help You Design Your Website

Over the past few days we’ve been looking at how important your business website’s design is and different ways you can get it done.  Today’s post is a huge list of resources that will aid you in designing your website/blog.  Some of these will be tools you can use and others will be articles you can refer to.  All in all, I hope this exhaustive list will help you design your website even if you have absolutely no prior experience.

1. HTML & CSS

HTML and CSS are the basic building blocks of every website.  HTML is the abbreviation of “Hyper Text Markup Language” and defines every single element on a web page.  CSS is the abbreviation of “Cascading Style Sheets”, and this defines how every element on your web page appears.  For example, if HTML is used to start a new paragraph of text, CSS can define the color, font and overall appearance of that paragraph.

If you are planning to design or maintain your website on your own, you will need to know at least a little bit of HTML & CSS.  But you don’t have to worry if you don’t; the sites mentioned below will arm you with a basic knowledge of these languages.

HTML and CSS Tutorials

w3schools

W3 Schools  – You will find lot of useful information here — including HTML, CSS, XML tutorials {In fact, it covers all the major web designing languages}.  What I really like about this website is the ‘Try it Yourself ‘ option given with every tutorial.  You can try out the code yourself or make changes and see how those changes affect the final appearance.  I learned much of my HTML and CSS from this website.

HTML Dog – HTML and CSS tutorials, references, and articles.

A Beginner’s Guide to HTML & CSS by Shay Howe – An easy to follow yet comprehensive guide to learn the fundamentals of HTML and CSS.

HTML and CSS Validators

W3C Validator – Easy-to-use markup validation service.

CSE HTML Validator for Windows is a powerful HTML / HTML5 / XHTML and CSS / CSS3 validator and syntax checker.

HTML Validator is a Mozilla extension (add-on) that adds HTML validation inside the Firefox browser.

Total Validator – An all in one tool which functions as (X)HTML validator, an accessibility validator, a spell checker, and a broken links checker.  It is a desktop tool.

HTML Editors – Free & Paid

On Day 15, we mentioned 2 HTML editors, here are a few more options you can check out.

Microsoft WebMatrix – A free, cloud-connected web development tool

Microsoft Expression Web 4 (Free Version) – Another web development tool from Microsoft

Coffee Cup – A HTML Editor with advanced features.  This software can be purchased for a one-time payment of $69 (also has a free trial option).

Flux – All the above mentioned HTML editors are for Windows but this one is exclusively for Mac users.  It is not free, though – it requires a one time payment of $89.99.  They are currently offering a 30-day free trial to test out this software.

2. Content Management System (CMS)

A CMS is basically the platform on which your website runs.  It simplifies the process of setting up and maintaining your business website.  Once you install the software on your hosting server, the CMS lets you add and modify various types of content for your site with minimal coding.

Blogging Platforms

Here we are talking about blogging platforms that can be installed on your web server… that is hosted on your web host.  They are commonly referred to as self-hosted platforms.

WordPress.org  – It is free and can be very easily installed from cPanel Fantastico (or Simple Scripts) application.

MovableType – It is a powerful blogging platform, but the community is not as strong as that of WordPress.

ExpressionEngine (EE) – This is a feature rich blogging platform suitable for creating complex websites.  Only paid versions are currently available.

Forums

If your website design includes the setting up of a forum, you can take a look at the following tools.

PHPBB Forum

PHPBB – PHPBB is one of the most widely used free forum software.  It can be installed directly from your cPanel Fantastico.

Simple Machines Forum – This is another free forum that can be installed from Fantastico.

Vanilla  -Vanilla is another open-source forum software.

bbPress – This was once a free, standalone forum but is now a WordPress plugin.  With this plugin, you can very easily add forum functionality to your WordPress blog.  But make sure you have enough server resources before using it.  In a shared environment, it may cause hiccups if your web traffic increases.

vBulletin – vBulletin is a professional community forum solution with lots of functionality.  Its price starts at $249 for the latest version.

Other Options

Joomla – It is a powerful and easily customizable CMS, and it’s free too.  You can install it from cPanel Fantastico.  Websites like Ebay and Barnes & Noble online book retailer use this CMS as their core.

Drupal – Another free and popular open source CMS.

3. Theme/Template Collections

Your website’s look and feel is determined mainly by the theme or template you use to design it.  This section contains resources to help you find a good theme/template for your site.

Free Template Sites

Templatemo – A site that contains loads of free HTML templates.

Open Source Web Design – This site has free website templates provided by users.

Free WordPress Themes Sites

Please read though the reviews online before installing and activating a free theme on your website.  There are hackers out there on the lookout for vulnerable sites. (I have been hacked two times in the last two years!)

Site 5 WordPress Themes

WordPress Theme  Directory – Almost all the free WordPress themes are listed here.

Site5 – Premium WordPress themes available for free download.

FWPThemes.com – A free premium WordPress themes website with over 1300 themes available.

Fab Themes – This site also provides elegant and premium quality WordPress Themes for free.

Articles Showcasing Themes and Templates

Here are a few articles that have an elaborate list of themes & templates available online.  The first four articles showcase free options, and the last two list out premium themes/templates.

Collection Of Free Responsive HTML & CSS Website Templates

75+ Free Responsive HTML5 CSS3 Website Templates – Collection by WPRazzi

40+ Free Responsive WordPress Themes

80 Premium Like Yet Absolutely Free WordPress Themes 2012 Edition

The Best Clean Responsive WordPress Premium Themes

Best Responsive Premium HTML Templates

Theme/Template Marketplace

Themeforest – I already mentioned this site in an earlier post.  You can buy just about anything related to website development from here.

MOJO Themes – Another marketplace similar to the one above.

Theme/Template Stores

Elegant Themes

Template Monster – Premium website template store.  WordPress themes are also available.

Elegant Themes – Beautiful collection of 85+ premium WordPress themes  for just $39/year.

Woothemes – Premium WordPress themes

Studiopress – Genesis framework and collection of child themes.  {Genesis is one of the most popular WordPress themes.}

Thesis Theme – A theme with Visual Design Template Editor, drag and drop widget options and a whole lot more.  The pricing starts at $87.

4. Graphics

Images

Where to Find Free Images Online – This articles gives you a list of places where you can get free, good quality images online.

Textures and Backgrounds

Background Labs

Background Labs – This website has lots of free backgrounds & patterns you can download.

Subtle Patterns A collection of awesome patterns and backgrounds available for free download.

Texture King – Free stock textures you can use in your website’s design.

SquidFingers – This site has a collection of free intricate and ornate patterns that you can use on your website.

CG Textures – Another free online texture website.

Vectors and Icons

Vecteezy – A collection of free vector art and icons.  You need vector editors like Inkscape or Adobe Illustrator to edit vector files.

QVectors.com – Quality free vector graphics for download.

Free Icons WebCollection of free icons that you can use in your website.

IconFinder – It is the first search engine focused on icons.  A good resource to find icons from the around the web.

IconArchive – A free collection of icons.

IconShock.com – A site where you can buy premium icon sets.

Online Image Editing Tools

PicMonkey

PicMonkey – This is a popular online image editing tool that I prefer.  You can either opt for the free option or pay for a subscription to use their premium features.

Pixlr Editor – Another good online image editor that is free for use.

Photoshop Brushes

BrushKing – Offers over 4000 free Adobe Photoshop brushes.

PSBrushes.net – Beautiful and high quality brush sets available for free.

5. Colors

Color Hunter

ColorHunter.com – To create and find color palettes from images.

COLOURlovers – This is a site for color ideas, trends and palettes.  You can also create your own patterns there.

CheckMyColours – A tool for checking the foreground and background color combination of your website.

0to255 – A simple tool that helps web designers find variations of any color.

HTML Colors – HTML colors are defined using hexadecimal notation (HEX) denoting the combination of red, green and blue color values.  This site has a list of all HTML values for each color you wish to use to in your website design.

ColorCombos – Color scheme extraction tool that can be used to extract a particular website’s colors and values.

6. Fonts & Typography

dafont

Dafont.com – A collection of public domain, freeware, shareware and demo fonts.

ILoveTypography – All about fonts, type designs and typography.

MyFonts – The world’s largest font store.

UrbanFonts – It’s another good resource for finding high quality free fonts.

Google Web Fonts – 600+ free web fonts you can use on your website.

7. Usability

It is important that your website’s design is user-friendly and customers feel comfortable looking around.  If your website takes too long to load or requires too many clicks to get to a particular page inside your wesite, it will be a major turn-off.  Here are some resources to help you ensure that your design ranks well in terms of usability.

PageSpeed Insights

PageSpeed Insights – A tool from Google to help you load your webpage faster.  It analyzes the content of your website and generates suggestions to reduce the page loading time.

UXBoot – It’s a publication by and for the user experience community.  You will find lots of tips and suggestions to improve the user experience on your website.

UsabilityTools.com – Optimize your website usability with their remote user testing tools.  It’s a paid service but they have a 30-day free trial.

UX Mastery – It is an online resource for budding user experience designers.  You will find lots of tips, tools and training to enhance your knowledge.

8. Design Inspiration

I’ve found that it is easier to design a website from scratch when I have a visible example of what I want my site to look like.  I often turn to sites like these for inspiration, and I try to emulate their design.  I hope these sites will give you a rough idea of what you want from your website’s design.

Design Inspiration

Creattica – An online resource for design inspiration.

TypeInspire – A showcase of typography and text effects.

The Best Designs – Showcases the best of web designs from around the world.

Unmatched Style – A CSS design gallery.

Design Snack – A CSS/HTML and flash web design gallery.  You can also submit your design if you want to showcase it here.

Logo Pond – Logo design inspiration.

9. Miscellaneous Resources

Here are some additional resources to help you design your website.

Adobe Browser Lab – You can use this tool to check browser compatibility.

Mobify – A tool to make your website mobile adaptive.

I hope this collection of resources I’ve compiled helps you design a fabulous website for your online business!

Have you entered the Mega Graphics Giveaway yet?

There are very few entries and 1 winner will receive a variety of images, textures, badges, buttons and more!  Rush over and enter to win a complete graphics pack now!

Click here to catch up on all the posts in this series.