Tom QuesseWeb Designer815-223-0391Tom.Quesse@lk-cs.comwww.LK-CS.com

This presentation will be made available for future review on our YouTube channel at http://www.youtube.com/lkcsperu.

LKCS

Agenda

Today we’ll talk about several current web design trends:

– Supersized Imagery

– SVG Graphics

– Subtle & Effective Parallax

– Keeping Things Simple

– Standard Practices for 2015

Supersized Imagery

How it’s used and why:

– It can quickly convey an idea of what you do.

– Could be an accessible starting point to new users.

– Can be effective for advertisements.

– Adds interest to the main page.

Large Static Background

Present your background as the main piece.

– Can be the focal point of the home page.– Sets up a nice theming for the site.– If used correctly, can help with site navigation.

An Example of this:

– lk-cs.com

Hero Image or Banner

Perfect for big impact banners.

– These work great for advertising.– Presents a focal point on your homepage.– Strengthen your brand or theme.

An Example of this:

– earthmovercu.com

Video Background

Movement can be a powerful draw of attention.

– Has a strong impact.– Great for homepage, but hard to carry through site.– Best used with a subtle video.– Can slow down load times.

Examples of this:

– mediaboom.com– eagleclean.co.uk

Better Imagery

Good imagery can make or break a website.

– Probably see less “stock” in 2015.– Stock sites are improving in quality.– Be picky about your images.– Unique imagery can be effective.

SVG Graphics

A file type with many benefits:– Scales in size without losing clarity– Smaller file size– Works with the prominent web browsers– Good potential for animation or interaction

What is Parallax Scrolling?

Parallax Scrolling is a technique used to layer and give movement to certain elements on a page.

Some of the perks of this technique:– Can create depth in a page– Advocates scrolling and can highlight content– Sparks interest and can tell a story

Simple & Effective Uses

Check out what some other sites are doing with parallax:

Things to look at:– What are they doing that’s working.– How depth is added to their site.– Where/how you think your site could benefit

from this.

Examples:– parallaxis.it– www.culturalsolutions.co.uk

Some In-Depth Parallax Sites

Here are some parallax sites that go above and beyond

– sony.com/be-moved/– spaceneedle.com/home/– nintendo.com.au/gamesites/mariokartwii/– moto.oakley.com

Keeping Things Simple

Create a site that’s ready for cross-platform

– Usually the less clutter you have, the easier it is to transfer to mobile.

– If using something like parallax, find a comfortable medium.– SVG files for less problems.

Good Practices for 2015

Keep these practices and expectations on your mind.

– Ideas about “The Fold”– Being accessible– Good navigation– Responsive design is expected

Handling “The Fold”

Being smart with how you use the fold:– Don’t cram items above the fold– Plan & figure out the importance of elements – Don’t fear pages with scrolling– Make your audience want to scroll past the fold

The Fold

Above The Fold

Below The Fold

Being More Accessible

Try to relate to the audience and reflect that in the design.

Ways you can do this:– Think from the user’s perspective.– Pay attention to your verbiage.– People remember the small things.– Improve the ease of use.

Navigation & Site Maintenance

Be proactive about your website:What to be checking for:

– Is your navigation clear?– Are all your links working?– Is your site starting to feel out of date?

We Do That.

Need help with anything I discussed today?We would be more than happy to:

– Want to try your hand at one of these trends?– Have a new site you want built?– Need help with a redesign?

JOIN US!

Our next webinar is July 8th!

“Find New Loans!”

Get out of the doghouse!

REGISTER NOW:www.LK-CS.com/webinar

Q&A

What questions can I answer for you?

Tom QuesseWeb Designer

(815) 223-0391Tom.Quesse@lk-cs.com

www.lk-cs.com