Posts

Remember what web design trends use to look like in the 90s and 2000’s?!?

Things were simple back then; more attention to text and the pages remained quite dull.

Just take a look at fanfiction.net, which has been around since 1998. It’s a great example of a typical web page back from the ol’ Web 1.0 days.

web 1.0

FanFiction.net…you don’t look a day past 1998.

Things have come a long way since then.

With the increasing importance of web technology for businesses and individuals alike, and with the introduction of new uses such as mobile, designers needed to come up with new design concepts. We’ve been through material designs, hamburger menus, animated backgrounds, and in general simple typography and designs to cater for the increasingly speedy nature of modern life.

When you spend as much time online as I do, and when you’ve been surfing the net as long as I have, you start to notice some things.

I’ve put together a list of web design trends that I’ve noticed throughout the last year.

Hamburger menus

This trend came out of the mobile-first approach as a design solution for smaller screens, however they’ve risen in popularity and are being used on desktop screens. A hamburger menu rids the need of taking too much room on a website, and makes a site appear free of navigation clutter like drop-downs, social icons, search bars and utility links. Since most people are familiar with the usage of a hamburger menu their ubiquity across screen sizes may go unnoticed.

Vertical user flows

Mobile is here to stay and Google confirmed last year that it witnessed more searches via smartphones than desktops. This has caused many web designers to give their websites the feel of vertical patterns and scrolling. There was a time back when I was in school where people built horizontal scrolling sites, and they were cool!

But you just don’t see them around anymore.

Now it’s become important that websites allow users to scroll more on smaller screens. In short, vertical user interfaces have become the thing of present in 2017. The act of vertical scrolling is being used to lure prospective customers into moving down deeper into a site’s content, and thereby increasing conversion rates.

Fewer menu options

If you were paying attention in 2016, many websites were redesigned with reduced primary navigation options. This has only continued in 2017. Header menus that previously presented 5-7 options have been reduced to 3-4.

Back to top

Themes and colours

Modern retro

Whether it is pixel art, vintage typography or 80s and 90s inspired imagery; retro with a modern twist is in right now. It has been having a greater influence on web design over the last few years, with many sites making use of this style.

Dark aesthetics

youtube dark theme

 

I’ve noticed the last while that the current versions of my software tools have been released with dark UI designs. I think this trend is becoming more common in web design as YouTube has released an optional ‘dark theme’ this past year.

Bright gradients & two-tone photography

Gradients have been huge lately. A good example of this would be Agadir-based agency symodd.com who make this two-tone effect look fresh and modern, with their full-screen, gradient-washed homepage.

Toning has always been one of the most accessible photo manipulation tricks designers can use in Photoshop and Lightroom, and these parred-down, two-tone colour schemes look cool and contemporary on Australian Design Radio.

Landing pages with monochromatic colours and a contrasting CTA button

CTAs (call-to-action) should always stand out, and a bright pop of colour on an otherwise neutral or contrasting colour palette can really do the trick.

Back to top

Fonts

Dynamic & bold typography

The advent of Google Fonts and Adobe Typekit has made using new and different fonts and scaling them to large sizes much easier than it ever used to be. It’s allowing designers to be able to do simple and dramatic layouts, which is benefited by today’s high-resolution displays. Basically, it gives you the opportunity to display your brand identity in a unique and differentiated way.

More and more companies are turning to big, bold typography in the ‘above-the-fold’ to anchor their home pages. This style works best when the rest of the page is kept minimal and clean. Much like these examples here.

More serif typefaces

For anyone who’s studied design in school, you would have heard that sans serif typefaces are preferred on screen displays. They are believed to be easier to read than serif fonts. Serifs or other typefaces with thin alternating strokes can disintegrate at certain sizes or screen resolutions. However, since more people have high definition screens on all their devices, this has lead to enhanced readability and designers are now making greater use of serif typefaces.

Mixing horizontal and vertical text

Freeing text from its usual horizontal alignment and placing it vertically on a page adds some refreshing dimension. Take this example from director Matt Porterfield, which mixes horizontal and vertical text alignments on an otherwise very simple page.

Oversized type

Source: nurturedigital.com

In-your-face lettering is going to continue to get bigger and bolder. From single word homepages that ask users to move through the design on a whim, to words in interesting typefaces or with splashes of color, text is more important than ever.

Back to top

Graphical elements 

More Authentic Imagery

Every business owner who’s been making a living online since the early 2000’s has always told me, “never use stock photography.”

Who ever knew these people were 10-15yrs ahead of this trend?

Because of the popularity of Instagram and other visually driven platforms like Pinterest, there has been a significant increase in companies and websites opting for authentic photos rather than generic stock images.

Business owners realized the importance of showing real people and company processes, to establish a stronger connection with their clients and to “put a face” to the brand. Photographs, custom illustrations, as well as cartoon type of videos are a powerful tool for attracting new clients, easily explaining a new concept and building up strong brand recognition. 

More SVGs

Scalable vector graphics (SVGs) present plenty of advantages over traditional formats such as PNG, JPG, and GIF. Instead of being pixel or raster-based, SVGs are resolution-independent, so they will appear stunning on any device or screen. Are you using SVGs in your design work yet?

Hybrid material design

There was a trend in design for going very flat. Microsoft’s operating system is indicative of this. They got rid of shadows, textures and everything got super flat. That was predominantly the style for a while and now we’re starting to move away from that.

Google has developed something called material design which is essentially a hybrid between flat and a little bit of a more volumetric shape built into it, so it’s easier to navigate and move around while protecting the modern visual aesthetic. Also, material design is better for mobile in terms of understanding how to navigate and what you actually need to do on the website or app.

Full-width & full-screen media

Full width image/video sliders are very trendy these days. Studies have shown that large images make people stop and take notice. It’s exactly that kind of “interruption” that contributes to higher levels of conversion.

Illustration

More companies are turning to illustrators and graphic artists to create bespoke illustrations for their websites. After years of flat design and minimalism, adding illustrated touches to your site is a great way to inject a little personality, as seen in this charming example from NewActon.

Geometric shapes and patterns

Whimsical patterns and shapes are popping up more frequently on websites, adding some flair in a landscape otherwise ruled by flat and material design. Toronto-based design studio MSDS uses patterned letters on their homepage.

Back to top

Video, animation and sound

GIFs and Cinemagraphs

Whether they know it or not, people love animation. Everything from large animated backgrounds to subtle small animations like GIFs and button hovers. The human eye is immediately attracted to any movement. Animation creates a level of visual feedback for the user, which in turn, makes for more attractive and engaging experiences.

Cinemagraphs (high-quality videos or GIFs that run on a smooth, continuous loop) have become a popular way to add movement and visual interest to otherwise static pages. They are even being used more commonly in display advertising.

The ability to create animated loops is much more accessible now than in days past. Back in school, I had to approach animation projects from the concepts found in stop motion. Basically, I was drawing and/or photographing every single frame and then using computer software to make a video out of it. It was always a lot of work even to just make the shortest of animations.

These days it’s almost like you’re working in reverse. In the case of cinemagrphs, you can use mobile apps (like Flixel) to shoot video first and then use software to make animated stills. Another way to look at it is as a subtractive move. You’re taking information out of the video to make still motion. This has shortened the overall time it takes to make an animation. As a web design trend animation will only continue to change and evolve but we’ll always be using animations in our designs.

Videos with sound

One thing I’ve noticed this past year in social feeds like Facebook and Instagram is that when scrolling past videos they now autoplay with sound. Whereas before, they would autoplay with captions and the user needed to click on the video to get audio.

There was a time in the last 5 years where Google and Facebook would penalize advertisers who drove paid traffic to landing pages that had videos that would autoplay. I’ve personally found more lenience towards this recently. It also has me believing that users are becoming more accustomed to autoplay media while online.

Back to top

Broad Observations

Responsive First Approach to Design

‘Mobile’ and ‘responsive’ design are buzzwords that have been thrown around a lot in the last several years. With that being said they have also changed a bit as well and I’d like to provide my own distinction. Responsive design is an approach to web design that uses CSS media queries and flexible layouts.

The ‘mobile first’ approach simply means designing for the smallest screen first and then working up from there.

Not too long ago website owners use to have separate stylesheets for different screen sizes. Essentially having one set of pages for desktop and another set for mobile.

