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.
This site uses a postbox as a central element, on which the menu is shown. You are introduced to the different sections of the site through the pop-up menu using the About Us box below, or using the front and back arrows. The backdrop changes to show the skylines of different countries, or to show day or night. Animation elements add interest – birds flying, horses stamping, paper fluttering. The "brass tacks" content selling the company’s capabilities is shown in the form of vintage pages with illustrations and makes for easy reading.
Stock de rock
A textured delight is this website for performers, where the logo, the background, some images, and other design elements have different but co-ordinating surfaces.
We bring you some ideas to trigger your creative thoughts and entice the user into your site.
- Use single page design - keep it simple
- Create unusual icons – let your imagination come into play
- Use attractive navigation – try out something different
- Draw on circular elements to attract the viewer - soften hard lines and angles
- Use good-looking textures
- Use CSS3 to create animations, transforms and transitions – a great alternative to Flash
- Try out unusual designs for forms
Single Page Design
Just Dot
This scrolling single-page website uses a simple concept – ideas coming to life on a blackboard, with all the changes, scribbles and erasing that refine the process of ideation. The white and red chalk sketches and typography highlight the site’s promise of “Brilliant ideas come to life”. The Just Dot logos in brilliant colors stand out against the blackboard background, while the color coding serves to differentiate the different sections of the site.
This scrolling single-page website uses a simple concept – ideas coming to life on a blackboard, with all the changes, scribbles and erasing that refine the process of ideation. The white and red chalk sketches and typography highlight the site’s promise of “Brilliant ideas come to life”. The Just Dot logos in brilliant colors stand out against the blackboard background, while the color coding serves to differentiate the different sections of the site.
This site uses a postbox as a central element, on which the menu is shown. You are introduced to the different sections of the site through the pop-up menu using the About Us box below, or using the front and back arrows. The backdrop changes to show the skylines of different countries, or to show day or night. Animation elements add interest – birds flying, horses stamping, paper fluttering. The "brass tacks" content selling the company’s capabilities is shown in the form of vintage pages with illustrations and makes for easy reading.
Nerisson
The portfolio is shown right on the home page in hexagrams rather than the expected squares or triangles. On rollover the selected work is shown in color and a click takes you into an expanded view of the work. Once you get there, you can also navigate through the portfolio using slideshow arrows.
The portfolio is shown right on the home page in hexagrams rather than the expected squares or triangles. On rollover the selected work is shown in color and a click takes you into an expanded view of the work. Once you get there, you can also navigate through the portfolio using slideshow arrows.
Owl Concept
This smart single page design uses a textured background and an elegant bright yellow font that provides a sharp contrast to the black panel in the center. The menu bars in yellow, when clicked, simply bring in a new section of the site that slides in with text.
This smart single page design uses a textured background and an elegant bright yellow font that provides a sharp contrast to the black panel in the center. The menu bars in yellow, when clicked, simply bring in a new section of the site that slides in with text.
Create Unusual Icons
zagg
The illustrations are highlighted in color on rollover and invite you, through the blurbs or on click, into the different countries where Zagg is present.
The illustrations are highlighted in color on rollover and invite you, through the blurbs or on click, into the different countries where Zagg is present.
Worry free labs
These “blackboard-sketch” icons turn full color with a 3D look on rollover.
These “blackboard-sketch” icons turn full color with a 3D look on rollover.
Column Five
Column Five uses animated icons on its site which showcase its infographics services. The horizontal scrolling header also uses circular elements and graphics effectively to promote its service offering of “visual content”.
Column Five uses animated icons on its site which showcase its infographics services. The horizontal scrolling header also uses circular elements and graphics effectively to promote its service offering of “visual content”.
Use Attractive Navigation
An animated preloader showing a coffee pot filling up is the prelude to the emergence of this highly active, interactive, illustrated homepage where elements appear and disappear on rollover, or move, or fill up with color. The central figure in yogic posture “levitates” along with his coffee cup and on mouseover a warm sunny yellow background appears with illustrations evocative of coffee bubbles and steam. The blurbs on the homepage signal the menu navigation. The user is taken into different sections of the site onclicking either a blurb or an illustration, or through footer navigation. Animations on every page, background paintstroke texture, handwritten fonts are other design features of the site.
Bold attention-getting fonts provide the dramatic contrast of black and white to the portfolio on the homepage in color. In the About section you meet people who obviously enjoy their work.
Pentagram
Very neat and clean navigation using a horizontal slider to quickly and efficiently navigate through an impressive body of work, get an overview of the different areas of business dealt with by the company and showcase recent and innovative pieces of work.
Very neat and clean navigation using a horizontal slider to quickly and efficiently navigate through an impressive body of work, get an overview of the different areas of business dealt with by the company and showcase recent and innovative pieces of work.
The high-powered red with an overtone of black draws attention for this website for a design, direction and animation studio. Titles for the portfolio are shown on hover to allow quick selection of work to be seen in greater detail. On scrolling down, one can see the print work, which is color-coded in green that also “cools” the eye after a lot of red! The menu reveals interesting icons on hover. The “contact us” page is called “Say Hello”, which in my opinion does not work as well as the ubiquitous but simple “Contact us”, specially as it features a Twitter-like bird on rollover.
Typographica
When you hover over the headline under the name of the site, you can select the section of the site you want to enter. All the typefaces are arranged so that you can easily navigate your way through the site, find your favourite font and read some professional commentary.
When you hover over the headline under the name of the site, you can select the section of the site you want to enter. All the typefaces are arranged so that you can easily navigate your way through the site, find your favourite font and read some professional commentary.
Gpacheco
Creative use of paint strokes, images, texture and animation gives this single-page site design a different look. On menu click, the animated artist pops up in different places with different expressions and actions. The word balloons amplify the content in the menu headers.
Creative use of paint strokes, images, texture and animation gives this single-page site design a different look. On menu click, the animated artist pops up in different places with different expressions and actions. The word balloons amplify the content in the menu headers.
Work (at) Play
Neat navigation! The vertical menu in bold pink on black on the right of the page has social networking icons are neatly arranged under it. Each page features a horizontal pink bar on the left that highlights the clicked menu option. This bar has further drop-down menu lists within the category, and a square to the left that changes color on rollover and opens up a slideshow on click. Lots of information - smartly presented!
Neat navigation! The vertical menu in bold pink on black on the right of the page has social networking icons are neatly arranged under it. Each page features a horizontal pink bar on the left that highlights the clicked menu option. This bar has further drop-down menu lists within the category, and a square to the left that changes color on rollover and opens up a slideshow on click. Lots of information - smartly presented!
This is the landing page (Homepage?) for the portfolio of a designer’s site, with illustrations that highlight in color on hover and focus attention on different aspects of his work. The unusual navigation takes you to different sections of his site.
Stephen Caver
This designer-developer’s site with its unique typography, layout and navigation, arrests attention with the extra-bold headlines on each page. The homepage makes it very easy for the user to go take in all the main elements at a glance – portfolio, bio, social networking icons and nav. The menu nav is repeated in clean clear text on top of the page as well as in the black boxes below. Social networking icons neatly lined up on the left are featured on all pages for ease of sharing. Unlike most “portfolio sites”, this site also features links to blogs or sites of other creative people who have inspired or influenced Stephen Caver under the section titled “Respect”. The links are highlighted in yellow, providing an unexpected twist that leads the user into clicking a link or two.
This designer-developer’s site with its unique typography, layout and navigation, arrests attention with the extra-bold headlines on each page. The homepage makes it very easy for the user to go take in all the main elements at a glance – portfolio, bio, social networking icons and nav. The menu nav is repeated in clean clear text on top of the page as well as in the black boxes below. Social networking icons neatly lined up on the left are featured on all pages for ease of sharing. Unlike most “portfolio sites”, this site also features links to blogs or sites of other creative people who have inspired or influenced Stephen Caver under the section titled “Respect”. The links are highlighted in yellow, providing an unexpected twist that leads the user into clicking a link or two.
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.
Polecat
Note how the circular theme is carried all through Polecat’s single page web design – in many of the illustrations on the home page, the illustrations of the team, even in the “rounded” contact form and the colourful blurbs on the products.
Note how the circular theme is carried all through Polecat’s single page web design – in many of the illustrations on the home page, the illustrations of the team, even in the “rounded” contact form and the colourful blurbs on the products.
Gift Rocket
Icons in colourful circles on a neutral background with the logo rocket taking off in the center shows how quick and easy it is to send an online gift of the recipient’s choice.
Icons in colourful circles on a neutral background with the logo rocket taking off in the center shows how quick and easy it is to send an online gift of the recipient’s choice.
Vlog.it
This colourful HTML5-powered site with SVG animations features vlogs or video logs on Vimeo and YouTube. The site uses geometrical shapes and photographs within circles (like a target) to draw attention. Black and white circles around circles form the preloader and a black circle with the vlog log forms in the centre. Three colorful circles formed by thumbnail photographs appear around the black circle, and each circle rotates in a different direction. Clicking on any of the photos reveals a black and white geometric animated preloader (the black and white is a little hard on the eyes, in my opinion) and the video clicked on is shown in a central rectangular screen.
This colourful HTML5-powered site with SVG animations features vlogs or video logs on Vimeo and YouTube. The site uses geometrical shapes and photographs within circles (like a target) to draw attention. Black and white circles around circles form the preloader and a black circle with the vlog log forms in the centre. Three colorful circles formed by thumbnail photographs appear around the black circle, and each circle rotates in a different direction. Clicking on any of the photos reveals a black and white geometric animated preloader (the black and white is a little hard on the eyes, in my opinion) and the video clicked on is shown in a central rectangular screen.
Use Good Looking Textures
Fa design
The stroke textures give a pleasing appearance to the introductory slides and different colors highlight the slim fonts used in the menu.
The stroke textures give a pleasing appearance to the introductory slides and different colors highlight the slim fonts used in the menu.
The typography changes color on rollover and there is a light grey texture on the images, which change automatically. You can also click the arrows to take you to different sections of the site.
Frish
Subdued and understated textures make an elegant statement in minimalist website design – they are used in the logo, typography, images and backgrounds to provide a subtle and pleasing look.
Subdued and understated textures make an elegant statement in minimalist website design – they are used in the logo, typography, images and backgrounds to provide a subtle and pleasing look.
Celebration Invitations
You can almost feel the texture and high quality of the paper used in their custom-made cards, in the Celebration Invitations website. Smart textures and colors contrast with a patterned background while the logo stands out on the header. Other thoughtful touches are the heart postmark and the "hand-made" stamp. Textures are just part of overall good design.
Steely M
Fine stripes and checks in the texture of fabric make up the greys in the design that speaks of “Finely woven sounds of fusion-jazz”. Black and white and shades of grey - blue circles for navigation and touches of color to spell out the musician’s name.
You can almost feel the texture and high quality of the paper used in their custom-made cards, in the Celebration Invitations website. Smart textures and colors contrast with a patterned background while the logo stands out on the header. Other thoughtful touches are the heart postmark and the "hand-made" stamp. Textures are just part of overall good design.
Steely M
Fine stripes and checks in the texture of fabric make up the greys in the design that speaks of “Finely woven sounds of fusion-jazz”. Black and white and shades of grey - blue circles for navigation and touches of color to spell out the musician’s name.
Stock de rock
A textured delight is this website for performers, where the logo, the background, some images, and other design elements have different but co-ordinating surfaces.
With its one-page design and stencilled logo "Staya Staya", this design makes use of a sandy texture to blend with the central painting and provide an outdoorsy feel. The website bids a warm welcome to "all kinds of tourists" with its art depicting a group of people with varied interests. The oversized hand that points to the networking icons is the only somewhat jarring note!
Gleb LeksikovClever use of light and shade and texture allows the black squares to be subtly differentiated from each other.
Use CSS3 to create animations, transforms and transitions
HTML5, CSS3 and JQuery provide an alternative to Flash for animations, transforms and transitions.
Ball pool using HTML5
Colorful balls make an interesting game in this HTML5 demo where all you have to do is click on a ball - any ball - and then click the background. The balls magically multiply and fill the screen. This shows you just how dynamic HTML5 can be!
Colorful balls make an interesting game in this HTML5 demo where all you have to do is click on a ball - any ball - and then click the background. The balls magically multiply and fill the screen. This shows you just how dynamic HTML5 can be!
Kaleidoscope
Kaleidoscopic patterns in subtle, transparent colors form and re-form different shapes.
Kaleidoscopic patterns in subtle, transparent colors form and re-form different shapes.
Animated HTML5 particles
A riot of colors, these animated particles in HTML5 dance all over the screen based on your mouse movement.
A riot of colors, these animated particles in HTML5 dance all over the screen based on your mouse movement.
Javascript Fireworks
A Javascript animation sets off fireworks! Control the speed, gravity and blast radius, and customize your message! Just type in your text in the textbox to see your message forming in fireworks.
A Javascript animation sets off fireworks! Control the speed, gravity and blast radius, and customize your message! Just type in your text in the textbox to see your message forming in fireworks.
Multiple 3D cubes with animation using CSS
On rollover, each of the cubes slide and change color. Each cube face can be clicked.
On rollover, each of the cubes slide and change color. Each cube face can be clicked.
"Matrix" Animation with CSS3 on WebKit
Animated text rains down gently against a black background.
Animated text rains down gently against a black background.
Elastic thumbnail menu
This demo page for the corresponding tutorial on the Build Internet site shows how the thumbnails can be made to expand on hover using HTML, CSS and JQuery to create a thumbnail menu. And you don’tneed a lot of code for an interesting effect!
This demo page for the corresponding tutorial on the Build Internet site shows how the thumbnails can be made to expand on hover using HTML, CSS and JQuery to create a thumbnail menu. And you don’tneed a lot of code for an interesting effect!
Text shadow
This page in the Zachstronaut site shows how to create a spotlight text shadow effect. The spotlight moves along with the cursor, casting shadows behind the 3-D text as it goes.
This page in the Zachstronaut site shows how to create a spotlight text shadow effect. The spotlight moves along with the cursor, casting shadows behind the 3-D text as it goes.
Creative Form Design
Point of Entry
This form stands out in relation to the rest of the page, in terms of color and positioning. You can’t miss the yellow sticky notes and handwritten type.
This form stands out in relation to the rest of the page, in terms of color and positioning. You can’t miss the yellow sticky notes and handwritten type.
Nerrison
Using the "different kind of animal" shown in the "About" section, the designer ensures that the contact form is unique while it is clear and easy to use. The red “send it” button provides an attractive contrast and call to action.
Using the "different kind of animal" shown in the "About" section, the designer ensures that the contact form is unique while it is clear and easy to use. The red “send it” button provides an attractive contrast and call to action.
This form is designed as handwriting on the sand with finger strokes on sand to leave space for the form content. The viewer can also type in a message which appears like type-written text on the sand. The picture of the “message in a bottle” lying on the sand invites the viewer to send a message.
We hope you enjoyed this collection of engaging web design ideas compiled by Entheos. Keep those creative juices flowing!
Source: Entheos
Comments