Are you having trouble with the design of your web app?

Hey there! It’s always tough to be in that position. Especially with a designer on board to really think about things at that level. Though I appreciate that design is not strictly objective here (there is so much of it that is subjective) there are some steps you could do when you have the time.

Please appreciate that I don’t think these are the be-all and end-all of good design. Sometimes strong visual design is a way to stand out in the marketplace. It’s a way to encapsulate a brand. Visual design can have a massive effect on how people perceive your company (think of budget supermarket logos compared to luxurious ones, for example). These are just some practical points I believe can help.

Audit
I would take a step back and audit every part of the design you currently have. How many headers do you actually have? How many typefaces are being used? How many colours are being used? Take a complete audit of all design elements you have first and see what you’re actually dealing with here.

Consistency
When you’ve done your audit, you may find inconsistencies all over the place. You may realise you have two types of headers for the same thing in different places. You may have two typefaces/fonts for the same thing in different places. You may have two shades for the same thing in different places. You may have icons that you’re using that don’t really feel connected to each other visually. Whatever those inconsistencies are, you should do your best to stamp them out. I believe a cornerstone of any good design is consistency in its presentation. Consistent will naturally help bring harmony to the page.

Simplify
This relates a little bit to consistency. So you have all these elements, you’re trying to make them consistent everywhere, but also aim to remove any complications. To make designs look simple is actually a lot of work, especially when you’re wrangling a lot of information. Ask yourself, do you need two fonts? Ask yourself, do you need to types of grey? Ask yourself, do you really need multiple colours in a logo when one could do the job? If you lean on simplicity and strip away complications that it gets you halfway to a better place with design. When things are simple and consistent the brain can process them quicker. Simplicity and consistency help make something feel considered, which in turn, brings confidence or a sense of quality to something (just look at the Apple product range, for example).

Look at your competitors
This can sound bad at first but what I mean here is that you could really take stock of other companies’ designs that you really like. If you gather those together, you can see what you think works well and what doesn’t. Screenshots can be taken from marketing websites or most product offer some sort of free trials. The key here is to recognise what you like and what you don't like.

Make a style guide to follow
This could be a great, little practical thing you could do which all engineering can follow. Apologises if you already have one of these, though. This relates strongly to all of the things above. If you make yourself a style guide, based on what you already have now, with some consistency and simplicity too, influenced by what you've liked from others, you can end up with a handy little visual guide so anyone on your team can follow along with it. Your style guide could end up including things like:

Main header
Sub header
Interface text
Primary button
Secondary button
Dropdown and other form elements
Iconset
Colours

For icons, for example, make sure they're all from the same set if you buy them. At the very least, make sure they have a similar visual weight and tone. For colours, for example, be strict with them. Really boil the colours you use down to just a few like one for text colour, a primary colour, a secondary colour, etc

Be really strict on that style guide and make sure it contains as little as you need, which should be clear once doing an audit, then bringing consistency and simplicity to it all. Follow this, maintain this, make sure everyone follows it. It'll eventually bring consistency and simplicity from the small details up to the whole system.

I hope that helps a bit. Sorry I can’t be more direct help there! :)

Say something nice to moreofmorris…

1

Hi James, I can give you an answer!

We have had an issue with UX/UI and design since our 3rd Party full service development company went out of business and we took on a great developer ( but bad designer ) to carry on the development, since then we have not had anyone design-minded in house, so UX/UI and Design have taken a back seat to Functionality/Features, and along with that we have introduced complexity I think! It would be good to hear how you suggest we come back from that and how we bring the web app up to standard when compared to newly released apps which clearly have a design team on board!

Chronic404

·
6 years ago
·
1. 1
  Hey there! It’s always tough to be in that position. Especially with a designer on board to really think about things at that level. Though I appreciate that design is not strictly objective here (there is so much of it that is subjective) there are some steps you could do when you have the time.
  
  Please appreciate that I don’t think these are the be-all and end-all of good design. Sometimes strong visual design is a way to stand out in the marketplace. It’s a way to encapsulate a brand. Visual design can have a massive effect on how people perceive your company (think of budget supermarket logos compared to luxurious ones, for example). These are just some practical points I believe can help.
  
  Audit
  I would take a step back and audit every part of the design you currently have. How many headers do you actually have? How many typefaces are being used? How many colours are being used? Take a complete audit of all design elements you have first and see what you’re actually dealing with here.
  
  Consistency
  When you’ve done your audit, you may find inconsistencies all over the place. You may realise you have two types of headers for the same thing in different places. You may have two typefaces/fonts for the same thing in different places. You may have two shades for the same thing in different places. You may have icons that you’re using that don’t really feel connected to each other visually. Whatever those inconsistencies are, you should do your best to stamp them out. I believe a cornerstone of any good design is consistency in its presentation. Consistent will naturally help bring harmony to the page.
  
  Simplify
  This relates a little bit to consistency. So you have all these elements, you’re trying to make them consistent everywhere, but also aim to remove any complications. To make designs look simple is actually a lot of work, especially when you’re wrangling a lot of information. Ask yourself, do you need two fonts? Ask yourself, do you need to types of grey? Ask yourself, do you really need multiple colours in a logo when one could do the job? If you lean on simplicity and strip away complications that it gets you halfway to a better place with design. When things are simple and consistent the brain can process them quicker. Simplicity and consistency help make something feel considered, which in turn, brings confidence or a sense of quality to something (just look at the Apple product range, for example).
  
  Look at your competitors
  This can sound bad at first but what I mean here is that you could really take stock of other companies’ designs that you really like. If you gather those together, you can see what you think works well and what doesn’t. Screenshots can be taken from marketing websites or most product offer some sort of free trials. The key here is to recognise what you like and what you don't like.
  
  Make a style guide to follow
  This could be a great, little practical thing you could do which all engineering can follow. Apologises if you already have one of these, though. This relates strongly to all of the things above. If you make yourself a style guide, based on what you already have now, with some consistency and simplicity too, influenced by what you've liked from others, you can end up with a handy little visual guide so anyone on your team can follow along with it. Your style guide could end up including things like:
  
  Main header
  
  Sub header
  
  Interface text
  
  Primary button
  
  Secondary button
  
  Dropdown and other form elements
  
  Iconset
  
  Colours
  
  For icons, for example, make sure they're all from the same set if you buy them. At the very least, make sure they have a similar visual weight and tone. For colours, for example, be strict with them. Really boil the colours you use down to just a few like one for text colour, a primary colour, a secondary colour, etc
  
  Be really strict on that style guide and make sure it contains as little as you need, which should be clear once doing an audit, then bringing consistency and simplicity to it all. Follow this, maintain this, make sure everyone follows it. It'll eventually bring consistency and simplicity from the small details up to the whole system.
  
  I hope that helps a bit. Sorry I can’t be more direct help there! :)
  James Morris
  
  ·
  6 years ago
  ·
  1. 1
    
    Great reply, thanks! I will discuss with the team and hopefully give you some feedback! :)
    
    Chronic404
    
    ·
    6 years ago
    ·