Pick and Mix Demo Websites

I’ve built a range of demo websites to show how little changes can alter the look of a site, even when it uses the same theme.

I’ve set up versions using different platforms (self-hosted WordPress, WordPress.com, Weebly and Squarespace) to demonstrate how much difference the choice of platform makes.

 

The demo sites show possible homepage layouts that I could use to built a website for you – but each layout is just an example and isn’t part of the style. Any style could have full-width images, slideshows, icons etc.

Here’s a quick summary of the differences between the styles.

Standard

This is a flat design with a solid coloured menu bar.

The style is clean and straightforward with plain, circular bullet points and simple, flat buttons.

 

The links below lead to demo sites / slideshows for the Standard style:

Classic

A feature of this style is the narrow borders under the menu and above the footer widget area.

Buttons also have a narrow border, or you could choose ‘ghost’ buttons which consist of just text and an outline.

I’ve included an example of a post separator, but you could substitute a different image for the one I’ve used.

Here are links to the demo sites / slideshows for the Classic style:

Blocks

The logo appears to the left of the menu and there is a coloured border below the menu, below page headings and above the footer. I’ve used square bullet points for this style.

Buttons also have a border at the bottom, rather than being completely flat. Widget headings have plain coloured backgrounds.

The sidebar widgets are displayed using the ‘separate containers’ layout.

The blog uses a ‘masonry’ layout.

This style is available for self hosted websites and can be seen here: Blocks style (self hosted WordPress)

Doodled

This is really just an example of how the look of a website can be changed by using various decorative graphical elements. I’ve chosen a hand-drawn effect but you could also use watercolour, vintage, fabric, cartoon, art deco, futuristic… etc, etc.

It’s important to be reasonably subtle and not overdo whichever look you are going for.  You can choose decorative display fonts for headings, but it’s best to use a plainer, easy to read font for most of the text on the site. I have used paper effect background images on sections of the website.

I used images for the read more link, post separators, bullet points and back-to-top button.

    

You could also use an image for buttons, although I used CSS code in this case.

Here’s a link to my demo site: Doodled style (self hosted WordPress)

 


These styles are intended to give you some ideas about how we could develop your own website.  Any of them could be adapted to make your site unique and you could mix and match elements from different styles if you prefer.

Use the following links to view the various options:


What I need from you…

Leave a Comment