0

I'm redesigning an app and I used the company's brand/website colours and fonts. However, a user tester said my design looked "amateur." How do I make this look more professional while keeping company colours and fonts?

Technically, I am an amateur since I'm a student, but I want to better than that. :p

amateur app design

4 Answers 4

2

What is amateur in your design is not the design itself, but the interpretation you have made of the company's style according to the graphic guidelines of its website and the lack of correspondence with the graphic of your app.

Main visual characteristics of the company's corporate graphics:

1 - Retro 40's style

2 - Broken colors (not main inks) highlighted in contrast by a rather relevant use of black

3 - Flat shapes

4 - Strong shape contrast

5 - Use of basic regular shapes, mainly circles, triangles and rectangles

6 - Emphasis on geometry

7 - Generous margins

8 - First half 20th century retro style typefaces

9 - Wide black areas as a heavy differentiating element

I think your presentation is a very good start to develop the app, now you need to study the design well and apply it.

1

You should use the same components ( eg. buttons have sharp edges not round ), make better use of white space ( yellow space in your case ) , reduce the orange color usage, use the same font sizing. Go for a cleaner look by removing the orange underline of titles, the green shadow for the wizard steps. As a starting point you should recreate the existing components on the website in your software including font style, sizing etc.

1

First of all, don't let a single comment from a single tester throw you off. Turn it into a quick survey among all your testers (which are hopefully more than that one person) and let them rate the redesign among different aspects (more than one!), including "professionality" and maybe even "being on brand". Then react if there's still a clear, common opinion, not a single outlier.

That said, I wouldn't change that much, it's generally already looking very clean. Sure a few things can be changed (e.g. non-rounded buttons, as Cristian suggested, or make sure the "next" buttons are all aligned on page 1 and 3), I would even say to go even more in the direction, the website is giving you. Maybe use a similar header to the website (white text on black with this 'toothed' separator), instead of your current headlines.

0

There is a wealth of design material at the company's website which you've essentially ignored or overlooked.

  • Zig zag colored regions
  • Top colored bar
  • background variations on the "yellow"
  • Script typefaces

All of these can be incorporated in much the same manner in an app to retain the overall branding.

enter image description here


For ease and quickness, I used a script font which doesn't match the company's site. If it were my project, I'd ensure the typefaces match. In addition, the pattern in the bottom shape is representative. I'd use the same pattern found on the web site.


Maintaining branding is all about repeating elements and appearances and how they are utilized. Simply matching colors is rarely enough.

At the web site, green or a "teal blue" are used for "action items". Other than the little top left ball, orange is not an action color from the web site. So the app should adhere to this usage - utilizing the green and teal for action items. And action items (buttons) on the site are all set in uppercase type, I'd match that as well.


Sidebar... it seems you're using some sans serif font that actually does more harm than good. Not sure what typeface it is.. but overall that choice of typeface does more to convey a sense of "amateur" than anything else in my opinion. Whatever it is, it does not match the typefaces from the web site. Basically.. I really dislike your choice of sans serif typeface. It, to me, looks "cheap".

3
  • I don’t really understand your last point about the typefaces. There are only two typefaces used in the mockup, as far as I can tell: one is Brandon Grotesque, the other I recognise, but can’t recall the name of. Those are both used on the website as well – the only difference is that most (but not all) of the examples of Brandon on the site are all-caps, which they’re not in the mockup. But apart from that, they’re the same two fonts used on the site. (The site also uses Helvetica in a few places, which I think just muddles the design.) Aug 14, 2020 at 20:57
  • @JanusBahsJacquet Perhaps it's the uppercase then. Whatever the bold, larger type, (form labels) is in the mockup, I find, pretty bad visually. I would never use that typeface. But I do admit, it's personal preference, nothing technical.
    – Scott
    Aug 14, 2020 at 21:19
  • Yeah, that’s Brandon. I’ve never been overly fond of it either (its sibling, Brandon Text, is much nicer), but most of its discordant appearance does come from the lowercase letters, so you don’t notice it so much on the website where it’s mostly uppercase. Aug 14, 2020 at 21:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy