Tips from a Web Design Wizard

Racepoint Global

Written by: Nick Rivers – Senior Software Engineer, Racepoint Global Boston

Don’t Totally Re-invent the Wheel

Source: Giphy

As a web designer, it’s not always necessary to totally “re-invent the wheel” for every situation. Successful websites all share similar design conventions, which give users assurance and allow them to engage with content effortlessly.

It’s your responsibility as a designer to iterate on these conventions, make improvements and customize them to fit your design needs.

Inspiration can help you find and understand new and existing conventions.

Inspiration

Inspiration is crucial to the success of any website design. Staying up to date with popular trends keeps you ahead of the curve and in front of your competition.

Google is your best friend in the inspiration department. Search the web and find designs that meet the project goals.

After finding inspiration its time to collaborate with your team.

Collaborate

Collaboration is also a great way to hammer out a good design. Working with others exposes you to new ideas, a different point of view, and motivation. Have a collection of your inspiration ready prior to the brainstorm with the Tech & Creative team members to see how we can apply your ideas to the website experience. This is your time to ask questions about what is technically feasible.

Responsive Web Design

Responsive Design makes your web page look good on all devices (desktops, laptops tablets, and phones). The foundations of Responsive Web Design are to resize, hide, shrink, enlarge, or move content to make it fit any screen. It’s important to visualize and understand this concept as it is an industry best practice.

Mobile First

The “mobile first” approach is exactly as it sounds…

It is designing for the smallest screen first and then iterate up to the larger screens. This is the recommended approach for Responsive Web Design. The ideology behind this concept is that mobile design should be done first because it is the hardest.

Why Mobile First?

  • Design the foundation of your UX from the start
  • Able to solve design problems for the most difficult screen size first
  • Nearly all popular front-end frameworks are Mobile 1st
  • More and more mobile users

Grids Changed My Life

There was a time long, long ago where I didn’t use or understand grids at all. Then one-day fluorescent bright guides appeared neatly in front of me and a new chapter of my life commenced.

Grids create basic schematics or structural layout for a design. They are simply hidden lines that all elements are placed on. Grids unify the overall design by providing alignment and consistency across pages and devices. Grids also help control how element stack on different devices. They are essential to Responsive Web Design.

Style Guides Save my Life        

Source: Giphy

Style guides will make you a better and more efficient designer. They will probably make you some new friends around the water cooler as well.

By creating website style guides, designers are able to set and maintain the look and feel of the design. The best way to create a style guide is by using the Atomic Design methodology.

Atomic Design is a technique for creating design systems. There are five distinct levels: Atoms, Molecules, Organisms, Templates and Pages. This idea simply means to design each level separately and then pull them all together to create the entire design.

Styles guides should come after the initial concept phase.

Site Performance

Source: AskIdeas

Site performance is one of the most important components of a successful website. Performance plays a huge role in user experience, Google search results and Social media reach. A site’s speed and usability make up a good chunk of Site Performance.

Site Performance Factors include:

  • The number of font families
  • The amount and size of imagery
  • JPG and PNG versus SVG or CSS
  • Mobile and Responsive experience

Working with Design Tools

It’s important to work with design tools correctly. It helps save time and frustrations down the road for developers.

Here are a few things to consider:

  • Use layers, smart objects, symbols
  • Build to the recommend scale or dimensions
  • Use a grid, guides or download-able templates
  • Export your designs as graphics and make sure it looks good and in a browser or preview
  • Once you’ve completed your design, you will need to hand over your work to a developer

Handing off Your Work

Source: Giphy

It’s time to hand off your work and it is your responsibility to make sure you are handing off workable files and assets to execute your design.

Before sending off your work, be sure to:

  • Make sure files are straightforward, organized, clean, and easy to use
  • Include assets (fonts, source imagery, vector graphics)
  • Include your style guide along with your page design composition
  • Don’t be afraid to reach out with any questions