Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Web Design Tutorials & Resources > Web Design Ideas   

Web Design Ideas

Looking for something to add a little punch to your website design and make it stand apart?
We bring you some ideas to trigger your creative thoughts and entice the user into your site.

  1. Use single page design - keep it simple
  2. Web Design Ideas Using Squares and Grids
  3. Web Design Ideas Using Icons
  4. Use Sliders & Galleries
  5. Use good-looking Textures
  6. Use Full-Screen Backgrounds
  7. Use attractive navigation – try out something different
  8. Draw on circular elements to attract the viewer - soften hard lines and angles
  9. Use Geometric or Abstract Shapes
  10. Try Retro & Vintage Design
  11. Try Creative Website Design Layouts

Single Page Design

Singe-page websites are a popular design trend away from “information overload” into simplifying content presentation for the impatient web visitor who is out of your site in less than three clicks if he doesn’t find what he wants. Using CSS, HTML5 and JQuery, single-page websites are fully loaded in the initial page load, or page segments are replaced with page fragments from the server on demand. 

Several innovative website design techniques are deployed to generate user interaction and retain interest on single-page websites. Some are:

1.Fixed/sticky navigation
2.Interactive navigation elements like parallax scrolling - creating a 3D feel with background images scrolling more slowly than foreground images
3.Flat web design or Flat UI was made popular by the flat Apple iOS7 interface design. The focus is on being clear and easy to use.
4. Full-screen background images
5. Web typography like @font-face and Typekit makes more fonts available to designers to make their one-page designs stand out on all screens.
6.  Responsive web design displays a website at the optimal size for different devices and screens
7.Social media integration makes content shareable
8. Data integration - Toolkits bring data directly into the website, to present interactive data visualizations that make the site informative and crawlable by search engines.

Click here for some awesome examples of single page and one page web site design..

100 Creative Single Page Website Templates

Best 2012 One Page Website Templates

Web Design Ideas Using Squares and Grids

What is a grid?

A grid provides order and structure in a website design. Horizontal and vertical lines intersect to form a grid in which elements of a design are placed and content is neatly aligned.

Why do website designers need to use a grid system?

A grid system enables designers and developers to work together for quick prototyping and reorganizing of layouts. Grids provide organization, help to segment information, establish a content hierarchy and create balance, consistency and unity in website design. The 960 grid system is used to simplify web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960 grid provides the flexibility to design layouts in 2, 3, 4, 6, 8, 12 and 16 columns. Today, there are computer screens that are much wider than 960 pixels, which is how the 1170 pixel grid evolved. For responsive layouts, you need fluid grids, using flexible frameworks like Twitter Bootstrap which helps you design layouts that adapt perfectly to all screen sizes on multiple devices. The fluid grid uses percentages as opposed to pixels to define column widths. You can use a grid generator like the Zurb CSS Grid Builder or Gridulator to generate a grid.

In many website designs, you don’t obviously see the grid as it is invisible, but it was used to give the page its structure. Shown below however are some striking website templates designed using the grid not just as the under griding of the design, but as an essential design element.

Web Design Ideas Using Squares and Grids

Web Design Ideas Using Icons

Icons are a graphic way to draw your site visitor’s eye to your web page content. Icons help you to telegraph your message and minimize the need for words; build interest into lists; pull attention to important content; invite the user to try out a feature; give a quick overview of your company’s services, or provide a call to action.

Web Design Ideas Using Icons

 

Use Sliders & Galleries

100 Creative Examples of Sliders & Galleries in Web Design

 

Use Good Looking Textures

Use textures in web design to add that extra fillip to your site – add depth or natural contrast to your design and separate your content into sections so that the main elements stand out.  Highlight your header or call attention to your menu, title, icons and buttons. Present a perfect background to set off your photos to advantage. Textures bring harmony into website design and tie in different elements together.

Experiment with soft, hard, subtle or rough textures like wood, sand, earth, fabric, paper, ceramic and more to get the results you want. Subtle textures create distinctiveness and style. Choose textures that naturally fit your page content.

Don’t overdo textured backgrounds and create “visual noise” or the page will be a plethora of elements and nothing will make sense to your reader. Make sure your text is legible and the overall effect is pleasing. 

Textured backgrounds in website design

Use Full Screen Backgrounds

Inspiring Examples of Full Screen Backgrounds in Web Design

Large Photo Background Website Templates

Retro and Vintage Web Design

‘Retro’ is short for ‘retrospective’, which means “looking back” – to a period from the 1900s to the 1980s, with all their different images bringing back the nostalgia of the past.  

Retro is in…and web design reflects this, combining retro elements with modern minimalistic styles, responsive design, classic or infographic style layouts, Photoshop effects and more, to create websites that function smoothly with the newest web technologies, yet retain the charm of the past. 

Retro web design draws inspiration from vintage ads and characters, mascots, cinema posters, billboards, record covers, newspapers and magazines, illustrations, scrapbooks, comic books, invitation cards.  Design influences include vintage cars, radios and stereos with analog interfaces, clothes, music, even the shop fronts, drive-ins, delis and icecream  parlors of years gone by. 

Vintage design has a lasting appeal that cuts across ages and boundaries, and involves the viewer by evoking positive memories and nostalgia for the past.

Stunning Retro and Vintage Web Design Templates

Use Attractive Navigation

Here are some amazingly unique navigation menu designs ranging from circles, illustrations, wooden effects, hanging menus, abstract menu ideas for your inspiration. So, if you’re designing a layout or stuck with the navigation in a design, this might be just the thing you’re looking for. So, roll up your sleeves and fill your brain with some new & creative ideas as you go through this unique collection.

Unique navigation menus for your inspiration

Circular Elements

Rounded shapes are softer, gentler and more pleasing to the eye.  CSS3 makes it easy for designers to create rounded shapes and circles without using images. Circular shapes are popular in web design but as in all trends, a surfeit of the same thing starts boring the viewer.

Here are some creative website designs that use circles in their navigation, background design or other design elements. The new design trend is designing with circles so we have rounded up some of the best website designs that use circles for your inspiration. Use colorful circles, circles with transparency, circles with pictures or circles with bokeh effect, the possibilities are endless so enjoy this post on spectacular website design ideas using circles.

Great Collection Of Website Templates Using Circles

Beautiful Blue & Purple Circles Website Design

Try Abstract & Geometric Web Design Layouts

Check out these abstract web design templates and get more design ideas!  These templates use diagonal lines, geometric shapes and abstract backgrounds and layouts in web design.

Abstract Web Design Templates

Creative Website Design Layouts

Creative Website Design Layouts

We hope you enjoyed this collection of engaging web design ideas compiled by Entheos.  Keep those creative juices flowing!

Take a look at a variety of ready-made website templates to get some great web design ideas!


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 45000 templates!

create a free html5 website

Featured Template
Template # 39641
Type: WordPress
Price: $67