How to create a design work-flow for mobile or web user interfaces?

Question

When I start to design a new user interface or new feature for mobile or web applications, I feel that I'm doing the process randomly without having a strategy like I do when I write the code in React.

This mostly happened with Scratch Projects.

Let's say you opened your Invision or Adobe XD and you will start the design of new UI.

Sometimes for side projects, I don't have DESIGN SYSTEM for spacing, font types, and so on.

I have these issues :

• Should we design from top to bottom of the user interface?

• How to organize the versions of the UI? v1, v2

• Design the full-completed UI then implement it is good a process.

• Is there a tools for visual testing based on Best Practices especially with font-sizes and layouts?

Answer 1

My process

1. Sketch out the rough flow on paper (how many pages or screens do I need?)
2. Create artboards for all screens
3. Place placeholders for content on artboards (e.g. "user image", "username", "password")
4. Prioritize content on artboards from top to bottom
5. Create UI for placeholders

Your questions

Top to bottom: I would start with top to bottom because then the priority is clear. You can still later decide to design a sidebar next to the main content but then it is also clear what happens to it if you design for a smaller screen width (the content goes to the bottom).

Organize the versions: I also use v1, v2,... You can use whatever you like.

Design the full completed UI: Yes, I would say so. Usually, you will find things that you did not consider and then have to go back to the design part.

Tools for visual testing: I am not sure what you mean. I use a contrast checker to check for WCAG AA accessibility of font color on background.

Answer 2

As a Computer Engineering Student. I am sharing my experience and perspective as a Back-End Developer. Structure and Organization matter to me. As I consider User Interface, I also include the benefits of User Experience. I suggest using Programming Languages of VB Visual Basic, HTML HyperText Markup Language, and CSS Cascading Style Sheets. I hope that this helps accomplish your project.

Should We Design from Top to Bottom of the UI User Interface? I would highly suggest and encourage the User Interface to be Organized and Designed from Top to Bottom. With my experience, I place the significant data and information at the Top so it could be considered Priority. I place the Sub-Information at the Middle of the Page. Then, I write all extra needed information at the bottom. As long as it is Organized, Accessible, and Favorable, it is a good thing to think about as the project is written and built. Please also consider using Flowcharts.

How to Organize the Versions of the User Interface Versions 01 and 02? As a Programmer, I organize Syntax and Notations Alphabetically. Some Organize and Write it Numerically. As per my suggestion, I would consider using Numerics first, and Alphabets as Second Method of Organizing User Interface.

Are There any Resources for Visual Testing Based on Best Practices Especially with Font Sizes and Layouts? Yes. I Would Encourage all Users to Take a Peek at These Websites for Additional Further Information:

UX Planet: My 10 Steps UX+UI Workflow https://uxplanet.org/my-10-step-ux-ui-workflow-2019-74bb78723414

Medium: The Basics of Good User Interfaces by Terry Karavoulias https://medium.com/datadriveninvestor/the-basics-of-good-user-interfaces-649a701891e4

LucidChart Workflow Diagram Software https://www.lucidchart.com/pages/

W3Schools HTML HyperText Markup Language and CSS Cascading Style Sheets HTML: https://www.w3schools.com CSS: https://www.w3schools.com/css/default.asp

Usability.GOV: User Interface Design Basics https://www.usability.gov/what-and-why/user-interface-design.html

Microsoft Visual Studio Integrated Development Environment Software https://visualstudio.microsoft.com