Web Trends: Stay in the Know for 2015
22
Transcript of Web Trends: Stay in the Know for 2015
Tom QuesseWeb [email protected]
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) [email protected]
www.lk-cs.com
