Like most art forms, website design is in a constant flux of trends, new ideas, and reinvented concepts. With advances in Internet programming, websites are now able to offer more control over content and visual design than ever before. This new control has brought its own host problems, including increased complexity in the coding process and slower loading times due to an increase in resources. Like any good artist, we take the faults in our canvas into account and decide on which brushes/tools to use to obtain the best results.

Although it takes many forms, I consider modern website design to be the utilization of design methods to increase the beautification, standardization, and usability of a website. This does not mean that the a design method is a new invention, but it may have been reinvented to apply to the Web’s ever-changing technologies. What follows is a brief look at some of these methods and how they can benefit new websites.

Responsive Web Design

Responsive Web design simply means that the website will be easily usable on all devices that are able visit the site. When cellphones first started including Web browsers, many users found it to be cumbersome to navigate websites that were primarily built for desktop users. Web designers thought up many ideas on how to fix this problem, from creating apps to building entirely separate websites that would only load for cellphone visitors. With the rise of touch screen phones of various sizes, as well as the addition of midsized screens on tablets, the need for a more effective solution became clear.

The most common technique in use today is to create one site for all devices. The strategy works by allowing site content to “find” the best position for itself depending on the size and shape of the screen. You can see this in action now if you change your browser window’s width by dragging it smaller or larger (if you are using a smaller device try changing the orientation of your screen). Another technique used with responsive web design is to dynamically remove content that is less effective at smaller screen sizes.

We consider responsive Web design to be a necessity for all websites. According to a recent Pew Research Center survey, 64% of Adults have smartphones and the numbers smartphone users are expected to continue to rise.

Parallax Web Design

Parallax is a visual effect often used in 2D video games to give the impression of depth. As a character would move across the screen, the background image would move at a much slower rate. Think of how when you are driving and look at a sign, trees or a building behind the sign appear to move but at much slower rate in comparison to the sign. When done correctly, incorporating this effect into website design can add flair to sites that otherwise might appear bland.

Parallax design could be a simple background moving a different speed or it can be used to create fully animated story telling elements. One thing we like to keep in mind is more complicated parallax designs may not work well with phones and small devices.

This effect often gives websites a modern look without placing too much emphasis on itself. This keeps site visitors focused on the content of the page without being distracted by page elements.

Single Page Design

Most websites when you click on a menu link will load a new page, but single page designs keep all the content on one page. If you click a link on the menu, the site will scroll down through the page to the content requested. Single page designs has been gaining popularity in recent years.

This design method can be very useful depending on how much content you may have to share. If your website has too much content on a single page it can cause the website load time to increase and in some cases slow down the browser. Single page designs are often used with storytelling elements such as the parallax design.

The major benefit of a single page design is the viewer never has to wait for new content to load. Simplicity is key to a well-designed single page with each section focusing on its material. This allows you to focus your energies on your content without having to worry about fluff for pages that might have seemed bare before.

Flat/ Minimalist Design

A good example of flat design is Google’s logo. From 1998 to 2010 Google’s logo utilized 3D shapes with shadows behind the 3D shapes. In 2010 Google removed the shadows and toned down the 3D shapes. In 2013 Google removed all 3D traces from its logo using a flat look. It is often considered that web developers made websites too busy and graphical in prior years distracting users from the content. This led to the trend of minimalist design, which Google further applied to its many other product logos.

Graphics with a flat design bring the added benefit of a small file size. This allows websites to load faster due to a decrease in required resources. Using the idea of simplicity, websites that follow a flat design often have a very clean look. Think of a modern art gallery where there are only but a few pieces of art hanging on a blank wall; this allows the user to focus directly on the material displayed without distraction.

For more modern web design techniques check out part two.