Yes, I know there are countless posts about website design inspiration, but this one is different! Actually, these are a handful of websites that I believe to be best in their respective categories which range from full-page photography to CSS3 animated illustrated designs.
There are at least a few design elements on each website in which you can draw inspiration. Peruse these 14 examples and incorporate some of these elements and techniques into your future designs.
A picture is worth a thousand words. This is certainly true for Daniel Filler’s quasi full-screen homepage. Notice the depth delivered from the intense focus on Mr. Filler. The picture brilliantly delivers his message: “I am a design geek and a whiz on a mac. Hire me.” The rounded CSS button is a little hokie as a sharp, rectangular button would work better.
Beautiful color and yet not distracting. The user is presented with very little information which is required because of the aggresive design. If there were more information, text, or widgets, the user would be overloaded and quickly flee to a less off-putting design.
My eye is drawn to one thing: The gorgeous design of the top-half of the page. I can easily overlook the stock icons and poor typography below because the brilliantly crafted design above. Imagine what this site would look like if the upper container were taller and a small menu was presented at the bottom.
A full page slider with a transparent feel to the interaction between text and image. This is a very elegant design and is usually seen on higher end corporate sites. It’s hard to believe this is a small business website. Yes, the shortcode use and lack of CSS on sub-pages is a giveaway, but still a solid attempt at simple, elegant design.
This design has deceivingly good CSS. Clean typography, muted colors, and great illustrations. If you forget what Doorstep Dairy does, you are quickly reminded via Doorstep’s logo, graphics, content presentation.
Moundville is a small city on the outskirts of Tuscaloosa, AL, but there is nothing small about this ambitious project. A full screen rotating background that incorporates stunning pictures that really show off the city’s qualities. The sub-pages are a little plain and typography is simple enough, but what the website does well is capturing your attention.
This is probably the best representation of layered images that attempts to create a “limitless” effect. Similar to the technique used in the film “Limitless”, the photoshopped images give the impression the landscape is infinite. See utah.gov for similar design with the addition of a parallax effect. If there is a better example of this style, I haven’t seen it.
I only like the top portion of this site. It is a one-page website with a very clunky and inefficient scroll. Nevertheless, the textured overlay, the use of color and the edginess of the typography make for a fun, urban design.
Spend some time on this site and you will grow to love it. Has e-commerce ever looked this good? I know they have only a handful of wines to sell, but it is perfectly executed. Integrated into the site is what appears to be a slider whose margin extends to the top of the page, but thanks to the alignment of the bottles and proper use of z-index, it works.
Arctica is not included in this list due to it’s design (which is tacky), but because of the slider used. The Revolution slider or Slider Revolution is just that, revolutionary. Revolution has intro parameters, end parameters, unlimited layers, video, animation and the list goes on.