Search the site:

Copyright 2010 - 2018 @ DevriX - All rights reserved.

Website Design Tips: How to Step Up Your Game in Web Design

Website Design Tips

Web Design in terms of creating the visual experience (UI and UX), is one of the main aspects of all web and mobile applications.

The website’s design is the first layer that the end user interacts with. This alone can put huge pressure on your shoulders, but don’t worry, solutions to most problems already exist.

This is an introduction that targets beginners to intermediate web designers who need to develop or expand their skill sets.

Between the major sections, we’ll be adding a few homework assignments. Tweet your work at @wpdevrix with hashtag #DXDesignCourse, we would love to check it out! Of course, you can expect some feedback too 🙂

Understanding the Bigger Picture

While working with many other developers and designers, we’ve noticed that the things that most people lack an understanding of the whole project.

This can be devastating for the final result and can cost the client time and money. We constantly stress how everyone in the team must understand why we build the product, what it does, what features it has and so on.

When people don’t understand this, the project will be delayed or even discontinued because of the wrong implementation.

When the whole project is not well understood, it can fail. When the final goal is vague, the results will be poor. And there is even more to it. As a designer you have to remember that you solve a problem, you don’t paint pretty boxes on the screen.

Invest time in understanding why are you designing websites.

Websites could be designed to:

  • Solve a business problem through design.
  • Improve user satisfaction from using a product.
  • Grow sales by reducing purchase steps.
  • Define consistent branding across various mediums.
  • Increase conversion rates and decrease bounce rats.

Do not design a website just to make it pretty. This usually doesn’t work and if it does, then you most likely implement techniques that will fulfill the points mentioned above without understanding them.

Print, save or write down this list and place it somewhere, where you can see it every time you work on a new design.

Ask yourself those questions and make sure you have an answer. If you need more information, communicate it with your client/team.

As you can see, being a good web designer requires a lot more than just working with a design tool like Adobe XD, Sketch, Illustrator or Photoshop.

Designing requires knowledge in many fields. And because of the sheer amount of things a designer needs to take into consideration, it would be hard to list all of them in this guide.

But it’s never wrong to list a few:

Colors

You need to read and learn a lot in order to see the bigger picture. All of the time. When you pick a color for your design… how do you decide on which color? Is it just because it looks good? Having a good sense of visual harmony may get far, but it’s not so reliable when you work with a larger team.

Therefore, you need to study more about colors. Color wheels, color theory, color spaces, rendering of colors on different monitors or even the mood that colors represent.

From there, you can go to technicalities like implementing your design. Start reading about what is now possible in the web industry – animations, presenting data, layouts and the like. With CSS grids, new layouts become easier and easier to implement by the development team.

Then you can read more about a11y (accessibility). Contrasting colors, button positions, input fields, representing actions with icon versus labels or the very size of your text.

Typography

Speaking of text, let’s look at typography. You have to make sure that the font you pick will render well on older HD screens, regular Full HD screens, and on mobile devices with high and low pixel density. How often do you consider this?

And that’s not all there is to fonts. There is font rendering thrown into the mix. Different operating systems will render vector shapes (text, letters) differently and therefore drastically change the final result of your design.

When you know all of this you can think ahead and solve these problems before they even emerge. But that’s not the only reason. Because of them, you have a better input when brainstorming. For example, you can throw out ideas that won’t work out because you know that a certain font renders badly on Windows even though your client uses it primarily.

All of this so far was just examples of how you can further explore every individual step of your workflow.

When you know about these issues you can produce designs that will integrate well with the rest of the development team and produce better results in the end.

In addition to everything, when you understand the whole project and the things that happen around it, you will have a better time at managing it. The more you expand your knowledge, the more room for growth you will have.

Homework:

  1. Browse any style guide you can find on the web. See what problems are they solving.
  2. Register on Quora and search+follow terms like front-end, marketing, business, entrepreneur.
  3. Search and create bookmarks/Google document/notes for any website you find that writes about CRO, Marketing, Design and the like.

In the next part, we will jump to a topic on finding inspiration.

Finding Inspiration

It’s no easy thing. Unsplash, an awesome resource for “free to use images”, published a book, where they asked photographers to write about what motivates and inspires them.

Often, as a designer, you come across an assignment for a weird industry. An industry that you’ve never heard of or had any dealings with before, and are expected to get results the very same day.

Usually, it’s best to plan ahead and give yourself more time, but again, this doesn’t always happen. So what can you do in such case?

