Design Post Update

What web design trends will merge in 2017? Find out here.

2017 is here and it’s bringing more technological breakthroughs and surprising web design trends than the world has ever seen. With each passing day, the modern world hits a new record for digital advancement. The future of web design looks bright for those ready to embrace positive changes.

In this article we shine some light on the web design trends that we think will be big in 2017, so here they are, our tips for the big web design trends of 2017 ...

• Touch
• Big
• Space
• Original
• Video
• Custom
• Voice
• Animation

Touch...

We think haptic technology will be a big deal in 2017

The mobile-first approach has been around for a few years now, but with mobile-phones now officially named as the primary devices used for browsing the web, more companies are realising the importance of having a site that effectively delivers content on a smaller screen. Furthermore, engaging users on mobile devices is becoming more difficult as the 'scroll' and 'swipe' design approach  used in many apps has led to users having a very short attention span when using their mobile device. This is where haptic technology comes in.

There are three sensory systems related to sense of touch in humans: cutaneous, kinesthetic and haptic. All perceptions mediated by cutaneous and/or kinesthetic sensibility are referred to as tactual perception.

The sense of touch may be classified as passive and active, and the term "haptic" is often associated with active touch to communicate or recognize objects.

Haptic communication recreates the sense of touch by applying forces, vibrations, or motions to the user through their mobile device.  Currently the Samsung Anycall Haptic enables users to feel clicks, vibrations and other tactile input. In all, it provides the user with 22 kinds of touch sensations in response to various user actions.

But how does all this relate to web design? Well, for example a strong vibration could be activated to discourage users when exiting a website or app. On the flip side a relaxing, pulsing sensation could be output from a meditation app on your mobile device. There are, of course, numerous other possibilities and I think 2017 is the year when we will see haptic technology emerge as a major feature in web and app design for mobile devices.

Back To Top

Big...

This website utilises big text and big images to dominate the screen

Images, Text and Video are all set to be big in 2017, and I mean that literally.

With the rise in mobile usage, users are reading less, scrolling more and browsing quicker so designers are having to go big to grab attention.

Full screen background images were popular in 2016 and we also saw the introduction of full screen video backgrounds too on websites such as pay-pal, more on that later though. This trend is expected to continue and become more widespread in 2017 as websites try to get their point across quickly and visually.

Large custom typography is also set to be used more to create personality, evoke emotion and set tone. As device resolutions become sharper and type becomes more easy to read on-screen, companies will look to push the limits of typography even further in 2017 to appeal to their target audience.

So expect to see an increase in over-sized and full screen type this year, hopefully it'll be of the beautiful, unique and hand-rendered type and not the bold, blocky and in your face type. We'll have more on the benefits of a custom approach later.

Back To Top

Space...

Back To Top

Original...

Expect to see more illustrations like this in 2017

As discussed above, the rise of mobile device and UI patterns now places UX as the most important aspect of design, meaning that many sites now look and work in similar ways. This is fine for users as they now know, instinctively, how to navigate around a website that they have never visited but it's not fine for a company who wants to stand out from the crowd.

In order for a brand to really stand out and strike a connection with it’s audience, while still using a design users can manage, they’ll need carefully considered and completely bespoke visuals which are more representative of who they really are. We can see this being a big web design trend in 2017 and is one that we really look forward to seeing.

Original illustrations are fantastic, versatile mediums for creating playful and friendly visuals which add an element of fun to a site. 

Talented illustrators are able to create illustrations which are full of personality and tailored to match the tone of the brand, something which brands will be striving for more than an ever in 2017.

A custom, purpose taken photograph is the main feature of this website

With a unique style of illustration established, brands are then able to roll that out through their entire identity, for use in large header images, custom iconography and beautifully animated visuals. Dropbox, is a great example of a brand who uses illustration to create beautiful, friendly and totally unique visuals which are full of character to appeal to their users.

This demand for originality will hopefully lead to the death of the dreaded stock imagery that we see everyday across the web and lead to a rise in more authentic photography in 2017. Brands and designers will now be thinking more carefully about the imagery they use on site, hiring professional photographers to take their shots which frame them in the way they want to be seen.

Unfortunately, it’ll probably be a long time before much of the cheesy stock photography completely disappears, but expect to see it disappear a little in 2017.

Back To Top

Video...

This website utilises a full screen video background to epic effect

