Archive for the ‘Digital Design’ Category

Use of Animation in Websites

March 3rd, 2017 by Chris Torralba

headline - website animation
The use of animation in web design is a current trend, although thankfully we haven’t returned to the days of flaming logos. Animations in websites work best when they serve a purpose and enhance the users experience. Adding animation to a website can bring a design to life, even if the motions on the page are subtle. Websites without any animation at all may run the risk of looking outdated. This blog post is going to look crazy busy, and you’d never combine so much animation in the one page, but below we describe the various ways animation can be employed to give websites that extra visual appeal and improve usability.

Attracting attention
Animations can direct the users focus to any point on the screen. As long as there are not many other competing elements on the screen, even the smallest amount of motion will grab attention. This can be used to influence what the user sees, or establish a visual hierarchy pointing them to important points on the website. Visuals like a slow fade, a box crawling in from the side, or a tile spinning to reveal more information are more preferable than the content suddenly appearing out of nowhere. In the example below animation is used to reveal the products tagline followed by a shop now call to action button.
animation to attract attention

Engaging the visitor
Animations can be used to point out possible ways for visitors to engage further with your website. The right animation in the right place can help get your message across and engage users. Animations as simple as changing the look of a button when the mouse pointer hovers over them can make your pages feel more alive and prompt visitors to select press or interact with your content. A good example of this would be an animated call to action button. Such buttons need to be displayed prominently on your website. Adding [restrained] animations make them more obvious and will let users know that they are interactive. In the example below when the mouse is hovered over the button not only changes shape and colour but produces bubbles as well.
Button hover effect

Web Forms
Animations when used correctly allow designers to produce faster, easier to use, and more productive web form experiences. Animating web forms is a great opportunity to add some subtle and interesting effects to a web page. Web forms are elements that your user will interact with and making them fun to use can enhance the experience. Because animated visuals can teach more effectively than words or static images animations can also be used to show a user how to fill out a web form, subtle animations can guide user interactions and make form filling less confusing. In the example below animation is used to let the user know when his details have been correctly processed.
Web form animation

Visual Appeal
Whilst animating for the sake of beauty can be easily overdone, making the user experience that bit more enjoyable or sophisticated will help to bring your visitor back, and help to encourage sharing of your website. Below is an example of a very subtle animation that just adds some class to the design of the image link.
animation for visual impact

What’s your favourite example of animation?

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Design-centric Application Development

December 6th, 2016 by Kaveh Saket

Design-centric application development

A design-centric approach to application development (that’s web applications and mobile applications – is there any other sort these days??) differs from customer-centric or technology-centric approaches which have been more common of recent years. A design-centric approach focuses primarily on ensuring that the user experience is perfect – or perhaps more accurately “nearly perfect”.

There is always room for improvement – another revision, a new update – and users want continual improvement to make their life easier. User experience has been made king because research shows that organisations which focus on design significantly outperform those who don’t.

In a customer-centric approach the customer is asked what they want, and then the designer will set about delivering to their requirements. In a technology-driven approach, the technologists build the best algorithm or new solution to solve a particular problem and then look for a customer who values the technical solution. However, following a design-centric approach the designer will research the best current solutions in the problem landscape, put themselves in the customer’s shoes, and determine to provide the simplest way to achieve the desired goals. Gathering feedback on the design from a variety of potential users of different levels of expertise follows, and leads to iterative refinement until the first version is achieved. The developers – the people who turn the design into reality – are then directed by the design team to ensure that the intended outcome is achieved.

The Uber mobile app is a great example of design-centric application development, which is a significant factor in its amazing success. Anyone who has used the Uber App will agree – from being able to see where the on-approach vehicle is on the map, along with the number of minutes until it arrives continuously updated until arrival, to seeing a photo of the driver and vehicle, one press to make a call to the driver, and immediate payment upon arriving at the destination without needing to handover a credit card. I could go on and on about the ease with which you can hail an Uber, and receive a brilliant experience of private transport…

