A Detailed Look into Popular Styles in Web Design
Just as there are a variety of designers out there, there are respectfully just as many web design styles. Some are good, some are bad - many are just experimental. However, there are those few styles in web design that we see all the time. They are the design styles that work, and that we've grown to know best.
Sometimes popular web design styles can deter us since we love to create something original. As designers we like to see variety, but of course, our clients like to mimic and see consistency. In this post we're going to look into some of the more popular web design styles, and further examine why they work. Knowing the design styles that work as they are can be a great way to use those same principles in your next unique design.
Illustrations have been very popular in the world of web design for a few years now. Illustrations include everything from retro design, to nature related and to the abstract. Anyone could say that there are sub-styles to illustrated web design, but the point is, illustration in itself isn't going away any time soon.
Why Does it Work?
Illustrated designs give us a world of possibilities. With illustration, just like with imagery, photos, and other design styles, creativity is essentially limited. This is why illustrative websites tend to be on the creative side. Illustration is the opposite of what the web used to be: standard images, standard layouts, and simple textures or gradients. Illustration gives personality, a light attitude, and imagery that is unique and memorable.
Because of all this, web designs with custom illustrations are great for branding. Characters, objects, or the overall look of an illustration is intriguing and pleasant to look at. While there are thousands of illustrated designs across the web, they all have their own unique look. A unique illustrated design doesn't quite fit in with anything else, and that's why it works.
Illustrated designs tend to come in three main categories (while there are some exceptions): personal branding, mascots, and the abstract. For many solo designers, or small groups of designers, illustrations of themselves is common. This is personal branding done illustration-style. A few examples include the illustrations at the bottom of Smashing Magazine and throughout the blog, Veerle's Blog, and John O'Nolan. By turning themselves into illustrated figures, they've better branded their business while taking a personal approach.
Mascots are also often used, and are usually animals or other memorable characters. The gorilla on Silverback is a well-known character, as is the owl from Owltastic. Probably one of the most memorable examples is the chimp from MailChimp. The illustration may or may not be related to the name of the brand, but will always be intertwined with the brand regardless.
There are also many abstract illustrations that tend to have no final shape or form. These illustrations are among the most creative, and give the brand that appeal. An example of this is the well-known large illustrated background of Web Designer Wall.
As we entered the age of the Internet several years ago, everyone seemed to want paper left behind. Glossy gradients, flat colors, and few textures were seen in the first phase of web design. Now, though, printed themes are coming back into style. Things that make up great print design like interesting typography, subtle textures, and print-friendly layouts have been used more in recent years than at any other time.
Why Does it Work?
Print design has been around for centuries, and modern print design has a lot of science and proven methods behind it. We read better on some printed works than others, and other printed designs are more effective when designed with the correct design theories. Bringing these same principles to life on the web can only improve the web experience.
People also like to see realism. Texture and depth make a design feel more 'real.' It makes a design feel more touchable and therefore is easier to connect with. However, glossy gradients and hard colors can make some designs feel too professional or unapproachable. Print inspired web designs can connect with audiences better.
Common features among this design style include the comeback of serif fonts, letterpress and drop shadow effects, and subtle textures. More extreme textures are also often used, such as paper or cardboard. Design elements may include paper-related things like pencils, paperclips, post-it notes and more.
Of course, a print-inspired web design does not need to have paper objects or textures to get the idea across. There are designs that may be flat in color but rich in typography that mimic a printed design, or vice versa. Softer textures used throughout the website can look like it's being read on paper, without actually using any imagery related to paper or print itself.
Along with the trend of mimicking real printed paper came mimicking other photo-realistic objects in web design. Everything from desk setups to nature-inspired photo realism is becoming more popular. It's a really cool look that gives the viewer an interesting perspective, and that look can really alter a viewer's mindset and keep them engaged.
Why Does it Work?
Essentially, photorealism web design works for many of the same reasons print-inspired web design is coming back. By giving viewers something 'real' to look at, we can make the design seem touchable, more real, and more connectable. We can bring the viewers into a perspective we choose for them, and alter their web experience altogether. By using photorealism, we can take the viewer 'off the web' and into a real place.
According to the objects you can place in a realistic setting, the possibilities are endless. A recent trend is placing common desk objects into a realistic web design, although some may argue that that look is becoming over used. However, there are many designs that use other types of objects for this look. The two things they all have in common are an interesting perspective and a close-up view.
A distant image of a park isn't going to get the photorealism look. The objects must be close up, as if the viewer is sitting right there, rather than at a distance. An interesting perspective is also what gets many photorealistic websites noticed. Note in the examples below that perspectives are from above, at a unique angle, or right in the action.
Imageless & Typography-Focused
All of our styles above incorporate imagery somehow, but a growing and alternate style is to not include images altogether. Many designers are now choosing to showcase more typography, layouts, and use other design methods to make web designs more appealing. These websites use interesting shapes and forms within the text, unique spacing, and texture instead of pictures to create an idea.
Why Does it Work?
Type only lets the user focus on the content, rather than the imagery. It can be a lot more engaging to use type as the only element in a web design. Designs like this are also a lot more focused on the user experience, and the overall flow of the website. Typography websites can get the overall message through faster and better.
Many typographic and minimalistic designs use color and shape the most when trying to add visual appeal to an otherwise 'boring' design. Note how in some of the examples below the fonts are mixed and matched, altered, and connected/disconnected. Furthermore, much of the typography in these web designs feature texture, depth effects, and more. Creating an interesting use of type is the most common way to make this form of design work without images. Use a variety of fonts, many non-standard fonts, and create unique effects with them.
Color is the second most prominent design feature in these types of designs, among others. Pops of color are regular, and unexpected color combinations usually work well with these types of designs. A more recent trend is two-toned color schemes with these types of designs, which is a mix of only two colors that can be in large doses.
Minimalism in web design is the practice of taking everything that is unnecessary out of the equation. Minimalistic designs tend to be very simple, organized, and effective. There are varying degrees of minimalism, from the extremely simplistic, to the designs that are overall simple but still provide some imagery and additional features.
Why Does it Work?
Web design is all about communicating a message. By taking out all the extra bits and pieces in a web page, the remaining pieces become that much more important. What minimalistic design leaves behind are the core elements and the core content the website needs. Minimalistic design gets the message across, and gives the viewer a clean, organized, and calm design to look at.
Many minimalistic designs are black and white, although there are many exceptions of two-toned color palettes. Similar to the typography-focused style, a unique use of typography is often implemented, to give the design more of an aesthetic appeal. Slab or serif fonts are among the most popular types of fonts used in minimalistic design, because the fonts themselves give more shape.
Besides all the common features above, the two most important things to consider in minimalistic design is depth and whitespace. Minimalistic designs to not provide a lot of depth, and if using texture or other depth-intensifying elements, the effects are very subtle. Secondly, whitespace is in excess, and used as a main tool to organize the user's interface.
People like to look at retro or vintage things; there is just such an appeal about a time and place that we can never go back to. Vintage design is becoming a very popular style, and the eras cover almost any civilized time in human history. We've all seen designs that use the Renaissance as inspiration, but also designs that use looks as early at the 1950's and 60's.
Why Does it Work?
Like we said before, there is just a certain interest and curiosity that comes with historical times. A different culture and a different time create for a unique setting on an otherwise ordinary website. The design style works because the imagery involved is unique and entertaining, therefore making it memorable.
In order to maintain the correct era, a lot of imagery is used in these types of designs. These images are of people or objects from that era. In addition, a lot of texture is used. Of course, before the era of computer screens, glossy gradients were never available, so instead, everything was on paper, in fabrics, and on other textures. These textures are often used, and also aged with warm tones.
Typography, texture, and layout can all vary greatly from design to design, but they are all relevant to the time era being presented.
Large Images & Photo Backgrounds
Oversized elements are seen in many styles of web design, especially in the typography-focused and minimalistic styles. With these came a new type of web design: large photo backgrounds. The entire design focuses around one large background image, and these web designs tend to be very inspiring, beautiful, and creative.
Why Does it Work?
This look is definitely memorable. A large face or a cityscape covering one's entire screen surely makes an impact. The large nature of the image gives a lot of detail, and a unique perspective. It immediately makes the viewer question, "What is this site about?" In other words, a web design like this gains user interest pretty quickly.
The most common feature in this type of design is, of course, the large photo background. The photo will span across the entire page, and the photo is usually unique and creative - something that will grab the viewer's attention quickly. Since the content must then work around the photo background, the layout is generally abstract and content is minimal. One will notice that upon entrance to one of these websites, navigation is the only content available at first, and from there the user can choose the content he or she wants.
Rich & Sleek User Interfaces
Even now that we're entering into Web 3.0, the "Web 2.0" look is still going strong. Rich user interfaces, sleek gradients, and modern web-based appeal are all features of this design style. In contrast to many of the web design styles above, this look hardly ever takes inspiration from offline sources.
Why Does it Work?
It's modern, sleek, and contemporary. Many websites that use this look are websites that are looking to sell subscriptions to web apps, development services, or some other form of modern technology. This shiny clean look shows off a brand that is modern and of high-value. This look tends to be all about correct branding.
Gradients, transparency, reflections and very little texture are all a part of this style. Rich user interfaces that maintain a realistic look are also often used. Usually, these designs use features that create a lot of depth. For example, navigation usually contains drop shadows or inset typography, and hover stages that have push-in, push-out effects. Images, logos, and more have reflections or shadows, and are often turned at an angle going off into the distance.
One more thing to note about this style is that a lot of glossy icons are used. This style probably uses the most icons than any other style, and otherwise the design has very little imagery.
While many designers seem to be very against trends and already popular styles, one must understand that these certain styles are popular for a reason. That reason is that there is already something about them that works, whether it be efficiency, viewer-connection, or interesting visual appeal. The goal is to always view popular styles from an intuitive standpoint, and take from them what works best. This is the only way to learn and gain experience as a web designer, even when developing one's own particular style.