Monday, 9 February 2015

4 Tips for a Fresh Looking Website

Especially in the last few years, websites are becoming more and more advanced. Not just in functionality, but also in design. Websites built in 2010 are already feeling stale and could use a make-over. This does not mean a complete overhaul of the website or a completely new design, but a few tweaks can make all the difference. There is a lot that can be done with some simple tricks that can give your website a fresh and modern feel.

1.  High Res Images – In a world where everything is 1080p and moving to 4k resolutions, HD matters. It is no different for a website. Nobody likes oversized pixelated photos, or tiny images that are hard to see. Full width high resolution images are a simple addition that catches the user’s eye immediately. If you are not the world’s best photographer, do not worry, Shutterstock and iStock have your back. There are many other places to purchase stock photos on the web, so try not to get anything too generic. If you like something that seems generic, try editing it so that it is tailored to your look and feel. One way to make an image your own is to apply filters!

2. Apply Filters to Images – This is a simple CSS trick that can give all your website’s image the same look and feel as the rest of your website. Common filters are blur and grayscale. Many websites use blur on an image that has text overlaying it. You already know what grayscale is so use it when you want to set the right tone. Other filters include: sepia, brightness, contrast, hue-rotate, invert, saturate, opacity, and drop-shadow. You can use this nice little cheat sheet to experiment and play with filter effects and apply them to your images.

3. Drop Shadows – Use them! Drop shadows are not just for 3D effect. You can apply many drop-shadows to a single element. This means you can create a glow effect or a stroke effect also. The best part of using the drop-shadow filter effect is that it works well with PNG images also!

The demonstration below uses four filters, a drop-shadow for each side:

-webkit-filter: drop-shadow(2px 2px 2px #CFFFFE) drop-shadow(-2px 2px 2px #CFFFFE) drop-shadow(2px -2px 2px #CFFFFE) drop-shadow(-2px -2px 2px #CFFFFE);

Pro Tip: You can use the same effect on text with the CSS property text-shadow.  This is great for hover-over effects. 

4. CSS Animation – You may have seen sites where images and elements are flying in from the sides or growing when you hover over them.  This is all done with the magic of CSS animations.  For CSS animation to work, keyframes need to be assigned.  Then add that animation to the element’s property in which you want to animate.  Check out the demonstration below. 

There are a lot of animations to use, and using more than one per element can be tricky (such as getting the image to rotate AND slide across the screen).  I can’t give away all the secrets from my bag of tricks, but try putting your element in a container and animating that also.  See below: 


For more information on CSS animations, go here

Not all of these tips are needed to update a website.  Maybe just one or two, maybe none at all, or maybe something more advanced like the use of parallax or video backgrounds.  Ultimately, some sites may need to be scrapped and completely redone.  Others may need just a bit of tweaking.  Whatever you decide, SWAGGER Media is here to help. 

Do you have tips or tricks that you like to use? Does your website need a makeover? Let us know in the comments below!

No comments:

Post a Comment