- Use of large photos
- Black & White
- Minimal content on homepage
- Responsive
- Parallax
- Single page sites
- Blogs
Read about original and innovative web layouts.
Responsive Design
Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones.
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
- The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
- Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
- Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.1
Examples can be seen here, here, and here.
Parallax
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.2
See some parallax sites here, here, and here.
Single-page Website
A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although modern web technologies (such as those included in the HTML5 pushState() API) can provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.3
See a gallery of single-page sites here.
Blogs
Not every blog needs to look like a blog!
A blog needs a solid visual structure and a clear hierarchy of site elements. Make sure to take a close look at headers, footers, comment-areas, site structure and other site elements.
Some free blogging platforms worth looking at are mentioned in this list of The 10 Best Blogging Platforms.
Design Styles
Clean / Minimalist
"Using less to achieve more than the sum of the parts - that is the goal".
- The design is reduced to the most essential elements
- Less is more
- Use only elements necessary to the design
- Take things away until nothing else can be removed
- Can be challenging to design
Examples can be seen here, here, and here.
Smashing Magazine Minimalist
Retro / Vintage
See the elements that make up this design style. More can be seen here.
Distressed / Grunge Style
- Dirty look with misaligned elements and textures
- Sometimes considered ugly
- Many music/rock sites use this style
See examples here, here, and here.
Sketchy / Hand Drawn / Illustration
Designs have always been drawn by hand first. Incorporating these sketches in the design can help to create a more individual look and add personality.
See some examples here and here.
More inspiration can be found here or take a look at some of the links on the resources page.
References:
- http://en.wikipedia.org/wiki/Responsive_web_design
- http://en.wikipedia.org/wiki/Parallax
- http://en.wikipedia.org/wiki/Single-page_application
No comments:
Post a Comment