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...

The basic principles of CSS floating are displayed in this simple diagram

Floating elements with CSS

Any HTML element or <div> block can be floated to the right or to left by using the property float. That is to say that the <div> block or element, including its contents, either floats to the right or to the left in a document (or another containing box). The content which follows will fill the gap left behind. Float can be set as either left, right or none. The following figure illustrates the general principle in a little more detail than the on above.

CSS float in action

If, for example, we would like to have text wrapping around a picture we could float the image to the left and the following content would fill the gap (thus wrapping around it). The result would be like this...

CSS float example

The HTML code for the example above, look as follows:

<div id="picture"> <img src="images/bill.jpg" alt="Bill Gates"> </div><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture, so none of the image is cut off, and then set the property float to left:

#picture { float: left; width: 100px;}

Floats can also be used to create columns in a document. To create two columns, you simply have to structure the desired columns in the HTML code with <div> as follows.

<div id="column1"><p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p></div><div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p></div>

Now the desired width of the columns is set to 50%, and then you simply float each column to the left by defining the property float. Try it out for yourself.

#column1 {float: left; width: 50%;} #column2 {float: left; width: 50%;}

Clear (Stop filling after floating)

The clear property is used to control how the elements following floated elements in a document behave. By default, the subsequent elements are moved up to fill the available space which will be freed up when a box is floated to the side. The property clear can assume the values left, right, both or none. The principle is, if clear, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above. In other words, it won't fill the gap left behind.


<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div><h1>Bill Gates</h1><p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

To avoid the text from floating up to fill the gap and sit next to the picture, we can add the following CSS, Try it out for yourself.

#picture {float: left; width: 100px; } div.floatstop {clear: both;}

Next Up

Floats are useful in many situations and will often be used together with positioning. In the next section we will take a closer look at how to position html elements using CSS. There are two main types of positioning, relative and absolute, both are explained.

CSS Padding, Borders and Margin

Margin and Padding:

Now let's look at how you can use your knowledge of the box model to change the presentation of elements by setting the margin and padding properties as shown in the above example.

An element has four sides: right, left, top and bottom. 
The margin is the distance from each side to the neighbouring element or the outer borders of the document. As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

CSS Margins

The CSS code for the above page would look like this,

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}

Or, like background and font, you could compile the CSS code using just margin. Margin recognises the values in the order top, right, bottom, left.
body {margin: 100px 40px 10px 70px;}

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

p {margin: 5px 50px 5px 50px;}

Padding can also be understood as 'filling'. This makes sense as padding does not directly affect the distance of the element to other elements but rather defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colours. By defining padding for the headlines, you change how much filling there will be around the text in each headline. Try out the code below yourself and see what it looks like.

h1 {background: yellow; padding: 20px 20px 20px 80px;} h2 {background: orange; padding-left:120px;}

Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

border-color

CSS Borders

CSS Border Styles

The CSS Box Model

The CSS Box Model

The box model in CSS describes the boxes which are automatically generated for all HTML-elements and which you can control using CSS. The box model contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed. The illustration above is purely theoretical, so let's try to put this new information into practice.
<h1>Article 1:</h1><p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>
By utilising our knowledge of the box model and adding some CSS (examples to follow) to the previous HTML the example could be presented as follows...



The image below shows how each HTML element is surrounded by boxes which we can adjust using CSS.

The numbers around the areas are the margin and padding values

Height and Width

The height and width of each element or 'box', as represented by the box model can also be edited using CSS. In this section, we will take a look at how you easily can define the height and width of an element. With the width-property, you can define a certain width of an element. The example below sets the width of a <div> with a class value of 'box' to 200px.

div.box {width: 200px;}

In the example above as we did not specify a height, the height of the box will be set by the content of the box. You can of course set the height of an element with the property height if you wish.

As an example let us try to make the box in the previous example 500px high:

div.box {height: 500px; width: 200px;}

Tip: If you set the height or width to a value too small the content may prevent the code from working or in other cases some of the content will disappear. To ensure neither of these thing happen use the code overflow:auto. This will create a scroll bar on the right side of the div block so you can scroll up or down to view the content while still retaining the height and width you set. See the example below.

Next Up

In the next lesson we will look at examples for the padding, border and margin that we have identified as part of the box Model.