How To Create A Modern Web Design

MODERN WEB DESIGN IN GENERAL

TYPOGRAPHY

Typography is a modern web design tool that can help create a brand identity. Creating a connection between a brand and the font(s) they use creates instant familiarity when browsing the web.

You want to tie your header fonts back to your brand if you can. If not, you want to use your header fonts as a way to direct the viewer's eye to different sections of your website.

For your header font, I would recommend looking at options from the tool shown above, FontSquirrel. They provide a free-to-download font family service. Having a custom font on headers is an eye-catching way to emphasize what is important on the page.

As for paragraph text, and other smaller copy, gone are the days of boring old fonts. Times New Roman and Helvetica are not the fonts you want to be using on your website. At the very least, you can get creative with some free Google Fonts, all of which are Google-approved and easy to implement into your website. A few that I would recommend for body font, (p, ul, ol, li), are Raleway, Lato, and Open Sans. Lato and Open Sans are more conventional choices, but if you can pull off Raleway, it will look great. I promise you.

While not on the same subject as font families, it is important to realize the growing trend of increased font size of web pages. You don't want to be using 12pt font for your body copy anymore. Start thinking of 16pt font as the bare minimum with the understanding that 18pt, 21pt, and even 24pt are not unheard of.

RESPONSIVE

Everyone knows how important responsive web design is at this point, but why not emphasize it more? Responsive design is based on screen size and the re-organization of content. An easy way to figure out if a website is responsive is to resize your browser window — our website just so happens to be responsive, if you want to give it a try.

One area in particular that you want to make sure is responsive will be your background images, another growing trend in modern web design. Your big featured background won't do much good at various screen sizes and devices if it doesn't load up correctly on each one. You can do this with some simple CSS work. Let's take a look at Spotify.

Spotify's desktop homepage has a beautiful image centered on a couple on the beach. But, would that background image be any good if it was just the beach to the left of them that was visible on mobile? You could argue yes, because it is a beach. To which I would say, "Touché." But, fortunately, Spotify did not do that. They have a responsive background that allows you to see all parts of the background image.

Keeping the couple centered when the background is re-organized on a smaller device maintains that same feel as the desktop version of their site.

STYLES

Typography and responsive images are two elements, or trends, that will apply to all of these modern web design style trends.

GRID

Dewitt  - Grid Design

The grid design style, seemingly made popular by the Windows 8 interface, has taken a foothold in modern web design, and rightfully so. It is a relatively simple and easy design trend to implement on your website and it gets more information to your visitors above the fold. Being able to present multiple conversion paths to visitors, while displaying some amazing featured photography, is wonderful, but make sure you do not present too many options. Dewitt features three options above the fold for visitors to "Discover." That is the maximum you should be presenting and one of the reasons I choose to feature their website as an example.

Imagine if the two images on the right were also links. For most viewers, that would be information overload, making the page more complex than it needs to be. Having the two images appear diagonally from each other creates a visually-appealing flow and keeps the page simple and beautiful.

MINIMAL

Design Lobby - Minimal

Minimalistic design is hard to pull off. The idea is simple — less is more — but the execution relies on small details. Key features of a minimalistic website are 1) the amount of white space, 2) its reliance on typography, and, to a further extent 3) its lack of buttons, navigation, and links. Not every design element you can think of will be on any of these types of sites. They have one unified simple feel across all their pages.

You can argue that this modern web design style is less about the design layout and more about the copy. To make a minimal design effective, you have to prioritize the most important copy and make it pop off the page. You tell stories with images and not words on the web anymore and that is what makes this style so effective.

Design Lobby has a clean and simple color palette that works with their logo and is aesthetically pleasing. They have a minimal top navigation, as well as a minimal number of links on each page, accompanied by minimalistic, flat feel buttons. They utilized white space to create an order of importance with the elements on each page and used an interesting font family for their headers that demands attention.

FLAT

450GSM - Flat

Flat design stems from the ideas of minimalism. While not being exactly the same, they have some of the same qualities. Flat design puts the copy front and center — there is very little else to distract the viewer. There on no gradients or anything to suggest three dimensions, which is technically different than minimalistic design. What defines flat design is brilliant color choices and typography. For flat design, however, what separates it from minimal design is the lack of background images. That is not a thing in flat design. You will typically find full-color background banners that are either muted colors or bright bold colors with white text.

450GSM has a beautiful color palette working for them — the red stems from their logo the aqua green color is a great compliment to it. Notice how little text is on all of their pages? They did a great job simplifying copy to what needed to be on each page. If you don't think that is an impressive feat, check out their "About" page. It really deviates from the normal corporate "About" page.

Their imagery also relies on custom illustrations, which is another modern web design trend.

ILLUSTRATIONS

Game Changers  - Illustrations

Just a quick note here: If you click on that link to "Game Changers," you may have noticed that it took you to a load screen. That is not good for modern web design and is something you want to avoid. However, that page and the rest of this website illustrate the modern web design trend of illustration so well, I figured, why not?

Illustration usually uses no real imagery. It's all custom-made in Illustrator or Photoshop. You can see that this website could have easily used real photos instead of these custom images for the players that appear. What they decided to do is much more interesting. Their illustrations have a flat feel to them, which is obviously in style right now, but that isn't the only option for illustration web design. Take a look at Flat vs Realism to see how the two stack up.

This style takes a higher level of commitment as it is time-intensive to create each illustration. However, if you do not have any unique photography that makes you stand out, this may be an option you'll want to consider. It is a great way to create an experience that is unique to your company's website that no one else will have.

FEATURES

Contrary to the first section of this post (in which I mention typography and responsive images, features that every website style will be using) this "Features" section mentions some modern web design features that are unique — a little something extra that might not fit on every website.

VIDEO

MyProvince - Video Background

Video backgrounds are a growing trend and why not? They are pretty, flashy and unique. It's a growing trend, so not everyone has it yet. Those that use it present a far more interesting look than a static background image. I'm sure there are probably some SEO issues with doing this, but if you can make one, go for it.

SCROLLING

Studio -  Scrolling CSS

Scrolling effects are hot right now. What you want to keep in mind is that even a little effect can go a long way. I chose the example above because it is much easier to see what I'm talking about. Elements that fade in or come in from the side are quite eye-grabbing and keep you scrolling down the page to see what happens next. Scrolling on the web is commonplace now and you shouldn't worry about having your visitors scroll to get to some of your content.

CREATING YOUR OWN WEBSITE

Whether you are looking to create your own website or re-design your current one, here are a few tips I have for you based on the information from this post.

1. Before you can design, you have to know what kind of content you are using on your website. This will sometimes dictate the style you choose.
2. Choose one of the modern web design styles you want to use: grid, minimal, flat or illustration.
3. Choose the typography you want to use. Make sure that the style you use for your body copy compliments the style you choose for your headers.
4. Figure out the bells and whistles you want that align with the style you have chosen.
5. Make sure your website maintains the same feel throughout the website. Seriously, don't try to change styles between pages.

Following these guidelines and adding some brand personality will result in a modern web design that positions your website to attract visitors online.