One trend that grew quickly the past year is video content and we expect to see it grow further in 2017 especially as video content is now increasingly cost-effective to produce, with apps that enable quick and easy live video recording and professional-grade productions. The combination of decreasing costs of video and growing popularity of this medium is the perfect storm for video to overtake written content as king in 2017.

They say a picture paints a thousand words, but a video does that tenfold,

Video, although by no means new, is long-established and versatile medium, useful for story-telling, marketing and vlogging alike, and has several advantages over traditional photography. Where static imagery is flat and motionless, video is altogether more dynamic, using sound and movement to appeal to the senses and hold attention for longer.


Watch the video image above for a few seconds and see how encapsulating it can be. Much like with animation, a moving image on a page instantly captures the users attention, drawing them in so brands are able to get across their carefully constructed narrative and message.

Video is quickly taking over the internet, and the above reasons are testament to how successful it is as a means for content delivery. As well as using video for marketing purposes, it’s becoming more widespread in social media, with the recent releases of live-streaming services Periscope, and Meerkat illustrating the demand people have to not only view video content, but produce their own.

The benefits of video outlined above are reason enough for brands to want to incorporate it, but they are also great reasons for any freelance web designer to start using more video as a feature in their designs.

Back To Top

Custom...

Unique and personalised online user experiences are increasing sought after

It’s no secret that responsive web design has taken the web dev community by storm. In 2017, however, we think responsive design will reach a whole new level. Instead of simply adapting based on device, websites will adapt based on each user to give them an entirely custom experience. For example a website’s content, color scheme, font sizes, and spacing could respond to accommodate a user based on their age.

5 Different Approaches To Creating a Website

It is important to state before we start that the creation of your website is just one of the steps in the web design process and it's not the first one! So I would really recommend reviewing the web design process first to make sure you are adequately prepared for this stage. So many people jump straight in at this stage and waste a lot of their time because they have not completed the previous steps in the process so don't say you weren't warned. Now with that little rant over, lets look at your options for creating the website.

There are 5 main ways to create a website and although not all of them require knowledge of HTML and CSS it is definitely better if you have at least a basic understanding of them.

The 5 ways to create a website are...

HTML can also be used to add video and audio files to your webpage

HTML Video

Videos can be easily hosted online embedded into your web pages using html with the <video> tag to display your media file. It works in a similar way to the image tag in that a 'src' attribute must be defined in order for the video file to be located. However with video and audio files the player details as well as the file details need to be specified. Here is a look at a sample,

Images are very powerful tools in web design and help convey the message and style of a business instantly

HTML Images work in a similar way to links in that they require a single element but also only work together with one specific attribute. So with links the element <a> always uses the attribute 'href', with images the element <img> (for image) always uses the attribute 'src' (for source).

The <img> Element

HTML links are what makes the web ... a web!

HTML Links are clickable text or images that connect one webpage to another. To make links, we use what we always use when coding HTML, an element. A simple element <a> used with one attribute 'href' and you will be able to link to anything and everything. The element 'a' stands for anchor and the attribute 'href' is short for "hypertext reference", which specifies where the link leads to, typically another web page on the internet but it can also lead to a file of any type.

External HTML Link

Here is an example of a standard external html link to www.google.com
<a href="http://www.google.com/">Here is a link to Google</a>

The html5 code above would look like this in the browser,

Here is a link to Google


In the above example the attribute 'href' has the value "http://www.google.com/", which is the full address of google.com and is called a URL which stands for Uniform Resource Locator. Note that "http://" must always be included in URLs.

The sentence "Here is a link to Google" is the text that is shown in the browser as the clickable link, it does not really matter what this text is but for the sake of visitors to your website try to use relevant text. As always remember to close the element with an </a>.

Link To Your Own Webpages

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages, let's call them page1.html and page2.html, and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.html to page2.html would look like this,
<a href="page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named "subfolder"), the link would look like this:
<a href="subfolder/page2.htm">Click here to go to page 2</a>
If it was the other way around, a link from page 2, in the subfolder, out to page 1 would look like this:
<a href="../page1.htm">A link to page 1</a>

In this case '../' points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing '../../'. If you find this hard to follow or understand the best thing is to try out creating some links yourself, practice makes perfect!

Link Within A Webpage

