Web Designing

Young designers today, do you know about the GIFs of the ‘90s? or the more up-to-date focus on flat design?

Recently, there has been a surge in popularity of mobile web design, as more and more sites join the drive to become ‘mobile ready’ which is now even more important in the wake of Google’s Mobile Friendly update. Now, one of the side effects of responsive design has meant that a lot of websites look similar. The rise of WordPress websites design and the booming ready-made theme market can be blamed on that.  But having a similar look isn’t necessarily a bad thing. As we have changed the way we look at the web, which has resulted in a lot of common UI design patterns. Design patterns have matured and as such, there’s little in the way of innovation when it comes to UI patterns.

UI Patterns

Here are a few patterns web designers today should be familiar with:

  1. The hamburger menu: Its widespread use makes the function easily recognizable for users. It’s the menu icon you see on mobile sites that you can tap with your finger to see the whole menu.
  2. Account registration: You will find this pattern whenever you try to register for a site. There might be a form to fill out or a button that’ll allow you to use a social account to sign up. Multi-step form wizards are also effective since they “chunk out” the required fields, reducing friction and encouraging users to flow through the process.
  3. Long scroll: Placing all your important elements above the fold is now a well-known feature. Furthermore, almost everyone is accustomed to long scrolls thanks to mobile devices. The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.
  4. Card Layouts: Pioneered by Pinterest, cards are everywhere on the web because they present information in bite-sized chunks perfect for scanning. Each card represents one unified concept. Since they act as “content containers”, their rectangular shape makes them easier to re-arrange for different device breakpoints.
  5. Hero images: Since vision is the strongest human sense, HD hero images are one of the fastest ways to grab a user’s attention. Thanks to advances in bandwidth and data compression, users won’t suffer from slow load times either. One common layout you’ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.

Rich Animations

Animations are being used more and more to enhance a site’s storytelling, making the experience more interactive and entertaining.

However, you can’t just stick animation in anywhere. Consider carefully whether it adds to your site’s story elements and personality. Animations can be thought of in terms of two groups:

  1. Large scale animations. A primary interaction tool have more impact on users and include effects like parallax scrolling and pop-up notifications.
  2. Small scale animations. These include spinners, hover tools and loading bars, and don’t require any user input.

7 of the most popular animation techniques:

    • Pre-loading animations

These are used to entertain users and delight users during an otherwise boring experience. Loading animations tend to be popular for flat design, minimalism, portfolios and one-page sites.

    • Navigation and menus (nonscrolling)

Hidden navigation menus have become increasingly popular, especially as they can be used to save screen space. These use animations to reveal a menu when clicking on a specific button and prevent a jarring transition (like a navigation drawer hidden behind a hamburger icon).

    • Hover animations

Hover effects give a more intuitive feel to a site as users mouse over content. Users unsure about a feature’s function tend to hover over them automatically for instant visual feedback.

    • Galleries and slideshows

Galleries and slideshows are an effective way to showcase multiple images without overburdening the users. These are great for photography sites, product showcases, and portfolios.

    • Motion animation

Our eyes are naturally drawn to motion, which makes it the perfect tool for drawing a user’s attention. Motion can also help with visual hierarchy. This can help to add interest and intrigue to forms, CTAs and menu items.

    • Scrolling

Smooth scrolling relies on animation and gives further control to the user, who can determine the pace of how the animation unfolds.

    • Background animations/ videos

A simple animated background can add visibility to a site, but should be used in moderation or it can be very distracting to the user. The key is to work on individual sections or create a gentle movement of an entire image.

Mobile Responsive Web Design

It’s safe to say responsive design is here to stay, as it represents a relatively simple and cheap way for businesses to build a fully-functional mobile-friendly site. But mobile responsive web design does come with some issues if not carried out properly, the most important being performance.

To ensure that a responsive performs at the peak of its ability, web designers should:

  1. Avoid using JavaScript and CSS image loading.
  2. Use responsive images which are defined using a percentage.
  3. Use conditional loading for JavaScript as many of the JavaScript components used on a desktop site will not be used on smaller devices. Pay particular attention to third-party scripts such as those used for social sharing as these often impact negatively and reduce performance.
  4. Use RESS
  5. Apply performance testing into the process in order to effectively measure and optimize each site.

Performance is important not only to UX, but also to Google in the wake of the Mobile Friendly update which released in April 2015. Responsive web design is also highly compatible with minimalism, thanks to the necessity to keep page weight down. It’s also great to work with cards and responsive design as they can easily restructure in order to fit any breakpoint or screen size (like rearranging rectangular containers of content).

Bottom-line

In this blog we will try cover all aspects of modern web designing. Please read on and we hope you benefit from your reading. If you are in the London, Ontario area and seeking professional web designing help please visit our sponsor Web Design Toronto Company DTW serving GTA businesses.