There has been an upgrade to web design thinking in how website owners manage their sites. The ‘responsive design’ approach really is an evolution over the ‘mobile first’ concept because it reduces the number of files needed for browsers to display a site. Removing this bloat makes websites run better so designers can truly focus on user experience.

Emphasis on the content

We’ve spent years adding things to our websites such as sidebars, headers, banner ads, sidebar ads, popups, social media buttons, etc. All of these elements have ended up cluttering our websites and taking up more and more real estate, taking the attention away from the entire point of a web page: the content. In 2017, websites started moving back to basics and placing more emphasis on content.

No more traditional web design

Companies are beginning to wane on using traditional web design concepts. In the old ways, the role of the design was to make the tech look good to the audience. With the emergence of experience design, the focus and reach of web design have shifted. By using human-centered concepts, it has frantically changed the way we view web designs. User experience has become the basis for web design now.

The start of the end of flat design

All the rage that once existed in flat web design has just about run out. Web designers have just about burned out from applying the same basics over and over again. Because this technique is being used by virtually everyone, websites often look the same overall.

We may be looking at a future where flat web design may become obsolete. In their place, more imaginative and unique layouts and designs will take over.

Back to top

New technologies

Virtual reality & 360 videos

Virtual reality has never had such a bigger year than that of 2016 and now it can be experienced on browsers as well. It has been gaining momentum very quickly and has been seen in Samsung commercials as well. VR is on the same path as that of conversational interfaces. However, the user interface challenges with VR are far more robust and easier to understand than conversational interfaces. I’m expecting to see a lot more virtual and augmented reality in the near future.

AI-powered bots and conversational interfaces

In terms of visuals, bots are unlikely to have a big impact on web design, but they will significantly influence how designers think about creating websites. AI-powered bots are going to get even more realistic and complex, empowering businesses to automate communication and sales. Using tools like Letsclap, online businesses will be able to connect with their customers via messaging apps like WhatsApp, Facebook Messenger or WeChat, providing customized customer support and commerce. Conversational interfaces will be a huge shift, helping big brands express different sides of their personality and making them more human and approachable.

More than 900 million people around the world use Facebook Messenger every month, so the introduction of Bots for Messenger last year was a welcome addition to the toolkit of communication channels for businesses of all sizes. Any brand can build a Facebook bot now without any coding knowledge. Integrations with tools like Botsify or Chatfuel make the setup process so simple that it’s becoming unusual not to use a customized bot. This year, we’ll see the conversational interfaces reach a higher level of personalization and inventiveness.

Back to top

Web design trends

Do you agree with the web design trends you have seen in this article? Have you seen some unexpected web design trends or changes from previous years? I’d love to hear what you have to say so leave a comment below.

 


 

Subscribe to my email list so we can keep in touch.

 

 

If you’re into creating websites or interested in having one, you surely must have come across the term SEO (search engine optimization). By definition SEO is optimizing your website content so that it achieves better search results in various search engines like Google, Bing, and Yahoo. I’m going to share with you some basic seo tips you can start using today to improve the search ranking of your website.

Once you understand how a search result is displayed by a search engine and what are the potential factors involved, it gets relatively simple to build a website that serves both human users and search engines.

Understanding how the search engine works

Before I get into explaining how SEO works, it’s important for you to understand how the results in a search engine are displayed.

When someone searches a particular word in Google, the search engine is required to search this word across the World Wide Web through different websites all over the world.

This is called a keyword.

The most relevant websites would be displayed on the first page of Google. Now, the ranking of the websites is based on sophisticated algorithms run by “spiders” that crawl the web to index new webpages that are being published all the time. There are also “bots” that scan and read a webpage’s content (all the text, images, videos, links etc.) that determine the order in which webpages and websites are ranked.

Apparently, Google has over 200 ranking factors and they don’t release what they are specifically so no one can artificially manipulate the search engine to get their website to outrank everyone else. That would be unfair.