You can also create internal links within a page - for example create a table of contents at the top of the page which has links to each chapter below. All you need to use is a very useful attribute called 'id' (identification) and the symbol "#". Use the id attribute to mark the element to which you want to link to. For example,
<h1 id="heading1">heading 1</h1>
You can now create a link to that element by using "#" in the link attribute. The "#" tells the browser to stay on the same page. The "#" must be followed by the id of the tag you want to link to. For example,
<a href="#heading1">Link to heading 1</a>

As always, try it out yourself but remember that if the content you are linking to is within the same screen view, i.e. you don't have to scroll down to it, then the link may appear not to be working when it actually is. This is because the link and the area you are linking to are too close to each other.

Link To A Document

You can also make a link to any type of file, such as a word document or PDF. It is done in almost the same way as all other links.
<a href="documents/info.pdf">Click to open the info file</a>

In this example the file is a PDF called info and it is located in a subfolder called 'documents'.

Link Titles

In addition to the 'href' attribute, you can also use the attribute title put a title on your link which appears when you hover the mouse cursor over the link. This can be used to provide extra information to the user about where the link leads to. For SEO purposes it is also recommended that you add a title attribute to all links. For example,
<a href="http://www.google.com/" title="This leads to Google">Google</a>

The code above would appear in the browser like this, (Hover over it to see the title).

Google

Next Up

Next up we explain how to add images to your webpages using HTML.

HTML can be used to structure tabular data

HTML Tables are used when you need to show 'tabular data', in other words information that is logically presented in rows and columns. NOTE: Do not attempt to use tables to arrange the layout of an entire webpage or website with tables, that is what CSS is for. But more on that later.

Building tables in HTML works in a similar way to lists although at first they may seem more complicated. However if you take it step by step it is actually strictly logical - just like everything else in HTML. Tables use three main elements, <table> for table, <tr> for table row and <td> for table data

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical. 
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical. 
• <th> stands for "table header" and is used within the first table row to set the table headings. Still logical. 
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical. 

See the example below.
The html code above will create a table like this in the browser ...


Try it yourself and experiment with different attributes to see what kinds of tables you can create using HTML.

Next Up

Once you have mastered the basics of HTML tables the next step is how to create web links using HTML.

Ordered HTML Lists

<ol><li>A list item</li><li>Another list item</li></ol>

The html code above will create a list like this in the browser...

1. First list item 
2. Second list item 

A visual reference of the a HTML page structure

Start With A DOCTYPE...

The doctype declaration must be the very first thing in your HTML document, before the html tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML5, the latest version of HTML, there is only one declaration, and it is very simple:

<!DOCTYPE html>

Note:

• The tag does not have an end tag.
• The declaration is NOT case sensitive.
• Always add the declaration to your HTML documents, so that the browser knows what type of document to expect.

The HTML Page Structure

The two main sections within a HTML document are the 'head' and the 'body' sections. The 'head' section will contain information about your page, none of which appears in the browser, and the 'body' contains all the content which will be displayed in the browser. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).

An empty HTML document is structure as shown below.

The structure on a HTML element

What are elements in HTML?

The foundations of HTML are elements. Elements give structure to a HTML document and tell the browser how you want your website to be presented. In this section we will learn what elements are, how they work and use a small sample of basic elements. Throughout this series of HTML notes we will be introduced to new elements in each section until we have an understanding of all the main HTML elements.

In general, elements consist of a start tag, some content, and an end tag. Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign '<' and end with a greater-than sign '>'.

Generally speaking, there are two kinds of tags - opening tags such <html> and closing tags like </html>. Notice that the only difference between an opening tag and a closing tag is the forward slash '/'. You label content by putting it between an opening tag and a closing tag. To learn HTML is to learn and use different elements and tags.

A HTML attribute can be part of a HTML element and is always followed by a value

HTML Attributes are effectively additional information for the html elements. Every attribute will also define a value to go with it. You will often use attributes in tags such as the body tag while you will rarely/never use attributes in, for example, a <br /> tag since a line break normally is a line break without any parameters to adjust.

Just as there are many different elements, so there are many different attributes. Some attributes are tailor made for one particular element while others can be used for many different elements. It also works the other way as some elements can only contain one kind of attribute while others can contain many. It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide. See the example below.
<p align="right">Text text text text text text.</p>


The html code above will create text aligned to the right in the browser like this...



Attributes are always written within a start tag and are followed by an equals sign and the attribute value is written between inverted commas. Tables, for example, can be made more interesting using attributes (don't worry about the table code as we will come to that soon).

For now lets focus on two attributes commonly used with tables are border and cellpadding, see the example below.