One of the challenges of current application design is dealing with content. Having little visible content is a very quick way to send users heading for the hills … imagine Instagram with no photos when you launch it, or Twitter with no tweets to read, or Facebook with no posts. However, masses of content with no simple way to navigate it, can be just as off-putting. Requiring a user to search has been the standard approach for many years. Filtering and other ways of helping the visitor to easily drill down to the content they are most interested in, have developed more recently.

At Contact Point we have been embracing SCRUM methodology across our organisation, which also readily supports a design-centric approach. Starting with our client’s goals and objectives within their particular competitive landscape, and their customers’ wants and needs, we will:

  • undertake research into common solutions to the design problem at hand,
  • brainstorm other potential approaches with trusted and experienced colleagues,
  • wire frame the potential solution, getting feedback along the way,
  • apply creative design to the wire framed solution,
  • carry out user testing of the design, iterating as necessary to refine the solution, and
  • finally develop the solution, taking care to ensure that the essence of the planned user interaction is achieved

The above steps will be undertaken for each logical entity that collectively forms the solution, at the same time ensuring consistency throughout the solution as appropriate. After the development of each component, real user testing of people across a broad range of skill levels, will then lead to further refinement. Programmatic A/B testing will allow two or more potential solutions to be tested head to head to ensure the best solution evolves.

The successful execution of a design-centric approach involves many steps, and requires an appetite for iteration, well beyond the launch of a new solution. However, the results are impressive, and for all but the simplest of tasks, likely the only way to achieve raving fans of your solution. Design-centric doesn’t mean that the customer is ignored. In fact the opposite is true with a greater focus on experience combined with needs and wants. Neither is technology ignored – utilizing the most up to date and elegant technology is also paramount to ensuring a great user experience.

What is the best user interface you have experienced from a web or mobile application?

 

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Consumer Decision Journey – throw out the Sales Funnel model!

November 8th, 2016 by Heather Maloney

image-consumer-decision-journey
As the creator of a broadly used email and SMS marketing solution (eNudge) for the Australia marketplace, I thought that over the years I would see a general improvement in the way email marketing campaigns were constructed and delivered. I’m sad to say that on the whole, nothing much has changed. eNudge provides a myriad tools to help you segment, target, automate, measure and analyse, but it’s in the execution where many people fall down. Business owners and marketers get busy, and then just flick off a quick email to get a spike in sales. They are content with a spike and move on.

However, I know there is a better way … there always has been. Many marketers refer to it as lead nurturing, and email campaigns (including the eNudge Message Series functionality) are an excellent way to nurture your leads. For many years, marketing personnel have been working with a Sales Funnel model in mind – a linear movement of a potential buyer through awareness, interest, desire and finally action (buy). Lead nurturing refers to understanding where your lead is in the sales funnel, and give them the next piece of information that they need to take them to the next step in the journey; the next step closer towards being ready to buy.

I could be placated if I saw email marketing being used more for lead nurturing … more value and information being supplied, in a logical flow, engaging with potential buyers and taking them down a path to understanding and trusting you. However, thoughts even on lead nurturing have moved on …

The changing landscape of information availability via the internet including the impact of social media, and more recent research into buyer behaviour, suggests throwing out the sales funnel model and replacing it with what is being called by McKinsey as the “Consumer Decision Journey“. McKinsey research revealed that far from systematically narrowing their choices, today consumers take a much more iterative and less reductive journey of four stages: 1/ consider, 2/ evaluate, 3/ buy, and 4/ enjoy, advocate, bond. During stage 2 (evaluate) where the Sales Funnel approach says the the options get narrowed down, this in reality is where the brands most active online often replace the brands that were in the original consideration list (perhaps added to the list because of traditional advertising). The consumer’s options actually expand during this phase and the originals often get thrown out where there isn’t enough information online or customer reviews to support them.

Even more critical in what is being seen now in consumer behaviour, McKinsey discovered that during the 4th stage (enjoy-advocate-bond) more than 60% of consumers conduct online research about the products after purchase – a touch point entirely missing from the sales funnel approach. It is during this after purchase where your customer will advocate for your product or service by word of mouth, and produce online content to help future consumers in the consider and evaluate phases.

