Does your site look old? Does it feel outdated? In an era of focusing on the users who visit your website, it’s a smart idea to be considerate in your choices on having a modern website design. What does that mean when pairing user experience (UX) and a stylish website design?
Well, we’re here to help you out with understanding your website’s design, and especially your homepage… it is, many times, the first page a user will land on when visiting your website.
So, 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.
Think about it. Having a minimalist aesthetic can be advantageous, but especially if your organization is up against competitors that have busy page designs that aren’t helpful for users technically or from a creative or trendy perspective.
For instance, having an old boxed website layout can result in an outdated and cramped look and feel for your site. Modern web design utilizes the full area of a user’s screen, even if that means incorporating whitespace or graphics that have a feel that enhances the website look rather than detract from it. 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.
Here’s a great modern website design example: Molekule’s website has full width, no borders between the elements and a large impactful photo.
When thinking of how to make a website look modern while also utilizing the full width and the full screen, take advantage of full width imagery and photography. This harkens back to our point from another of our blogs because, frankly, website homepage and landing page 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 be 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 you have an old site like full pages of left-aligned text. Break out of the box once in a while and be more daring with your website layouts.
The HelloMind website has an interesting layout. The left portion of the website is pretty standard, but the right side, once the space is utilized, brings an element of symmetry. The design doesn’t stick to a standard grid and creates asymmetry, but remains balanced. 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, adding different elements to the layout keeps the user’s eyes moving, is eye-catching, and breaks the monotony. Even using angles in your creative design inspiration are simple and effective ways to create a dynamic and modern touch to your website.
3. Animation & Transitions
Moderation is key with these, especially due to the formatting of such elements, page speeds, and load time. Animations and movement can really make your site pop, but over-using it can feel gimmicky and too much.
A few examples of animation include:
- Fading between photos in an image gallery slider.
- Reveal animations
- Hover effects
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.
- Page transitions and pre-loaders 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.
4. Depth
Visual depth on a website can be many things. Whether you are using a certain functions to simulate depth like overlapping elements or simply adding more richness with using normally-sparingly-used tones in your brand’s color scheme or color palette, depth is important.
Overlap
Overlapping elements can help break up the rigid, separated, and boxed layouts of the past. Two examples of overlap include:
- Hero images with text overlaid on top of it
- Have elements break out of section borders
Shadows
An effective yet easily overdone option 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.
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. Despite the cool factor of the element and making your site look more interactive, parallax can negatively impact performance, 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.
At Logical, our Creative Team is known for transforming brands through rebranding projects or more one-off projects that focus on updating creative elements such as photography, header images, and icons.
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 code, 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. This delves into the prospect of what your brand identity is, however, and how you make it come alive on your website.
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. Here’s a related, if yet rhetorical, question: Would you rather click on a CTA that has Comic Sans as the font or one that has more maturity to it like Garamond, Futura, or even Times New Roman?
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.
Modern website design is not impossible. With the amount of talent now available, at Logical and beyond, designers and developers can build high-quality B2B and eCommerce websites that speak to your target market while at the same time highlighting eye-catching, user-friendly modern web design.
So, after receiving these seven tips, what are you waiting for? Partner with us so you can build a modern website with responsive design, ready for converting your website visitors.
