Self-Taught Developer: How To Become A Better Front-End Developer 1/5: UI vs UX

Make this as your guide and reference to your Web Development journey.

This is the start of another series specifically made for Frontend Developers.

It’s funny how so many people are calling themselves experts these days when the truth is they can hardly even get proper jobs, just because they’ve created several projects, copy-pasted projects that came from senior developers who are teaching online, that’s not how things work. I am no expert, I am no teacher either, I am just working as a Frontend Developer for Web and Mobile for almost 4 years, and I am still learning every single day, sharing the best I can to give back, being a Web Developer changed my life and opened a lot of opportunities for me.

Always have a beginner's mindset and don’t fall into this trap of thinking you are an expert right away because that’s when you stop learning.

Never let success go to your head and never let failure go to your heart.

— Ziad K. Abdelnour

So in this series, we will start first with defining the overview, the basics, the tools, and the future of Frontend Development.

Photo Credit to CareerFoundry
Photo Credit to CareerFoundry

is basically the process of building a good relationship between the business or company, its products, and services to its customers and users.

It’s the process of making a thorough research, meticulous development detail after detail, in making sure that the user interaction will be as smooth as possible, making the users be fully satisfied by its need, to be able to get good response in order to convert them and manipulate them to do different actions that will potentially benefit the company. In these days, companies can already track every action the user or customer does inside the website and mobile apps, tracking their behaviors and response is a very useful data for future business growth and benefits, so being able to build a good design and storytelling is very crucial.

Photo Credit to Prototypr

User Experience design is composed of different aspects of discipline, visual design, interaction design, usability, good storytelling, and effective storyboarding.

A good User Experience is when the website and mobile apps are very easy to use, understandable, focus, straight to the point, simple design is good design.

Photo Credit to EverGrow

is the visual interaction of the website or mobile apps. UI designers are responsible for making the interface look good, attractive, familiar and friendly.

A good UI Design attracts customers and potential clients/users. There are several elements when it comes to the User Interface,

  • Text
  • Images
  • Documents
  • Videos
  • Forms
Photo Credit to Prototypr

Quick Tip: If you are to choose to use third-party library or framework for the design then make sure that the rest of the e-product will have the same library/framework too, if you decide to use Bootstrap then make sure to use Bootstrap on your other projects, if Material UI then use Material UI on the rest of the project, this will make the users think of clarity, reliability, and trust. Always make sure that the user will never have a hard time understanding how your website works, everything should be easy breezy.

A very good example would be the logout button, some companies decided to hide their logout button to make sure that the user will eventually change its mind for the reason that it’s so hard to find if you are the user would you not be irritated with it? Everybody has a different opinion though, some probably think that it’s good for the marketing, but I guess our goal as a Frontend Developer should always be serving the users and clients the best way we can, making sure that we are giving them the best experience as possible, making sure that everything from the logo to the buttons should be understandable, it’s just my opinion.

Photo Credit to Evergreen

User Interface Design and User Experience Design may sometimes overlap, but they simply have a clear purpose and roles.

The User Interface concern is on how the website looks, while User Experience’s concern is on how things work.

“Design is not just what it looks like and feels like, the design is how it works” — The Great Steve Jobs

User Experience creates wireframe and prototype, interaction designs and user testing while User Interface, on the other hand, is focused everything on the visuals by building storyboard using Adobe XD for example.

Something that looks great but too difficult to use is absurd, great UI and bad UX, on the other hand, having very usable that looks terrible is an example of great UX and bad UI, why can’t you make both a success?

If you are wondering which is more important than the other, they are both important and crucial for the business’ success. They both have different roles and purpose, imagine how your apps would look like if both designs have successfully maximized, it would be a trend.

It is really important to plan ahead, define your website’s purpose, define the user storyboard, the user’s journey, and you have to know your target audience even before you start creating a plan.

Another basic example of not having a good design is having 2 buttons too close together, the submit and cancel buttons when the user keeps hitting the wrong one, imagine how they would be pissed, even with a simple margin would really make a difference.

So Frontend Developers do? Well, We provide a great experience for our users who use and visit our websites and mobile apps.

UI Design by Design Course

Adobe XD Tutorial by Bring Your Own Laptop

Frontend Development Crash Course by Design Course

Part 2 Coming Up….

Self-Taught Developer: How To Become A Better Front-End Developer 2/5: Free Tools and Resources To Learn UI/UX Design

Photo credit by Unsplash

Software/Mobile Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store