Simply put,

UX defines what should be present on the screen and where it should be present on the screen.

UI defines how will the things look on each screen basically beautification and enhancing the ease of identification of different aspects.

Web Design is the coding of the UI. Basically HTML/CSS/JS/Bootstrap, etc. It is what brings your designs to life.

I will answer it in the flow it is supposed to occur. Yes, while designing or developing if you don’t follow the proper flow, you are likely to waste a lot of time going too and fro with the changes.

First comes UX:

UX, as you know, is User Experience like the name suggest it is used to design different ways in which the User can very easily use the application.

Parameters to be considered while Designing the UX:

  • Content to be written on the screen,
  • Text (what need to be bold/highlighted/differently colored),
  • Specific Information to be displayed on a particular screen (like for Profile screen your specific information could be DP, name, email, phone, etc.)
  • Placement of each text and buttons (Very Important)
  • Complete flow of the application
  • User Journey (like from user signup to the last thing you want the user to do)

What not to consider at the time of UX:

  • Colour of text or button
  • Font style or Roundness of the buttons
  • Colour Theme
  • Animations,
  • Beautification,

Other Important and more technical things to focus:

  • Aesthetics of the Design
  • Creating a user habit in terms clickables/actionable/placements (the main focus of UX)

Examples of UX and some important documents that we generally create for our clients:

Second in the Process is your UI:

UI is the User Interface, this is what users will see and interact with. These are the final design that will then go for the development, hence we are only discussing the images till now. There hasn’t been any involvement of a developer.

Parameters for the UI:

  • Font Family
  • style of icons and images
  • Color Schemes
  • Highlighting the important things on screen
  • Differentiating things we want the user to click versus things that can be clicked
  • Replacing text with icons or images,
  • Background textures

Things not be considered:

  • Any type of thoughts in changing the placement of the text/buttons/element
  • Addition/deletion of content
  • Addition of new functionality or feature

Other important things:

  • Target audience Psychology,
  • Product aesthetics,
  • Image semantics,
  • Formation of habit with colors
  • Driving user intent like urgency, importance, urge, etc.

Example of the UI: I will share the final screens of the same UX as above.

Then is the Web Designing:

Web Designers are the people who bring the images to life. This is where you might get to hear about the pixel perfect development. Everything that is designed in the UI Phase, the Web Designer is supposed to code and replicate the exact design pixel by pixel (pixel: If an image was to be broken in smaller boxes then pixel will be the smallest box of the image.)

Parameters of the Web Designer:

  • Making the Web Page responsive (maintaining the design throughout devices)
  • Generating a pixel perfect code,
  • Adding animations and effects to enhance the design,
  • Creating a smooth transition between pages,

Things not to be considered:

  • Changing the color code of the elements,
  • Changing the icon shape or size,
  • Changing the placement of elements or the color theme,
  • Any other kind of change,

Other important elements:

  • Code Robustness
  • Error Handling,
  • Scalability,
  • Code readability,
  • Commenting and documentation

After this there is Database Designing, creating APIs and then the front-end, but maybe we can keep that for the later.

Hope this was useful. There are many Companies and Freelancers who tend to mix one or the other process at the time of development for whatever the reason but as a client or a team member you should make sure to follow the right process.

Changing this process will cost time, effort, and money, let alone the headache and marketing plan that will get jeopardized because of the delay in the final products delivery.

Follow the right process and build great products.

Cheers !!