Does your site look old? Does it feel outdated? Dust your old site off and bring it into the modern era with these 7 easy tips.
1. Full Width & Full Screen Design
Don’t be afraid of white space. Let your design breathe.
Boxed layouts can result in an outdated and cramped look and feel for you site. Modern web design utilizes the full area of a user’s screen. In a lot of cases, the usable space for content is the same. However, minimizing hard separations, boxed sections, and borders makes your content feel less cramped.
A great example. Full width, no borders between the elements on the left, large impactful photo. Source : https://molekule.com/
Take advantage of full width imagery and photography. Hero images are popular for a reason. It will create a more immersive and beautiful experience for your user. Full screen sections are a great way to be impactful and isolate content or messaging but mindful of using too many full screen image backgrounds, as it might make your site’s load times slow.
2. Mix Up Your Layouts
Nothing says “old-site” like full pages of left-aligned text. Break out of the grid once in awhile. Be more daring with your layouts.
Very interesting layout. The left side is pretty standard, but the right side mixes it up. The design doesn’t stick to a standard grid and creates asymmetry, but remains balanced. Source : http://hellomind.com/
Asymmetry can allow for some really interesting and engaging designs. Avoid aligning an entire page in the same way. Even if it’s just a single section on the page, mixing up the layout keeps the user’s eyes moving and breaks the monotony. Angles are a simple and effective way to create a dynamic and modern touch to your website (although they won’t work aesthetically for every site).
3. Animation & Transitions
Moderation is key with these. Animations and movement can really make your site pop, but over-using it can feel gimmicky and over the top. Here are some examples of what I mean when I say animation:
Fading between photos in an image gallery slider.
Reveal animations
Hover effects
…and much more
The goal with animation is to avoid sudden and jarring transitions that lack refinement. There are a couple of basic ways you can implement animation in your site:
–CSS hover transitions are extremely simple to implement and have virtually no negative impact on performance. They can make your hover effects go from sudden and jarring, to smooth and beautiful with just a line of code. Hover over the examples below to see the difference:
No Transition Transition
-Page transitions and preloaders are effects or animations that happen when a user navigates from one page to another. These usually require a plugin or some javascript to implement. They serve multiple functions:
They create a more seamless user experience as the user navigates the site.
They can minimize the negative effects of longer load times by masking them.
They offer extra attention to detail that your user will notice
4. Depth
Visual depth on a website can be many things:
-Overlap
Overlapping elements can help break up the rigid, separated, and boxed layouts of the past. Some examples of overlap:
Hero images with text overlaid on top of it.
Have elements break out of section borders.
-Shadows
An effective yet easily overdone way to simulate depth is drop shadows. With a good eye and delicate touch, subtle drop shadows can add that extra pop to elements of your design. Google’s Material Design style handles shadows very well and can be seen in use throughout modern UX design.
A perfect example of using depth with subtlety. The content overlaps the purple section edge, and uses some really light shadows to make the colored boxes pop. Source : http://method.digital/
-Parallax
Again, an effective strategy that’s very easy to overdo. Parallax is having different elements scroll at varying speeds. This can be done simply, such as having a background image scroll slower than elements in front of it, or more advanced where virtually all elements on a page scroll at different speeds. Parallax can negatively affect performance and can seem cheesy if overused, so use it strategically.
5. Custom Graphics & Iconography
Custom graphics offer a ton of benefits and are truly worth the investment.
While there are plenty of great free resources out there, custom icons and graphics help create cohesive and unique designs. Illustrations can be a great alternative to generic and cliché stock photography. Let’s be honest, the starving artists out there would appreciate the opportunity to work.
6. SVG Graphics & Icons
With the growing trend of ultra-high-resolution monitors and retina screens, it is important that all your site’s graphics are crisp no matter what device your on.
An SVG or Scalable Vector Graphic is a type of image file that scales to any resolution without losing quality. Icons that look great on a 1080p monitor might be pixelated on a retina screen. SVGs can require some technical knowledge to implement on your site, but the results are worth it. They are guaranteed to be sharp on all devices
Since SVG’s are technically just lines of codes, they have the added benefit of having smaller file sizes. You can also target the SVG’s CSS style for some cool effects.
7. Typography
Every design element on a website needs consideration, including the typography.
Without attention to your type, you run the risk of making your site look like a Word document. Take advantage of free and beautiful fonts on the web. Google Fonts is an excellent web-based resource and easily integrates into your designs. Font pairings are a great way to add some style and create hierarchy in your design.
It’s not all about font choice either. Adjust letter-spacing, line-height, and font weight of your type. People will notice that attention to detail.
I hope you found these web design tips helpful and thanks for reading!
