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

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

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.

CSS 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 $49 (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.

Visual Studio Code – Visual Studio Code is a source code editor by Microsoft that supports HTML as well. It can be downloaded for Windows, Linux and Mac systems.

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 – This is a feature rich, open source blogging platform suitable for creating complex websites.

Forums

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

PHPBB

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.

Drupal – Another free and popular open source CMS.

3. Theme/Template Collections

Free Template Sites

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

Colorlib – This site has 400+ free website templates.

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!)

Wordpress Theme Directory

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

JustFreeThemes.com– A free WordPress themes website with over 900+ 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

500+ Best Free Responsive HTML5 CSS3 Website Templates

40+ Free Responsive WordPress Themes

The 50 Best Free WordPress Themes

The Best Clean Responsive WordPress Premium Themes

Amazing Bootstrap and HTML5 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 Marketplace – Another marketplace similar to the one above.

Theme/Template Stores

Template Monster

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

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

WooCommerce Themes – Premium WordPress child themes for WooCommerce Storefront.

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.

25+ Free Image Sources for Your Online Business – More free image sources to adorn your website.

Textures and Backgrounds

Background Labs

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

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

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

Textures.com – 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.

Vexels – 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 opt for the free trial and then move on to one of their premium plans.

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

Photoshop Brushes

BrushKing – Offers over 4000 free Adobe Photoshop brushes.

PSBrushes – 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

DatFont

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 Fonts – 900+ free font families 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 website, 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 web page faster.  It analyzes the content of your website and generates suggestions to reduce the page loading time.

UX Booth – 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.

Five Second Test – Optimize your website usability by measuring first impressions and what visitors recall from your website.  They have a free option with limited usage.

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.

Envato Blog

Envato Blog – 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.

Browserstack – You can use this tool to check browser compatibility.

Mobify – A platform to create Accelerated Mobile Pages (AMP), Progressive Web Apps (PWA) and native apps.

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

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

About the Author:

School teacher turned internet marketing consultant, Sunu Philip is a Certified SEO Specialist. She founded “Clothed in Scarlet” to help women discover their unique God-given strengths and turn their talents into profits online. She offers subscribers a Free Online Business Startup Kit to help them start their online business from scratch.

3 Comments

  1. Estelle July 20, 2013 at 8:39 am - Reply

    Hi Sunu,

    It was so nice being referred to you via Jolene Engle website.

    Is there any way I can get 1 to 3 pager websites, without having to go through the effort of creating them myself.

    Template ones, without costing too much or for free.

    Your assistance will be much appreciated .

    Kindest regards
    Estelle

    • Sheena July 20, 2013 at 12:18 pm - Reply

      Thank you for visiting, Estelle. I hope you’ve found our series useful. As it is the weekend, Sunu will not be able to reply to your query immediately. But she will be emailing you in the coming week.

  2. Smita September 26, 2016 at 9:43 am - Reply

    Hi Sunu Madam,
    I am big follower of you.I like your blog very much.I am about to launch my mom blog.Your site is very helpful for me. As I am newbie I am facing a lot of problems.Which free wordpress theme would you suggest for mom blog and how to do landing and thank you page and how to make header .Still have sooooo many doubts.

Leave A Comment