The photo before and after it is colourised

This article will teach you how to colourise a black and white photo using Photoshop in 7 simple steps. Some amazing results can be achieved using this relatively simple colourisation process. You can turn relatively dull black and white photographs into stunning full colour images in just a few minutes. The 7 steps to colourising your black and white image are...

Open the image in Photoshop


So let's get started colorising your black and white photos now!

Step 1: Open your black and white photo or image in Photoshop

Ok, so this is a nice and obvious first step. Simply open Photoshop then click on File in the top left corner of the screen and on the drop down click on Open. Then in the window that opens, navigate your way to your chosen image, select it and open it in Photoshop.

Step 2: Convert the image mode to CMYK

Convert the image to CMYK Color Mode

This process can be done in RGB but as the image you are editing likely started out as a print and in case you want to print it out after it is colourised it is best to edit in CMYK mode. So just click on Image > Mode > CMYK Color and Click OK to Confirm Conversion if prompted.

Step 3: Duplicate the layer

Duplicating the layer

This is just a precautionary step in case you accidentally make a mess of your image! This way we will be editing the duplicate layer and your original black and white image is safe and sound. There are numerous ways to duplicate a layer in Photoshop, the most obvious being the one shown above - click on Layer > Duplicate Layer, then name the layer in the pop up window. Crtl + J is the keyboard shortcut for duplicating a layer in Photoshop.

Step 4: Taking a snapshot via the history window

Taking a history state snapshot

The process of taking snapshots will be key to this process. If you are not familiar with this process, it simply involves clicking the little camera icon on the history window in Photoshop. What this does is take a digital "snapshot" of the current history state of the layer, we will use this to store different colours which we will then use to "paint in " the original black and white image using the history brush.

This first snapshot,shown above, is another precautionary step here, really a bit of practice as we won't actually use this particular snapshot later on. However you may use it for your own image, especially if you want to retain some areas of black and white.

Step 5: Creating the skin colour snapshot...

So we'll start with creating the colour for the skin. As explained already, we will be creating a colour, storing it in a snapshot then using the history brush to paint it on the relevant areas later on.

First of go to Channels and select just the cyan layer as shown above.

Then in the top menu bar click Image > Image adjustments > Brightness/Contrast and input a value of  85 Brightness and 25 Contrast. Obviously you can use different values to achieve different skin tones.

Then, back in the channels window select the CMYK layer to see the skin colour, as shown below. If you are not happy just select the Cyan layer again and edit the values until you are happy.

Now, most importantly, we store this colour for later use by taking a new shapshot from the history window, rename the snapshot "Skin" so we know what we want it for later on.

Step 6: Create the other colour snapshots...

The process for creating the colours for the other areas we want to colour is slightly different but even easier. The areas we need different colours for are Hair, Background, Lips (nail polish too), Eyes, Jumper and Skirt.

For each area we want to colour in we will go to Image > Image Adjustments > Hue & Saturation and edit the values to achieve the colour we want. Then save that colour in a snapshot.

Feel free to use different values to the ones I outline below but be aware that each colour change is an edit of the one before so if you change one then all will require different values.

For the hair go to Image > Image Adjustments > Hue & Saturation and choose the following values hue of -43, saturation of 61 and lightness -5.

Then take a new snapshot in the history window and rename it hair.

For the background go to Image > Image Adjustments > Hue & Saturation and choose the following values  hue of -20, saturation of 15 and lightness of  -15

Then take a new snapshot and call it background

For her lips values of hue -15, saturation 72 and lightness 10. Which should create a rosy red/pink.

Take a new snapshot, call it lips. We will use the same colour for her nail polish.

For her eyes values of  hue -155, saturation 70 and lightness 5. Which should create a nice sea blue.

Take a new snapshot, call it eyes.

For her jumper values of hue -20, saturation 100 and lightness 20. Which should create a navy blue.

Take a new snapshot, call it jumper

And finally for the skirt values of hue 0 saturation -50 and lightness 0. Which is just a plain white.