Other recent research by the Harvard Business Review team has shown that achieving the “full” sale to a B2B client is best achieved by providing the opportunity for that client to purchase small prototypes or incremental products along the buying journey i.e. as part of the evaluate stage. For more about this read: “To Increase Sales, Get Customers to Commit a Little at a Time“.

It was no small task, but the Harvard Business Review article describes an example implementation of changing the view of marketing to that of the ‘Consumer Decision Journey’ lead to a new TV becoming the top seller on Amazon.com and the company’s best performer in retail stores, far exceeding the marketers’ expectations.

To ensure that your product or service is not thrown out by prospects during the Evaluate phase of the consumer journey, and to help new customers to Enjoy, Advocate and Bond:

  1. Make sure your product or service is present online, not only in your own website, but also in comparison sites and marketplaces (for B2C) and online communities (for B2B)
  2. Foster online reviews of your products and services via social media and 3rd party websites
  3. Provide rich and easily accessible information online for people who have already purchased your product or service to help them get the most out of it
  4. Introduce new ways to inspire existing customers to refer their friends and colleagues to you – think DropBox who give away additional storage space for referring business

Your email marketing activities should assist you with with each of the above. Email campaigns should be created specifically for new customers and should point to additional online resources, and specifically ask for reviews or feedback. Email campaigns to your wider database should reference case studies and additional information available to help prospects in the evaluate phase.

If you need help with:

  • creating incremental or prototype products to sell to your clients as they evaluate,
  • creating additional online content,
  • making your online content more engaging,
  • ensuring you have a vibrant social media presence,
  • ensuring your product or service can be found easily online (SEO), or
  • creating email marketing campaigns that engage,

don’t hesitate to get in touch.

We are passionate about helping businesses to grow using online technologies.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

UI UX Design Trends in 2016 and beyond

June 14th, 2016 by Chris Torralba

image-ui-ux-design-trends
A Google search of the definition of ‘user experience’ returns: the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.

The definition of user interface is the means by which the user and a computer system interact, in particular the use of input devices and software.

Clearly user experience is significantly impacted by the user interface design, but it is also affected by text content and process flow. The overall aim is the creation of websites and apps that provide unique and clean designs, communicating clearly with the user, which not only attract users, but make them want to come back. User interface design uses typography, colour and layout to create the best possible user experience. Below I have described 7 user interface design trends that contribute to a great user experience and which I expect will be very popular this year and beyond.

#1 Responsive Design

Responsive design takes a website and re-arranges and resizes certain elements to display better depending on the size of the screen being used to view the content. With the enormous uptake of mobile devices for internet browsing, responsive design is becoming less of a trend and more of a common practice when it comes to web design. Last year Google announced that mobile responsiveness will affect a websites rank in search results, making responsive design a must have. “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.” You can read more about this announcement in our previous blog post: Mobile Responsiveness just became even more important for high ranks in Google and you can read more about responsive design techniques.
image-responsive-design

#2 Flat Design

Flat Design is a minimalistic approach in designing websites and user interfaces where all 3D elements, gradients, shadows and other effects are stripped away. Flat design is about allowing the content to speak for itself. By removing unnecessary styling, it makes for faster loading pages, simpler code, and adaptability. Whether viewed on a desktop or on a mobile screen, flat designs are always legible and adaptable.

Below are some examples of flat design icons.
image-flat-design

#3 Material Design

A few years ago Google introduced Material Design which is a design philosophy, or more simply put, a style guide for designers to follow. The name “Material Design” is a metaphor for physical materials (such as paper) which have thickness and are impacted by light sources such as directional light and ambient light, and content which is placed upon the materials. The style guide seeks to apply the rules of physics to the way material is depicted in designs, and the way content is placed upon it. Based on these guides, the goal of Material Design is to allow a unified experience across all platforms and devices. It breaks down everything from colour palettes, font choices, spacing, and animation. Just like flat design, Material Design is also content focused. The popularity of this minimalistic design approach will continue to increase as it makes a website or an app look cleaner and load faster by taking out unnecessary elements.