However, below are the most common parameters a search engine would use to gauge the relevance of a keyword to a website.

  • The highest number of clicks: High numbers of clicks means that number of users have visited the page. The search engine would feel that this website would be most relevant to the keyword used by the user.
  • Keyword Relevance: If the bots scan and find the keyword used many times in your post they would communicate to the search engine that the site will be related to the search criteria and would display the website on the first page.
  • Time spent on the website: Google will determine the time users spend on the website. More time spent on the website means that users are reading the content on the page. This makes the search engine decide that the website is more relevant and thus the website will have a higher ranking in the search result.
  • On-Page: On page SEO deals with the changes made on the website and in the contents itself. For instance, changing or adding a keyword to the title of the post to attract more traffic on your page. Some of the changes one can make within a short amount time which will help yield great results are the following:
    • Web page content: It is crucial that the website has relevant and high-quality content. Users should have a good experience once they visit your website. Especially while navigating through the different web pages.
    • Design: Keep your design minimalistic and one without a heavy amount of code. Ensure that your website is mobile friendly.
    • Upload time: Make sure your website loads within 1-2 seconds. On an average, a user will wait 5 seconds for a website to load. If the site is buggy or the web host has connectivity issues you would surely lose potential traffic. Google factors the loading time of a website while displaying the search results. Hence you should ensure that your website is quick to load.
    • Plugins: Plugins are a great way to optimize your website. Use a cache plugin to clear any unwanted cache. SEO plugin is a great way to edit your Meta title and Meta description and having the keyword used. Note that Meta title is a title that appears on the search result for a user after they search for the keyword. While Meta description helps to give a brief overview to the user what the website is about.
    • Optimize posts: Websites which have posts with around 800-1200 words tend to do better. However, not all topics and post can be that long. The minimum word count for a post is about 300 words. A good practise is to write 2-3 long posts and then have links to related posts with few words. Essentially, you’re making the long post the “parent” and the shorter posts that link to it the “child”. This will not only help you rank better on the topics related to the long posts but on other topics as well.
    • Bullet Points: Keep your content concise and develop a habit of making bullet points. This will help your post grab the attention of the scrollers who do not read the entire posts.
    • Use images and videos: For a post of 1200 words, at least use 4-5 images. They help in getting the attention of users. Post a video at the beginning of the post. If a viewer watches a 10mins video on your web page, this will help your search ranking drastically.

The above-mentioned basic seo tips do not directly affect your SEO ranking on Google. However will help you get more users and more traffic to your website, which plays an important role in optimizing your website to rank higher.

Here’s a short video that helps explain how search engines’ page rank algorithms work.

Basic SEO tips and keyword optimization every website owner needs to know about

Here are a few ways you can include the keyword in various different aspects of your website. These are the basic seo tips I share with my clients. It’s also what I focus on in my work to make the biggest impact on my clients’ websites.

  • Meta title:As mentioned already, using an SEO plugin to edit your web page title which displays in the search results.
  • URL extensions: Google has a way to identify which web page is regarding what topic through the permalink in the website URL. Edit the URL and include the keyword.
  • Hyperlinks: Use links within your website to navigate through different posts. In this way, you link the keyword to another related post.
  • Image alternative text or “alt text”: Image text helps Google identifying what the image is about. Rename the embedded image to a related keyword.

Off page SEO: This basically deals with back links which are nothing more than links which are directing users back to your website. The common strategies to obtain good back links are as follows.

  • Social Media: Use all platforms of social media to promote your website. Create a page on Facebook or group on Google+ linking back to your web page. This method helps especially if you have a new website and social media is a great way to divert traffic initially.
  • Q & A Forums: Browse through Q & A forums like Quora related to your topic and try answering some of the questions there. Ensure you link your website to the answers. The clicks you get through this method are not significant, but by constantly giving quality answers would help build a reputation in the community.
  • Comment on popular blogs: Comment on at least two popular blogs who have more influence related to your topic and link back to related blog posts or pages on your own site.

Keyword research and content strategies

Understanding how search engines work and how to rank for them is only just the beginning. The next step after these basic seo tips would be figuring out what content you’d need to create for your website. In order to come up with your own content strategy for your website you’ll need to do some keyword research. There are plenty of online tools available for keyword research. Some are free, like Google Keyword Planner, and some cost money.

In a future blog post I’ll write a guide for how I conduct keyword research for my clients and how I implement these basic SEO tips in order to get results for my clients and make money as a digital marketing consultant.

So if you haven’t already, I encourage you to join my mailing list so you get notified when I publish future post.