Take a new snapshot, call it skirt

Step 7: Colourising...

OK, so that's all the preparation done, now for the fun part, coloring in! You can do this in any order really but I prefer to start from the bottom and work up.

Select the last screenshot layer (skirt) then click the checkbox in front of the layer above (jumper), which will show the history brush icon, as shown in the image below. This will allow us to paint the colours saved from the jumper snapshot layer onto the skirt layer (which we'll use as our base).


For accuracy you can use the magic wand selection tool to select the jumper area and use then use the history brush tool to colour it in as shown above. Cool, right!

We will repeat this process now for the other areas of the image.

Now click in the box in front of the eyes layer, again select the area you want to colour using an appropriate selection tool and then use the history brush to colour it in.

Next the lips, once again select the box on the relevant snapshot, select the area to be coloured in then use the history brush to colour it in.

Now the background...

Finally the hair and the skin...

You can go back through the snapshot layers again in any order to tidy up or re-colourise any areas which require it.  You can also edit the image overall using any image adjustment technique you want, or use an adjustment layer to test out a variety of edits. In the final image below I used brightness and contrast to lighten the image overall. That's it, all done. You are now ready to start colourising your own black and white photos.

A screen shot from the completed FPS game in UE4

This series aims to guide you through the process of creating a first person shooter game using 10 specifically created tutorials, each focusing on a different aspect of designing and creating the game.

The series was created by Nathan Hill, Dylan McGrath and Philip Evans. The game itself is available for download here, 

This video series is a follow up and update on our previously created text tutorial series available here.

You can watch all the tutorials in the playlist right here (below) or go to our YouTube channel

Create an FPS game in Unreal Engine (UE4)

Can You Identify These Different Furniture Styles...?

Furniture design has been a part of the human experience since the beginning of history and as such there are a vast array of furniture styles that have developed over time. Some have faded away and can now be only found as antique furniture but other furniture styles live on through reproductions in that style. The fact that some furniture styles are still reproduced and mimicked is testament to the quality and style of that furniture that it is still in demand today.

It can be very difficult to differentiate between these styles though and you may have heard phrases like a "Queen Anne Chair", a "Shaker Kitchen" or "Bauhaus Nesting Tables" without being able to visualise what that actually looked like. Well that is where this article comes in handy as we will list all the main furniture design styles and outline their identifying features so you can tell your Art Nouveau from your Arts and Crafts!

This article outlines the following furniture design styles ...

• Egyptian
• Greek
• Renaissance
• Jacobean
• Queen Anne
• Colonial
• Rococo
• Shaker
• Victorian
• Arts and Crafts
• Art Nouveau
• Bauhaus
• Art Deco
• Modern
• Scandinavian

Egyptian Furniture

Egyptian Style Furniture

When we think of Egyptian furniture we imagine the intricate gold gilded ornate furniture found in the tombs of the Pharaohs as opposed to the simple chairs, tables and baskets of the ordinary Egyptians.

The identifying features of ancient Egyptian furniture are...

• beech wood and mahogany 
• ornate designs using different colors 
• depicting animals, gods and goddesses 
• gold gilding and inlays 
• mosaic designs 
• mother-of-pearl inlays

Back to Top

Greek Furniture

Greek Style Furniture

Ancient Greek furniture is possibly still most remembered for the famous klismos chair, shown above.

The identifying features of ancient Greek furniture are... 

• elegant and tasteful
• detailed carving and inlays
• select detailing, not cluttered
• comfortable rather than decorative

Back to Top

Renaissance Furniture

Renaissance Style Furniture

Along with the other arts, the Italian Renaissance of the fourteenth and fifteenth century marked a rebirth in furniture design, often inspired by the Greco-Roman traditions.

The identifying features of renaissance furniture are... 

• ornate and opulent
• form above function
• gilded designs 
• floral, vegetable and scrolling ornamentation

Back to Top

Jacobean Furniture

Jacobean Style Furniture

After the Renaissance there was a gradual change to a less ornamented, quieter style of furniture.In general furniture profiles became lower and more rectangular.

The identifying features of Jacobean furniture are...

• stern, square, and frugal
• colourful upholstery with tasselled trim
• straight lines & rigid designs
• sturdy construction
• dark finish

Back to Top

Queen Anne Furniture

Queen Anne Style Furniture

The Queen Anne style is a style with a moderate proportion and graceful appearance. It is named after Queen Anne of England who reigned from 1702-1714.

The identifying features of Queen Anne furniture are...

• graceful and refined
• cabriole legs terminating in a pad or drake foot
• fiddle-back chair backs
• bat wing shaped drawer pulls
• cushioned and covered with fabric

Back to Top

Colonial furniture

Colonial Style Furniture

These pieces were generally sturdy and heavily carved, many with turned legs and bun feet. In the harsher environment of some of the Colonies these pieces were simpler representatives of their parent styles, befitting the more straightforward and utilitarian life of the settlers.

The identifying features of colonial furniture are...

• less ornate than European furniture of the same style period
• combing features of previous styles
• variety of wood types used
• chair arms have slight outward curve

Back to Top

Rococo Furniture

Rococo Style Furniture

In the eighteenth century, furniture design began to develop rapidly and styles such as Rococo and Neoclassicism were commonplace throughout Western Europe.

The identifying features of Rococo furniture are... 

• Natural motifs
• Elaborate carved forms
• Asymmetry
• Curved forms are common in Rococo
• Rocaille carving
• Acanthus leaf

Back to Top

Shaker furniture

Shaker Style Furniture

The Shaker style was produced by the religious group the United Society of Believers in self-contained communities in the United States.

The identifying features of shaker furniture are...

• simple, utilitarian style 
• straight tapered legs
• woven chair seats
• and mushroom-shaped wooden knobs
• rectilinear and attenuated forms
• restrained ornamentation

Back to Top

Victorian furniture

Victorian Style Furniture

The Victorian style draws its influence from previous Gothic forms. It is named for Queen Victoria of England who reigned from 1837-1901 and was the first furniture style of mass production.

The identifying features of Victorian furniture are...

• heavy proportions
• dark finish
• elaborate carving and ornamentation.
• somber appearance
• balloon-shaped chair backs

Back to Top

Arts & Crafts furniture

Arts and Crafts Style Furniture

Arts & Crafts furniture is simple, with straight lines and little ornamentation.The terms Mission and Craftsmen can also used to describe Arts and Crafts furniture.

The identifying features of Arts & Crafts furniture are... 

• rectilinear design
• simple, straight construction
• exposed joinery
• using medium or dark stained oak
• bail handles with rectangular back plate

Back to Top

Art Nouveau Furniture

Art Nouveau Style Furniture

The name "Art Nouveau" is French for 'new art', and it emerged in the late 19th century in Paris. The style was said to be influenced strongly by the lithographs of Czech artist Alphonse Mucha, whose flat imagery with strong curved lines was seen as a move away from the academic art of the time.

The identifying features of Arts Nouveau furniture are...  

• intricately detailed
• lines and curves used as ornamentation
• inlays and veneers also used
• hard woods and iron commonly used
• strong yet slim furniture pieces

Back to Top

Bauhaus Furniture

Bauhaus Style Furniture

The Bauhaus school was founded by Walter Gropius in Weimar in 1919. In spite of its name, and the fact that its founder was an architect, the Bauhaus was founded with the idea of creating a 'total' work of art in which all arts, including furniture would eventually be brought together.

The identifying features of Bauhaus furniture are...  

• minimalist & non-ornamental
• hand crafted but appears mass produced
• organic and natural materials
• mainly black in color
• smooth and rounded shapes

Back to Top

Art Deco Furniture

Art Deco Style Furniture

The Art Deco movement began in Paris in the 1920s and it represented elegance, glamour, functionality and modernity. Art deco's linear symmetry was a distinct departure from the flowing asymmetrical organic curves of its predecessor style Art Nouveau.

The identifying features of Art Deco furniture are...

• practical and simple designs
• founded on mathematical geometric shapes
• triangular shapes, chevron patterns, stepped forms, sweeping curves and sunburst motifs
• new materials such as aluminum, stainless steel, plastics and lacquer
• exotic materials like shark-skin and zebra-skin.

Back to Top

Modern Furniture

Modern Style Furniture

The forms of modern furniture sought newness, originality, technical innovation, and ultimately conveyed the present and the future, rather than what had gone before it as revival styles had done. This interest in new and innovative materials and methods produced a certain blending of the disciplines of technology and art.

The identifying features of Modern furniture are...

• new materials included laminated plywood and fibreglass
• continued use of steel, moulded plywood and plastics
• simple and geometric shapes
•  regular use of polished metal
• style considered pioneering, even shocking

Back to Top

Scandinavian Furniture

Scandinavian Style Furniture

Simplicity and function are the guiding principles that have shaped the design sensibilities of Nordic Europe.

The identifying features of Scandinavian furniture are...

• natural materials, mainly wood
• favour neutral colour palettes
• clean, simple lines 
• optimal function out of every part of the piece
• robust and fuss-free

Back to Top

Click on the demo link below to test the smooth scrolling effect

I recently added a smooth scrolling effect to this website (test here if you want a demo). It is set to trend in 2017 after all.

During my research in preparation to best implement this effect I was surprised at the variety of code options on offer and even more surprised by the fact most of them didn't work! So with that rant over, I'm writing this short post to save you the time that other websites wasted on me.

Below is the full and exact code you need to add into the 'head' section of your website in order to achieve a smooth scrolling effect for all 'anchor' links on your website.

If you want to learn more about how it works or for any troubleshooting you can read more below.

The Code...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Makes sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Stores hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Adds hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script>

How it Works...

jQuery

Most of the scrolling magic happens offsite which is why the link to the jQuery library is necessary.
Some websites will say you should downloadand host the jQuery library yourself rather than use a CDN (Content Delivery Network) link but many users may already have downloaded jQuery from Google or Microsoft when visiting another site.

As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

jQuery is a fast, small, and feature-rich JavaScript library, and the smooth scrolling effect is just one of many effects in the library. This jQuery link must come before the other code as it needs to load before the scrolling effect will work.

The script which follows the jQuery library link then does the following...

• waits for the page to load
• adds the smooth scrolling effect to all links on the page (to be activated onclick)
• checks to see if variable 'hash' has a value
• if 'hash' has a value, it disables the default anchor link behaviour (usually jump to the link)
• stores the variable
• activates the scrolling effect on the link
• gives you option to set scrolling time in milliseconds
• finally it adds # to the end of the url

Troubleshooting...

• Check that you have copied all the code (Sometimes it's the most obvious thing that we get wrong!)
• Make sure all the code is in the 'head' section of your webpage, between <head> and </head>
• The code needs to be pasted into the head section of every webpage that you want the effect to work on. Unless using a CMS like Blogger or Wordpress, in that case just paste into the site template
• Ensure the jQuery library link is before the rest of the code.
• Check that your browser or antivirus is not blocking javascript from running.
jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page.

Back To Top

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

This website makes good use of space in 2 ways!

The right amount of empty space can make or break a design. Whether it is white space, a background color or image, “empty” space in a design can have a huge effect on the content that is there. if done correctly it will draw the user to the content you want them to focus on, and as mentioned earlier this is not easy nowadays!

Think about it from the user perspective. They will likely be drawn immediately to the open part of the design (whether they think about it consciously or not). From there, the eye will hop to the more populated part of the design. This simple two step process grabs users’ attention and almost shows them where to look. 

Open space is an extension of minimal styles

For this reason we think exaggerated use of space is one of those design trends that will be utilised a lot in 2017. Open space is an extension of minimal styles that have been popular for some time but, this year, rather than a symmetrical outline with space all around, web designs will balance images and text with space in a more asymmetrical format.

This simple balancing act is also visually interesting and great for making a strong impact, another reason we think it'll trend in 2017.

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.

If you're a marketer today you probably know that targeted emails are effective. But what happens when someone clicks through that targeted email only to end up on a static, generic website? The natural progression of personalized emails should lead to a personalized website, but limitations in technology and strategy have delayed this realization so far. There are signs, however, that the time for more personalization across the online experience has come.

A 2013 Monetate/eConsultancy Study found that in-house marketers who are personalizing their web experiences see on average a 19% uplift in sales.

When it comes to shopping online, experiences tend to fall into two categories: The almost seamless experience offered by major retailers such as Amazon or the clunky too-many clicks to checkout experience that is common among small shops. In 2017 a third could emerge, a fully cutomised web experience to suit your exact and specific needs and desires - now doesn't that sound great!

Back To Top

Voice...

Consumers are drawn to systems like Siri, Cortana and Alexa, who respond to voice commands and spoken questions. Voice search developments have made this the preferred search method for many consumers, who now ask their devices questions such as “Where are the nearest shops to me?” In 2017 businesses must consider these voice searches when creating content for their websites by making it more conversational and using natural phrases instead of generic keywords.

But it's not just the content creators that need to pay attention, the web developers and programmers have a bit of homework to do too. Although there are not a lot of studies and data currently available on the subject,you can be sure that users are likely to use different language when creating a search query by speaking, rather than typing.

Here are a few simple steps that web developers can take to ensure that their websites are making the most of their potential voice search opportunities...

• Schema is a markup language that works alongside HTML to provide information to search engines and other services that want to use the data that you provide to learn about your website. The information that you provide through schema already has an affect on your search optimization, but becomes even more important when targeting users that are using voice search. The more information that you are able to provide to search engines, the better that they will be able to understand the content on your website and connect relevant to voice searches that are performed by users.

• A website might provide search engines with a large number of feeds that provide data and information to help them properly categorize their listings. For instance, XML sitemaps and location data are integral for helping Google to crawl the entirety of your website and help to provide information that can help your business to rank in local search engine pages. Ensure that you are providing all data that is relevant to your company in the feeds so that search engines can correctly classify and detect when your content is appropriate for voice commands and search.

• Often, users that are using voice search are looking for very quick answers to their question. They want to know the answer and have it read back to them as quickly as possible. For this reason, you should try to ensure that the answers to common questions that users might have about your company, product, or industry are answered clearly on your pages. Frequently Asked Questions pages are an excellent way to provide quick, relevant answers to questions that voice searchers might have.

Back To Top

Animation...

css animation loading icons

As browsers and languages become more advanced, we’re seeing more websites move away from the use of static imagery and finding new ways to engage users and be unique in their approach to communicating. Animation is one of the main ways to do this and having seen many brands start the trend in 2016 we think 2017 is going to see that trend grow further.

Animations  can come in all different shapes, sizes and styles; and can serve different purposes. For example animations can range from tiny loading-devices (see above) which entertains the user while waiting for content to load, to an interesting hover-state used as a UX device to show a user they’re hovering over a link.

They can also be used on a much larger scale, as rich, full-screen animations, which can integrated to work with scrolling, navigation or be used as the focal point of the entire site. Animation is another useful mechanic for brand’s to create meaningful micro-interactions between themselves and their users.

With such a broad array of internet capable devices ‘the fold’ is now harder to define, as users are viewing content of screens of all different sizes and resolutions. Scrolling, once reserved for getting from top of a page to the bottom, is being used in more creative capacities to deliver content online. Apple is a high profile brand making great use of scroll within their site.

Animated scrolling (as used on this website) and parallax scrolling are versatile mechanics which, when executed well, can work great with all varieties of content delivery. It works with video based content, where large full screen videos play and pause as the user scrolls, as well as static content, which can animate, move, or change depending on the users input.

With content creation happening at a far greater pace than ever seen before, and companies finding more innovative solutions for delivering their content to users, we expect the clever use of scroll and parallax effects to be big in 2017.

So web animation has many applications, but if abused, or executed badly can be disastrous to usability. However, as with most developments, we expect that as more designers experiment and gain feedback from users, it’ll be something which gets better and better, adding more functionality and additional levels of interaction.

Back To Top

Conclusion...

There are 100’s of ‘trends’ going on in any creativity industry at any one time, and it’s hard to pin-point every single one, but we believe that the above are some of the more core ones to be focusing on in 2017 and beyond.

As with all trends, the above points have come about for good reason; as creatives and clever-thinkers across the globe have all learnt and borrowed from one another to form similar patterns which we see emerge online today. Not all of these trends may be relevant to you and your content, but it’s always beneficial to know what’s happening in the industry and to see where you’re able to improve in order to develop and progress.

With all this said, they should only be used sparingly, and carefully, to enhance the user’s experience and not detract from it. No-one wants to wait forever for content to load because of unnecessary design 'features' holding it up.

Learn A New Skill For The New Year

Giving things up for new year is a common practice but also a very difficult one that most people break after just a few weeks. So this year make your resolution be to learn something new, to up-skill, to re-skill; here's a few good reasons why ...

• A new skill to put you ahead of other job candidates
• A new skill for a change in career, 
• A new skill to enhance your studies 
• Or just a new skill for fun! 

But what skill should I choose? Well, design skills are one of the most adaptable and sought after skills around as they show you to be creative and innovative but also logical and organised. So here are the top 5 design areas for you to up-skill in...

Web Design:

More and more business is being done online everyday and because of this every business from your local coffee shop to the multinational corporations has a website. This means there is a growing demand for web designers to create, update, moderate and redesign all these websites. To get in on the action, you will need to learn HTML5, CSS3 and at least a little JavaScript. These programming skills will be further enhanced with knowledge of SEO (Search Engine Optimisation) and design skills like the ability to use Photoshop. Using the web design process is also an essential skill that is unfortunately overlooked by many web developers who call themselves "designers".

Graphic Design:

Sample Poster

A lot of people group the ability the use Photoshop and being a graphic design together as if they were the same thing... they are not! Photoshop is a great software and the Adobe Creative Suite of which it is part is certainly the industry standard for graphic designers but there is a lot more to graphic design that using software, after all, graphic design still existed before computers! Back then, just like for modern graphic designers, the graphic design process, an understanding of colour theory, typography and composition were all keys skills. Some more modern techniques such as the use of attention grabbing techniques in your imagery and the use of the most powerful words in your typography will further enhance your skill base.

Games Design:

Games design with Unreal Engine

The games design process can be completed by just one person but that person would need to be highly skilled in many different areas of the design process and production stages and have a lot of time on their hands! For these reasons computer games, much like anything else, are designed and built by a team of people each with their own specific set of relevant skills. See which role would interest you most or dabble in a little bit of each before focussing on one area to learn. Start your journey here.

Interior Design:

An example of the Urban Interior design style

 Interior design is another misunderstood craft with numerous people claiming to be interior designers simply because they have "an eye for it". The interior design process, when done properly, is a complex task which requires multiple skills and the knowledge of key areas such as interior design styles, colour theory, room layout techniques and an awareness of a multitude of materials and finishes for walls, floors and furniture. Perspective drawing skills and the ability to create presentation boards for potential clients are also valuable skills for any professional interior designer.

Furniture Design:

The most practical and hands on of our top 5 skills for the new year is furniture design. Like all the others understanding the process is key and the furniture design process should be your starting point. After that a look into furniture design history will give you an understanding of traditional and contemporary furniture styles. An awareness of the available and industry standard furniture materials is also a must which will be complemented by a knowledge of the different furniture joinery techniques when you go to build your design prototypes.