You can view Google’s complete guide to Material Design here.
image-material-design

#4 Card Style Layouts

Card style layouts for mobile and desktop websites are boxed pieces of content that looks like it is featured on a playing card. Card style boxes typically hold one unique piece of content or information. The Card style layout is a great way to organize large amounts of content. It is highly functional and can be easily integrated with responsive layouts; designers can add and collapse columns of cards to fit the shape and size of the screen. Card style layouts have been steadily growing in popularity over the past few years and developing together with other techniques such as responsive design and flat design.

Below is an example of a website designed by Contact Point which uses card style layout. Read more about in our Henry Langdon website case study.
image-card-style-layout-2

#5 Dramatic Typography

Today’s minimal and streamlined web and app designs allow typefaces to be more dramatic and have stronger impact. With free type kits like Google Fonts, designers and developers are able to use fonts that look great on all screens.
image-typography

#6 Large Background Images & Videos

One way of making a website stand out is by having great imagery displayed prominently. Large background images and videos can help engage users more; it is captivating and focuses attention on the content. With browsers supporting HTML5 video, increased bandwidth, the popularity of background images and background videos on websites will grow even more.
image-large-backgrounds 2

#7 Greater Use of Animation

When used in the right place and at the right time, animations can truly enhance a users experience and it can convey a message more effectively. Well executed animations can help guide and offer context to the user. Conversely, too much animation or transitions can disrupt the flow and distract the user from an otherwise good digital experience.

The Mollard website designed by Contact Point using parallax techniques is a great example of the use of animation.
image-animation-2

Let me know if there are other UI / UX design trends which you believe I’ve missed!

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Enhance your website with animated graphics

September 2nd, 2015 by Tamar Smart

In my early years as a Graphic Designer, I worked a lot with incorporating animation onto a website via Adobe Flash. This was all the rage back then – mostly for use within large banner images/dynamic elements. Over the years, Flash became outdated and impractical, especially with the introduction of Apple devices and their lack of support for all Flash animation files.

Finally animation on websites is making a comeback, but in a slightly different form. Animated graphic files can be created as a Gif image, using HTML5, or a video animation embedded into a website. These formats are supported across a wide range of devices too, which is great news.

Animated graphics can really bring life to an otherwise plain website. They can be eye catching, entertaining, informative or tell a story.

One particular favourite style of animated graphics, is called “whiteboard animation”. This style looks exactly as it sounds – a series of images and text are “drawn” onto a whiteboard, and wiped off or moved around on the whiteboard. This type of animation really works when there is information to explain or a story to tell – it feels natural and makes sense to a viewer. The reason for this is because, when we want to explain something to someone, we often write or draw rough sketches on paper.

As I was browsing the internet today, I noticed that Google had created an animation in whiteboard style. Google has just created a new logo, and used the animation to tell the story of how it was created (in basic dot points). The animation works really well – it’s eye catching, a little bit fun and it makes sense.

New_Google_Logo

In case you missed it, here is a link to view Google’s animation explaining their new logo:
https://g.co/doodle/xfnz5b

At Contact Point, we have recently created video animations for our clients to help engage with their audience, and welcome the opportunity to create an animation for your website also.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Designing for the future of web display technology

April 20th, 2015 by Tamar Smart

As technology grows ? so does our need to see things in super high quality. Our computer and mobile phone displays, must be larger and better than before. No longer are we satisfied with blurred images, and squinting at our small mobile phone screens to try and read “blocky” text. By “blocky” I mean that the edges of the text and images lose their crispness and you can see the pixels (square edges).

Enter the new player – Retina Display. This technology allows us to view content on our computer screens, laptops, tablets and mobile devices, at a high resolution with clear images and smooth text. The reason for this is because these displays have at least twice as many pixels per inch (ppi), as a basic display. Therefore our eye (retina) interprets what we see, as being closer to how we see things in real life.

