Archive for the ‘Web Design Trends’ Category
Web design audience can’t stop buzzing about the grid system. On one hand it allows flexibility and encourages correlation between web page elements, eases the integration of pics and texts, lets us forget about the outdated HTML tables and helps to eliminate significant coding errors. But even cross-browser support doesn’t save it from bulging at the seams. Even though the most popular 960 grid system tries to lull us into a false sense of security, experts feel its inconsistency with the upcoming web trends. So in today’s post we’ve decided to dig deeper into the future of the grid system in web design and to try to figure out what this future will mean for us.
What seems to be the problem, officer?
So the tech world keeps moving forward. Since we are more accustomed to logical organization of information, web pages need to be well structured. Grid experts track the stats on the number of Internet users at different periods of time, on screen resolutions, operating systems and devices they work with. And they come to a conclusion that we lack some universal grid system to meet the modern standards, some new approach to comply with technologies that keep the web going. Today we’d like to place this question on the agenda and list the best traditional and innovative grid systems found on the web, just so you know better what we’re talking about.
* * *
960 Grid System
960 grid system is the most honorable and long-standing grid system used by web developers today. It comprises the fixed number of columns within the width of 960px. Why 960? It makes for many clean divisions with the whole numbers – it’s surely convenient for calculating the margins and widths as well as the columns location. 960gs is rendered by 12-column and 16-column grid types. If you need extra structure complexity the option of the 24-column grid is also at your disposal. What’s good about the 960gs is a nice multi-platform and cross-browser support, easy calculations and source ordering. If you feel 960gs is enough for your needs, feel free to build it using special ready-made tutorials and actions that don’t require much knowledge and skills.
Although it does a pretty good job in its field and fits the majority of screens, new screens and resolutions are getting larger, so 960 is sometimes not enough for them. This is because of its 20px gutters and gutter spaces that leave just 940px for the content area itself. And the modern web requires higher parameters. Let’s take fonts for instance: the sizes have increased within the last couple of years which should lead to larger content area and gutter space. Operating Systems are able to display much higher resolutions and complex layouts within the last decade. And even classic standard resolution of 1024×768 seems to be getting out-of-date. So it gets obvious that 960gs is not a panacea nowadays.
Ribbons are gaining popularity in website design. They can break the flat website surface and give some interesting depth to the content. Well, you may have seen these design elements appearing here and there, but today we’d like to showcase website templates that embrace attractive ribbons.
You can see them used as stylish and decorative header elements, banner navigation bars, price tags, call-to-action buttons, shopping cart and login icons, layers for writing a tagline and company name, tapes emphasizing the specials, and the like. Ribbons are a sort of a special way to drive users to the right website areas and achieve clear separation of content. Probably because they are conspicuous and so demand rapt attention. Today’s featured templates apart from embracing ribbon metaphors, also implement few more design elements which are very popular right now, check out.
* * *
Food Online Store Zen-Cart 1.3.9 Template
* * *
Coffee Store VirtueMart Template
* * *
Grunge style is so much popular these days that everybody wants to use it on their blogs and websites. But why people love grunge? It is rather destructive and messy – the complete negation of structural order. That confused blend of irregular lines, dirty stains, textures, spilled out liquids, images with a torn effect – the epitome of grunge, isn’t it? Well, grunge gives a more leeway to pure naturalness as there is no showiness in grunge, nothing to prove. Grunge always feels right. And it will always well up within people regardless of how well the others react. If you love grunge and feel that your website should be somewhat urban, assertive by nature, you should use the grunge website templates from our collection – they perfectly utilize multiple grunge elements. Today’s featured designs bring grunge style to make any website pop. Check out!
* * *
Starter Xml Flash Site Template
* * *
Gyoen WordPress Theme
* * *
Vision Xml Flash Site Template
* * *
Using big font size to get visitors’ attention is nothing new. With following designs, font is also the most important part of the designs. It may be followed by the second most important items – images, graphics, layout style or whatever, but such visual hierarchy clearly tells the visitor how each page is meant to be viewed. Users’ eyes are drawn to the most important element on the page – big font – and the larger the font size is for every single element here the more important it appears. You would probably agree that if to attempt to make everything on a page emphasized, it’s that easy to end up with a page that has very little appeal or, even worse, blend everything into a boring muddle. Here we have web designs that are using typography to get attention. Using big fonts is actually a good way of performing this task. We’ve however tried to gather designs that don’t go overboard with this technique. Today’s website and template examples simply choose the right font to compliment the website’s style and make it attractively over-sized to establish certain one-of-a-kind mood.
* * *
Giftrocket.com
* * *
Arbol.com.au
* * *
The invasion of minimal style in web design has caused an uneven situation when minimal design has been glorified from each corner of the web. Young designers consider working with the clean style/minimal designs to be the only ultimate approach, what we want to say with today’s post is that the world is bigger than just that and that in a lot of cases cluttered/magazine-style designs can also look great. So the big point is that this style we’re talking about today is widely used by many respected web projects, but it’s quite underrated by the web design community. This is a cluttered, piled style which is presented by mostly online magazines and news agencies websites. We’ve tried to collect some original examples of cluttered designs in this little showcase and we strongly believe these examples will prove our point. When you need to deliver tons of information from the home page to your visitors there is no place for minimal solution because you must use every single pixel very wisely and prudently.
For those skeptic people that adore minimal style we want to demonstrate the aesthetics of the well-designed websites with good usability and tons of various items on a single page. It is a very difficult task to create such websites because you must keep the right ratio in putting together many various items and implementing design elements at the same time. The examples below prove that cluttered designs have their own unique charm and we hope you’ll take all the best features from these to use them in your work.
Cosmopolitan
* * *
Spacecollective
* * *
Parallax effect may not sound like something familiar to you, but believe us – you know what it is and you know it very well. The good old video games where games had moving background and static foreground (or on the contrary) were the first to have used parallax. Nowadays static websites can boast with some cool effects that add dynamics and enliven website navigation with original solutions like parallax. There are many different ways of how you can use this effect on your website. For example the classical static background with horizontally of vertically moving foreground, the in-depth pseudo 3D effects, dancing elements of the menu – there are no limits for your imagination. Here is a collection of 25 websites with parallax scrolling and if you want to surprise your visitors with interesting browsing experience this is a right place to look for good examples. Please don’t forget that parallax effect is a very unusual effect, and you shouldn’t apply it everywhere you want. So use it wisely, because visitors might be distracted with the non-standard navigation ( this may even cause some troubles with conversion rates etc). The perfect area to use parallax is web design studio website and personal web blogs where there can never be too much of creativity!
BenTheBodyguard
* * *
Unfold
* * *
Iutopi
Slider is one of trendiest design fads having popped up lately. There are extremely versatile forms of sliders that can be used to display all sorts of information and today we’ll show you some of them. Our blog team has compiled a massive amount of website templates having a featured area with content that slides or changes in some very creative way. This stuff helps the design look more dynamic, plus it organizes the layout so that there’s enough space to fit a large amount of content onto one page. Sliders in here are not only intelligently and most accurately used for images but also for general content and graphics. With new styles and techniques being developed, our designers produce sliders of miscellaneous types. You can spot some creative arrows, large buttons, nice borders, slider layout that flows nicely with the thumbnail selector, tilted image displays or image sliders with text to accompany each item – all our slider layouts are very creative with a smooth transition effects. Check out!
One more addition, awhile back we showcased here a list of jQuery slider tutorials you can see and take on your designer’s board.
Grafix WordPress Theme
* * *
Weboo WordPress Theme
* * *
House Style Joomla 1.6 Template
* * *
Maestro Flash Site 8 Template
* * *
What’s negative space? That’s actually a new conformity that has gripped the design world. Negative space by definition is the space not used – the empty space within the actual space. This void is not occupied by any graphics or content, or any other design element. It’s the open space between different elements on a web page, the area between text blocks, images, columns, paragraphs, lines, letters, and words, headers, footers, and just about everything else on a website.
Negative space is not restricted to one medium – it plays an important role in all fields of design, and in web design it also goes by the name of whitespace (although not necessarily encompassing the color white; the term itself stems from the printing practice in which white paper is generally used). When website designers go about composing a layout, they focus their attention mainly on the positive space. The negative space gets very little thought being one of the most underrated and overlooked elements in website design. As some inexperienced designers concentrate heavily on what to put in, as result we have densely packed, overcrowded and taxing to comprehend layouts. Yet incorporating negative space into web designs can be very rewarding.
So What’s so Great about Negative Space?
- whitespace organizes text and graphics, provides spacing between visual items, and guides intuitively the reader’s eye from one point to another;
- doing so, it creates invisible order and enhances readability of the web page, at the same time functioning as a visual relief to the user’s eyes;
- when used intelligently, negative space strengthens the composition and serves to help define the positive space. Essentially, it helps convey the story of the positive space, leading the viewer’s attention to the main subject;
- as viewers, many users now tend to skim through web pages as oppose to scanning, negative space helps keep the layout as clutter free as possible, adding a certain level of simplicity to web design.
- designers may often generously use whitespace to create a feeling of sophisticated elegance and refinement; leaving space empty can also affect the brand positioning as it often implies that something is generally expensive and of high quality.
In the web industry it’s inherently difficult to arrest someone’s attention, still there are proven strategies that can be easily mimicked to become instantly recognizable. One option is using an over-sized photo as a background and a key element of website design. The advantages can be considerable since large background photo creates impressive visual effect, adds more life to the overall layout compared to the traditional background graphics. Besides, with a peculiar color treatment or play of such design variables as depth of field or focus, a catchy background photo often creates certain comforting mood for the visitors.
The following website designs have been tagged with photography based. Most of them are designed in full screen mode to let viewers revel in beautiful high resolution photos. Yet not only do these web templates properly implement large background photos, but their layouts are also amazing. Whether it’s just a simple portfolio page with the overlay of content or a full-blown storefront, the end results are some things everyone’s going to like:
Paula Derrick Image Consultant Flash Site 8 Template
* * *
Defrozo Photoportfolio WordPress Theme
* * *
Spaced at regular intervals horizontal and vertical lines intersecting and forming certain patterns create a grid. This sophisticated technique originating from print design is now widely applied to web sphere for optimizing website layouts. Using certain combinations of columns, rows, margins, and gutters, a grid organizes content by holding up the elements. Don’t you ever feel certain strength inherent in a grid-based layout?
There are however many variations of grids; in spite of this designers stick to using some consistent grid systems with stable principles of proportion and balance. They can apply one grid or a fusion of grids may be applied across an entire project to achieve a consistent effect. Most web projects however are based on 4 main grid types.
- Manuscript Grid – the simplest grid consisting of a single column or an integrated block of text and imagery surrounded by margins. The architecture of this type reminds of a large rectangular area filling the space inside a format.
- Column Grid – used to create vertical zones with columns, which can be reserved for images, captions, or texts. The elements are intentionally placed on a column grid to create a certain effect.
- Modular Grid – distinctive in having consistent horizontal and vertical divisions. With modules governing the placement of elements, this type is ideal for complex projects abundant in imagery content.
- Hierarchical Grid – usually displays intuitive, spontaneous placement of elements. This is mostly an organic type with customized proportions, different column widths deliberately used to create zones with different kinds of content.
Minutely, these grid types are described in the article 4 types of grids and when each works best from VanSeoDesign, so you might be interested to check it out. Once starting a new grid-based project, you’d better try using such grid systems to help position the elements of your design on the page. Hopefully the following grid type examples will come in really handy when practicing.
Swisstypefaces.com
* * *
Methoddesignlab.com
* * *
Follow TemplateMonster Updates
Rss Feed: