UI and Front-End Improvement

By: Erik | 25 Aug 2016

 

UI, or User Interface, is one of the most crucial, if not the absolute most crucial skills of front-end development. Even if you are just a Web Developer/Designer, UI is something that you need to be proficient in, lest you look like a failure in the eyes of your team and employer. Thankfully, it’s a relatively easy skill to learn, and actually requires some artistic skills, some prototyping, and lots of discussion.

Now, to get started, you’ll need the following:

  • Proficiency in at least HTML and CSS (frameworks optional, but recommended)
    • JavaScript and it’s frameworks, jQuery, and Bootstrap are also good to know
  • Adobe Photoshop, which you can get here.
  • Wireframe.cc – minimal wireframing tool
  • This color picker.
  • Some design and creativity.

Now, when you look at the structure of a basic website, what do you see?

  • Header
  • Navbar
  • Body
  • Footer

These four elements of a website should be incorporated into a “mock-up,” which is just slang for the Photoshop design of your desired website.

Now, here’s some damned important advice, which will make or break you at this point:

  • KISS: Keep It Simple Stupid. This is one principle you need to adopt in allaspects of programming, not just web development. Users want something that’s easy to navigate. If people can’t find what they need to get to, then they will simply not visit your site. Here are some pointers:
    • Use a clean font that relates to your style. Don’t use anything to flashy; just use something that the user can process. 12 to 14 point font highly recommended.
    • Don’t add flashy effects to the website, or use nauseating colors for the structure. This will annoy your users, and most will leave your website and never come back. Now, if you want to add some jQuery animations and functions, then go for it. It’ll add some modernity to your site. Simply put, if you wouldn’t look at that color for hours on end, then you shouldn’t use it in your design. Most of the time, a light shade of a color and a mix of black and white will help you.
    • Cleanliness is next to godliness. If you have a clean website that’s attractive and easy to navigate, then implementing SEO, and ad monetization will be a breeze, and you’ll be making hundreds of dollars before you know it. Plus, people will come back time and time again (especially if you have a product to sell).
  • Design for the user first, and yourself second. Remember, the user is always first, and they will determine the overall success of your website. If you’re not sure how a website looks, then you need to ask someone to look at it for you. If your non-programmer friends aren’t very savvy, then try to find some other designers and see what they think. If they get lost or confused while navigating the site, then that’s a warning sign that the site isn’t clean.
  • Get wireframing down to a key. If you can get the wireframe down, formulating the structure of a website should be easy. Use that link I provided above to play around; look at some example websites for the type of website you want to create, and visualize how the site will look.

Now, that should cover the entirety of UI design for a website developer.