ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

4 Elements of Modern Web Design

Updated on October 30, 2015

There is a way of making websites that seems nothing more than a hangover coming from the graphic design industry. It is similar to a scenario where the client is in need of a website so the client goes to a web design agency. After the initial talk, the agency gets back to the client with some static designs for the client to consider. In essence, these designs are representations of what your website will look like hopefully.

Of course, the client can take the design as is or have the agency tweak it until it is to his liking. This process can take hours or weeks; it all depends on the agency’s skill and the client’s vision. Once the agency comes up with a design that the client likes, they will go and “work” on the website. This might make sense at first but if you think about it, it doesn’t really seem at all viable since what the website looks like doesn’t really matter if it doesn’t work.

Old Website Design

Back in the early days of web design, the example above wasn’t the only common practice that made the old way so sloppy. Back then, the only way to make websites was to make them by hand and this involved making designs using a graphics package then slicing and dicing them so they can be turned into HTML. This was done with tables and then later with the use of CSS. This manner of making websites can still be used today but it is a very slow and painstaking process that requires a lot of skill, and as a result it is extremely inefficient.

This method of constructing websites was so expensive and slow that website owners had no choice but to go with as few web pages as possible. This posed a problem since these websites with too few pages put themselves at a massive disadvantage. They couldn’t attract as many customers as they wanted and their conversion rates were just as bad. The reason for these was that the sites either had too much info to maximize the page or they have too little info. The first scenario meant search engines and readers had a hard time finding out what the page is about and too little info meant the site’s reach was cut short.

As you can see, there was a big problem with the old way of designing websites. Luckily, times are changing and now more and more web designers and owners are finding the light and modernizing the way they design their websites.

Modern Website Design

Modern web design is still about looks – your website has to look good if it is to attract people but it also works on the premise that websites are to be used, not just viewed. Older web designs placed too much emphasis on how a site looked that they forgot that a website was used to draw in readers and turn them into customers. It doesn’t matter how good your website looks because if it feels clunky and doesn’t work as it should, then all that beauty will go to waste.

Modern web design has more to do with industrial and product design, unlike the old ways which had more in common with graphic design. The way a site functions and the content it delivers go hand in hand with cutting-edge graphics and colors. Websites that are designed using modern principles stand out from the pack not just in looks but in functionality since they offer outstanding user experience. It is very easy to tell apart modern web designs from old and bad web designs. Bad web design is often characterized by the lack of usability, poor user experience, and poor testing.

Modern web design is all about the users. To drive the point home, websites are there for the customers or the target readers. If you have the kind of website that gives people what they want or what they are looking for with minimal fuss, then that is a successful website.

The thoughts and actions that are needed to create a good and modern website cannot be completed in a board room or in Photoshop. The same thoughts and processes that go into car, furniture, and phone designs need to be applied to website design in these modern times.

Elements to Consider

There are elements that need to be present for a website to be considered truly modern in design and efficient at the same time. If you are designing a website or planning to have a web development company do it for you, these are some things you need to consider:

  • Unique typography – This might seem a tad frivolous but you will be remiss if you fail to consider the value of using a unique typography in your website design. You see, one way to ensure the success of your site and your brand is by branding and using a unique font that identifies your business. If you do this, you are already working on branding the moment people land on your site. Take for instance the typography used by The New Yorker in their website. One look and people know what it is they are looking at and what to expect from the site.

  • Flat design – Modern web design is characterized by the use of flat design. This type of design is the kind that does away with 3-dimensional effects and other fancy techniques. It relies on simple illustrations that grab the attention of readers. One very good example of a website that makes use of this design is Wistia. It has a very minimalistic look and it places an emphasis on the brand’s focus rather than design. However, the flat design doesn’t take away the overall impact of the site. In fact, it makes the site look sleek and clean. Websites that use a flat design guide their readers directly to the content, making sure they don’t get distracted by fancy designs.

  • Hover effects – These hover effects are like markers that allow readers to know where they are on the web page. When users place their cursors over the part of the website where there are hover effects, the colors change and even feature highlights. These effects make the user experience very rich but they are not intrusive at all.

  • Scroll-to-page sections – Some websites with modern designs have this feature where the user clicks a link on a webpage and they are brought to a different part of the page. A good example of this is the Urban Bound site. On their site, they have designed the navigation in such a way that it has links to the most important sections on the site where they want their readers to go and have a look. For instance, if you are looking for reviews, you can just click on the link that says reviews and the page will scroll down to the part where the reviews are located.

These elements of modern web design are very simple but their impact on websites are unmistakable. One thing to remember about these elements is that they subscribe to the saying that websites are for using and not just for viewing. These little additions are not intrusive or overly fancy but they are really beneficial especially for websites that want to promote usability and user experience. Older websites that focus more on design than content will lose out in the long run if they fail to adapt to modern website design practices.

If you were a web designer, what would your focus be?

See results


Submit a Comment
  • profile image

    John Mcqueen 

    3 years ago

    Thank you for your Hub Page. I think you're right that the elements to a modern web design should consist of good typography in consideration.

    However I think a bigger emphasis should be on the functionality of the website as you hinted too earlier. These aesthecis are important with today's web space being so competitive. You need to stand out and this is why there are many websites using motion background nowadays.

    Still with all these, it's still good to focus on the basics of simplistic content for communication, responsive design since a lot of traffic is coming through mobile, as well as eye catching graphics that match (hint, for those SMB hoping to do their website graphics and social media content, you can use YouZign to make them match - Basically it can be very easy to get caught up with the less important matters like typography; while important, not the most critical component to a website success. The overall feel of the site like the overall feel of the real estate matters and this is where typography comes in...extra touches.

    Now back to what you mentioned in the Hub intro. I think the reason why they have to ease out the design before they work on the website functionality is because the website development relies a lot on the design. You need a photo shop PSD before you can convert it to a WordPress theme typically unless you first take a completed theme and then edit it.

    It's much like you need a map and a vision or an architect before you do the engineering and building. Yes the structure of the building is important relative to the looks but the looks will play into how the structure is built.

    Good Hub.

  • kgmonline profile imageAUTHOR

    Geri MIleff 

    3 years ago from Czech Republic

    @Kyle Lanning - Thank you for your comment! :) I totally agree with you that "Consistency is the key to usability."

  • davidverma profile image

    David Verma 

    3 years ago from India

    There is one more i want to add... concern with seo professionals, while designing a website - Indeses

  • Kyle Lanning profile image

    Kyle Lanning 

    3 years ago from NC

    Great article. My rule and what I preach is to make sure to keep things consistent and as simple as possible. Everytime we visit a new website, there is a learning curve (some greater than others) that is required to properly navigate the site. You want to minimize this learning curve for your end user as much as possible or you'll just have high bounce rates. Consistency is the key to usability.

  • kgmonline profile imageAUTHOR

    Geri MIleff 

    3 years ago from Czech Republic

    Thanks, Jodah :)

  • Jodah profile image

    John Hansen 

    3 years ago from Queensland Australia

    Interesting and helpful kgm. Thanks.

  • kgmonline profile imageAUTHOR

    Geri MIleff 

    3 years ago from Czech Republic

    @Jackie - thank you, Jackie :)

  • Jackie Lynnley profile image

    Jackie Lynnley 

    3 years ago from The Beautiful South

    Another article well done! Up and sharing.


This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

Show Details
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)