Some devices recently released, that have Retina Display: MacBook Pro, iPhone 6 and the iPad Air.

What relevance does this have for you?

If you have a website and want to target a wide range of clients/customers, then you will need to cater for their devices. A basic website with low resolution graphics, may not be good enough any more, particularly if your target audience are viewing your site on their mobile devices, laptops or tablets. Most of these devices are now including Retina Display as a standard feature ? especially Apple products.

Information is one of the most important aspects of a website. A website that has blurred images and icons, with “blocky” text, may convey the wrong message to your visitors.

If you check the Google Analytics for your website you will quickly discover how many people are browsing your website using a mobile device.

How we can help improve your website?

There are several ways we can improve your website for Retina Display. Firstly, by making the choice to use styled text instead of text that has been embedded in an image.? Styled text is able to be scaled up or down, to suit a variety of devices. The text will look smooth and easy to read. This doesn’t mean that you always need to have basic fonts either. We can offer a wide range of fancy fonts (that will suit your style) ? for use on your website. Google Fonts, is the tool that gives us the capability to design text with varied fonts, for Retina Display.

Google Fonts

Google Fonts

Secondly, we can improve your website for Retina Display is with the use of Font Awesome icons. These icons (e.g. phone, search, email) can be scaled to fit nicely on any device. They will always look crisp on both a Retina Display and a basic screen resolution. There are many to choose from, and they can be designed to match any colour that is needed.

Font Awesome icons

Font Awesome icons

Thirdly, detailed photos need some extra love. We can set them up for you so they display at high quality on each device. Here is an outline of the process we use:

  1. Set up your website to function in a responsive way ? where the layout adjusts to fit comfortably on a variety of screen sizes. ?This isn’t an essential step in addressing your large images, but is definitely an important part of providing a great experience on a mobile device.
  2. Create 2 versions of your important images. One is larger (for utilizing on Retina Displays), and the other is smaller (for basic displays).
  3. Insert a small piece of additional code into your website (called a Media Query) which detects the type of device that the website is being viewed on, and then chooses one of the two image sizes to show (depending on the type of device detected).

It is also worth noting that there is a difference in file size, for photos used on Retina Displays. The files are larger in their visual size, which means they are also larger in file size. This is why it’s important that we have a second smaller version of the photo, for use on basic displays ? so that a visitor is not unnecessarily downloading large images (which look basically the same to them).

With these simple but effective tools, we can help your website to stay up to date with new high quality display technologies. Retina Display can be a beautiful thing ? if we understand and use it to its full potential.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Mobile Responsiveness just became even more important for high ranks in Google

April 19th, 2015 by Trevor Robinson

As of the 21st April, 2015, the Google search engine, globally, is giving weight to the presence or absence of mobile responsiveness in your website for people searching in Google using a mobile device. For example, if you are searching for a local cafe while using your mobile phone, the local cafe that has a website which is optimised for viewing on a mobile phone is much more likely to appear in the top search results for your Google search.

Google have been warning about this change for some time, so if you don’t have a mobile responsive website yet and if people searching for your business are likely to do that using a mobile device (tablet, phone, mini-tablet etc), now is definitely the time to act.

In a nutshell, a mobile responsive website is one that lays out differently and potentially functions differently, depending on the size of the screen being used, and whether the device has a touch screen or not.

Below is an example of a website which has been built responsively (the Contact Point website):
responsive_contactpoint

You can read more about what it means to have a mobile responsive website here.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

The impact of mobile browsing and mobile apps on website design trends

July 22nd, 2014 by Vincent Lai

With one in every five people in the world now holding a smartphone and one in seventeen owning a tablet, it’s easy to understand why website design has become immersed in catering for a wide range of device screens, and in fact why current digital design trends are being heavily influenced by the prevalence of mobile browsing. The mobile revolution brought with it the concept of the mobile app: the pocket sized utility that can do so much more than a website can, with access to the GPS, camera and other phone capabilities including the iPhone’s accelerometer and touch screen interactions. We now have apps for mapping, cooking, education, and entertainment. We even have apps that can control mini quadcopters that fly through the sky at your whim.