First, you need to find all the relevant information you can. If you’re part of a team, ask the person who sent you the task for more details.

  • What is their current site? What do they like, what don’t they?
  • What sites the client likes and the reasons why?
  • What are the current problems with their site that need to be solved? Some of them you can spot right away (design-wise), but there might be more – like third-party integrations, known UX problems, and more.
  • What is the deadline for the development team?. If they don’t have much time, keep everything as simple as much as possible. Reuse previous design components, the dev guys can copy-paste code from there.
  • What is the logo like? What color scheme(s) must be used?
    Is there new content that you must include?

Ask any questions that you find relative to the project. Grab all the answers and come up with a plan. Sketch the layout, outline the core goals and write them down so that you can see them during the whole process.

Now you can open your design software, but a white canvas greets you. Now what? No ideas? Where do you even begin, this whole thing looks huge. Well, there are solutions.

Never forget that inspiration is something that can come out of nowhere, however it isn’t lottery-style luck either. Here are a few great tips you can use when you feel out of ideas.

  • Open dribbble, search for what you have to work on and see how other people do it. Start developing the main idea in your head.
  • If this doesn’t work, do the same with Behance, the style and presentation can be different, you never know what will catch your eye.
  • Pinterest can also be a great place to find inspiration. Search for color combinations, components, whole sites even.

By doing this for a few minutes, ideas will start floating around in your head. Depending on your usual design workflow, you might want to start sketching out on paper first or directly create a polished complete look of your website.

Here is a nice breakdown of the different types of design prototyping by Atlassian. Paper sketch can be good for you and your team, but you can’t show something like this to your client. To him/her this could even look like slacking.

Luckily for all of us, not every request comes labelled as “get it done in two hours.” A more robust workflow will eliminate many design mistakes, you will have a lot more time and access to other team members to brainstorm with.

So now is a good time to say that inspiration isn’t only visual. Some great ideas can come from just reading a study on “Conversion rate optimization case study” or “How we implemented <feature>”. Always keep your pocket or Instapaper list full of articles to read.

But it’s still possible that nothing comes to mind. What then? Well, there are a few options depending on your case.

  • If you have time, stop worrying. Work on something else or read/browse even more. Store some ideas, write down thoughts, concepts or anything else that comes to mind. Come back to it after an hour, two, in a day or even more (depending on your schedule).
  • Brainstorm with your team. That is if you have a team of course. The more the better, just make sure that you or the whole team understand the business needs. Don’t get too carried away with ideas would be too out of scope.
  • Browse the competition. See what they do and what can you do better. Write it all down, keep your notes safe. Even if you never look at them, it’s a great method for remembering and developing an idea.
  • Just start working, even if you have no idea and you think everything is lost. Funny thing is that after 30 min you could get some awesome ideas just because you’re trying. This usually works for everything, so give it a go 👍

Finding motivation and inspiration can be hard, but you can train yourself to do it. There are countless articles on that topic, we won’t list them here, however you can find them with an easy Google search.

Now you might ask “but what do I look for?”. It’s understandable, a tip on the web that says “go browse <random site here>” and ideas will come has its flaws. There are specific details that you can pay attention to that may boost your imagination and apply to any ideas that come to you on the actual site you’re working on.

  1. Look for style guides. A good site to bookmark would be styleguides.io which has links, books and even podcasts related to style guides and design in general.
  2. Look at color schemes. Color Hunt is another great place to visit every once in a while. Colors alone can make you feel the design. The human mind connects colors with emotions and this can very well be your source of inspiration next time.
  3. Design style. While you browse Dribbble look for things like shadows, white space, font styles and font properties, contrast, use of images, a balance between elements, layouts and even presentation. Look very closely at every single detail and think why is it there, and how does it connect with the rest.

In the process of looking at all the details, you will see how everything connects and how can you use that. You can even go and try to replicate a certain style. – careful, by no means do we mean “steal” it.

  • Begin with a certain style.
  • Find a layout that works.
  • Search for relevant images.
  • Bootstrap generic content for start.
  • Do not limit yourself.

Not a single step during the initial prototyping should be a blocker.

Things like finding the perfect picture, finding the perfect font or writing the most engaging copy are NOT a requirement and if they stop your inertia, they can very well be the cause for your delayed delivery.

One more tip: music can help. “90% of workers perform better when listening to music”. Whatever works for you — calmer acoustics/piano, classical music, metal, pop, EDM, etc.

Homework:

  1. Create a redesign to Google’s search results page.
  2. Create another redesign to Google’s search in a completely different way.
  3. Create a big note/bookmark/Google document for every single site of inspiration you can find.
  4. Keep it easy to find.
  5. Make a “work music playlist” that is easy to find.

Leave a Reply

Your email address will not be published. Required fields are marked *