0

I am creating a website and my skills are in the back-end and unfortunately, I always have to end up doing the front-end as well. The coding is not the problem, it is the design and color choices. All my websites on the client-side end up looking very flat and boring and makes them look unprofessional (which they are from the front-end lol) so I am in search for tips on how to make the website "pop", not look so flat and mix colors correctly. I have attached a screenshot of the current login page for a website and could use some advice on how to make this not look so flat and boring.login page example

I know it is not centered, that is just because I did not take screenshot of the entire screen. More specifically, I would like the "logo" in the top-left look more like a logo instead of just text on the screen. Also, need some help on how to select fonts. Any help is appreciated. Thank you!

closed as off-topic by locationunknown, Matt Obee, Mayo, Devin, plainclothes Jun 2 '17 at 18:32

  • This question does not appear to be about user experience within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    Hi nd510, your question is more suited for the Graphic Design community. Kindly post this here graphicdesign.stackexchange.com and you will get your answer – Shreyas Tripathy Jun 1 '17 at 5:54
  • @ShreyasTripathy Is there a way to transfer the question over or should I just create a new one on that site ? – nd510 Jun 1 '17 at 7:30
  • 1
    Just post this question on the other site. Once done, you could close/remove this question – Shreyas Tripathy Jun 1 '17 at 7:34
  • or a mod could migrate it for you – Luciano Jun 1 '17 at 8:44
  • 4
    I'm voting to close this question as off-topic because it is more suited for Graphic Design SE. – locationunknown Jun 1 '17 at 9:38
3

When I first started out in web design, I created a big folder of all the websites that I liked the look of, and then I .... borrowed heavily you might say. I looked at the colour combinations they used, their use of fonts for headings and paragraph text, I scrutinised their drop shadows, bevels (they were a thing back then) and borders. Is there something specific about the website that you could focus on for a background image? e.g. if it's a website about food, choose some delicious looking images and put the login form on top of that. Here's a pinterest board with some good imagery: https://pinterest.com/xiusheji/app-sign-in-login/

Nowadays you can start off with one of the many libraries or frameworks that has a complete style guide set up. Examples here: http://www.hongkiat.com/blog/bootstrap-alternatives/ For specific colour schemes, check out what others have put together on sites like Kuler: https://color.adobe.com/explore/?filter=newest

For the company logo, you can utilise services such as Google Fonts. https://fonts.google.com/?category=Display,Handwriting Type in the company name and look at non-paragraph text fonts (so check options for Display and Handwriting to start). You can then scroll through pages of options. Fonts like Lobster and Pacifico show that linking the letters together makes it look less like text.

Also pop into the folks at Graphic Design if you haven't already: https://graphicdesign.stackexchange.com/ They might have their own suggestions.

Best of luck! The more you keep designing, the better you'll get at it.

  • Thank you, I will definitely check out the sources you mentioned. And I actually didn't know there was a graphic design site so I'll check it out! – nd510 Jun 1 '17 at 7:31
2

First of all, you may find some awesome flat colors at flatuicolors.com. You can create awesome shades according to your choice or your customer's choice.

Second thing, a text-only layout makes the user feel bored so try to use some icons from fontawesome or stock images to increase the readability.

Third and last, always try to separate the call to action button (in your case it is Signup) by giving importance to it. I attached an image of my design for your understanding.

enter image description here

  • And thousands of typographers scream in horror. – Rob Jun 1 '17 at 13:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.