So how has mobile technology influenced digital design?

If you use your phone to view the Facebook website, in the top left or top right corner you will now see a very familiar icon, the menu button. Not long ago 3 horizontal lines meant nothing to most people, but now it is synonymous with opening up a navigation menu. Collapsing horizontal and vertical menus up into a single icon is a intelligent way to give visitors access to many pages, but take up the least amount of screen real estate. Many of our responsive website designs utilise this familiar icon, including inner pages of the Contact Point website when viewed on a smaller screen.
menu_icon

Another interesting design trend you might notice lately is the appearance of bold iconography. Many buttons, links, images and even logos, are now being simplified down to basic geometry, and cleverly illustrated symbols. Apart from being aesthetically pleasing, the main reason for this trend is simply to make life easier for mobile device browsing. Touch screen devices require pressing, swiping and other ‘gestures’ with your fingers to interact with the website or app. Using fingers is much less accurate than using a mouse and pointer. Large and simple icons and buttons are now ruling the way we browse because they are simply easier to press with a finger. They also grab our attention on the screen, no matter what size the screen.

In addition, apps have brought with them a range of standard icons that are used to achieve the same sorts of tasks across any website or app. The ‘settings’ icon is a good example of this. The image below shows the settings icon on Android, Windows and Apple devices. The commonality of the icons is obvious.
SettingIcons

Parallax scrolling, which I have posted about before, is also intermingling with mobile behaviours such as the appearance of new content at the bottom of the screen, triggered by swiping upwards to reveal more content. The ‘more content’ is only brought down from the web server when you “ask” for it via your touch gesture, making the initial content load faster, and also making the content feel more interactive. This behaviour is now appearing more in websites, including shopping cart sites containing many products per category.

The introduction of high definition ‘retina’ displays on mobile devices is also changing the way we are creating an displaying images in websites. An image that looks perfectly good on your regular PC monitor now looks a little fuzzy on such high definition screens. We are now regularly creating two versions of buttons and icons for display – one for high definition and one for regular screens.

These 5 design trends boil down to User Experience or UX (also known as User interface design or UI). The most successful apps have a potent combination of utility and user interface design. There’s no point in having a great product if it’s hard to use. By being simple yet bold, your users are more likely to pay attention and stay around for your message.

Has your use of mobile devices changed the way you expect a website to operate?

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Parallax Scrolling Websites: What are they and why are they useful?

January 29th, 2014 by Vincent Lai

Parallax Design is set to be one of the biggest trends in web development in 2014. But what is it exactly? And why should we bother? Long story short, its all about impact.

You may not know exactly what “parallax scrolling” means, but if you have been surfing around the web lately, chances are you have experienced it, and it has probably made an impression on you whether positive or negative. The term “parallax scrolling” refers to the technique used in websites where elements on the page move and shift at different rates, giving a sense of depth and interactivity to the page itself. It can be used in many different ways, and can bring a different approach to presenting your website.

Product Innovation and Communication Websites are the most likely candidates for using the Parallax Design technique.

Let’s say you are putting together a product, something that is new in the industry, or revolutionises an existing product.  You will want to show this product off, give the customers and clients something that they can visualise and drool over a little. Until recently, a detailed image gallery or annoyingly expensive short video were your only options.  A couple of images supplied too little information, and an extensive video sometimes felt too arduous. Organisations have recently used the new Parallax technique in very creative ways, to bring their products to life.

In the Saucony website (http://community.saucony.com/kinvara3/) they use parallax design to show the construction and science of how their shoes are crafted and constructed. As you scroll down the page, the shoe moves and rotates, adding parts and informing the user of the science behind each piece of the product. Added to this is the dynamically shifting background which subtlety follows the movement of the mouse. All in all, this design is very creative and an effective way to showcase their product.

In the Bagigia website (http://www.bagigia.com/), the creators of the leather bag have used the parallax technique to give viewers a 360 degree view of their unique design. This method allows them to show off their special product, and explain the thought process behind the design. It leaves nothing hidden, so that the customer has a better grasp of what it truly looks like, instead of a couple of still photographs against a stagnant white backdrop.

The other use, as mentioned above, is for communication websites. In my previous blog post, I discussed the use of full bleed images for higher visual impact. This technique coupled with Parallax design can take the impact of your website to new levels, and help you outshine your competitors. The best application of this is for websites that exist purely to impart your company information, where you don’t need more complex functionality or design elements.

A communication website that has used Parallax to very well is http://unfold.no/.  They have cleverly used the layering effect combined with a looping scroll to create what feels like an endless website.

For Contact Point we have created a Parallax micro-website for our design portfolio (https://www.contactpoint.com.au/CreativeDesignPortfolio/) which showcases some of our work. We have incorporated the dynamic page scrolling links and a layered approach to our imagery whilst using horizontal image scrollers to present our work.

Next time you are contemplating refreshing your website, consider the Parallax technique and whether it can enhance your website visitor’s experience.  I’d love to help create the design!

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Your Business on the Big Screen!

November 20th, 2013 by Vincent Lai

Computer technology has come a long way over the years, and with each generation of increasing screen sizes, web designers everywhere have taken up the challenge to best take advantage and utilise this new screen real estate.
With some screen dimensions now topping out at 2560 pixels wide, it’s no wonder that the old 1024 pixel websites now look dated and unprofessional. An easy and aesthetically pleasing way to combat this issue without compromising on content is to introduce full screen or full bleed imagery.

Full bleed imagery has been used in the past by print designers, in magazines, brochures and newspapers. However, with the rising popularity of responsive websites, full bleed imagery is now being used on screens, and with great effect. Two great ways to use full bleed imagery include a full bleed background, or using a full screen width rotating banner.

The full bleed image background is useful for websites that wish to have an overarching image that sums up the feel of their whole website. With this concept, content would usually scroll back and forth over the background, leaving the image static and unmoving. To best use this style, the image must be uncluttered and have a definite theme, whether that be a panoramic photo, or a person modelling the latest product. Secondly, the image must allow for content. In some cases, if an inappropriate image is used, it will disturb the readability of the content, and you will subsequently lose users on the website. Make sure you have a defined contrast between the background and the foreground. This can be achieved in many ways; by changing the image to black and white, blurring the image, adding or decreasing the brightness of the image or even using box between the content and the background. Here’s an example of a website that uses the background element as the full bleed image: www.enudge.com.au

enudge

The second option of using full width imagery for rotating banners is more suited to corporate websites that want impact without being too flashy. The use of a full width rotating banner allows the website to showcase a variety of things as opposed to one singular theme. Whether it be your company values, or special deals that are available, a full width rotating banner never fails to grab the attention of your audience. The other advantage of using this method is that it allows the rest of your website to sit within the 1024 space without it looking old fashioned. Using a straight 1024 pixel layout will make your website look blocky, and less engaging. A wide spread image at the top draws the eye and attention of your audience, breaking the rigid structure, which then follows through, making the rest of the content easier to absorb. A good use of this style should give impact and simplicity to your website’s main message. A good idea for image selection for this purpose are images that have a wider angle, and preferably a space for a short message. Using portrait photos limits the amount of what is visible, and using something too cluttered will compete with the impact of the text you choose to place on top. Here’s an example of a website that uses the scroller as the full bleed image: toll transitions Defence Website

toll

Either way, applying large scale, full screen imagery now has a place on the internet, as screens get larger and wider. Using up that screen real estate has never been more important in sending your message to your consumers and clients.

Vincent Lai

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Subscribe to our monthly

Contact Point Email Newsletter

Each email newsletter is filled with technology updates and great ideas to help your business grow.

To subscribe, simply fill in your details below: