0

I'm building a web app, but I'm not a designer, so I rely on a lightweight CSS framework to provide the basic styling and structure of different UI elements. However, I usually struggle with how to structure the web app to provide a good UX.

I googled "web app ux design" (and "ui design"), but most of the results talk about designing a web "site" not a web "app". For example, the main focus seems to be the principles of design, e.g. color/contrast, visual hierarchy, spacing, etc. What I need are things like general app layout, hub & spoke pattern, navigation, side-bars / menus, relationship between conceptual/data model and pages/screens, role-based functionality, record details vs lists/tables, bulk actions, page sections/layout, cards, modal dialogs, in-page actions, form design for simple in-page manipulation vs. complex data entry (multi-step wizards), etc.

Where can I find such a tutorial or guide? I'm willing to even pay for an online course if one is available.

closed as too broad by Madalina Taina, maxathousand, Ken Mohnkern, DasBeasto, locationunknown Jul 23 at 5:22

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Hi Khaledh, the purpose of this site is to provide answers and recommendations to UX conundrums. The reason why your question has been down-voted and has two closure votes is that it is too broad. However, your question isn't without UX merit, what you should look at is the fundamentals of what you're users are trying to achieve and THEN look at how they achieve it. – DarrylGodden Jul 22 at 14:28
  • Thanks for the tip @DarrylGodden, I appreciate the feedback. Since I'm a complete noob to UX design, I needed to start with a broad question to help me narrow down my focus to more specific questions. The issue I'm facing isn't widely discussed online AFAIK, hence me turning to StackExchange. – khaledh Jul 23 at 0:47
2

Depending on technology is a lot of available libraries or visual systems, for example:

  1. Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines/
  2. Material Design - https://material.io/design/

You also have ready UI libraries - for start it's good idea to use it:

  1. https://semantic-ui.com/
  2. https://material-ui.com/
  3. https://designrevision.com/react-component-libraries/

If you don't experience in design You can use free ready components and create the whole system from them.

There are different strategies and methodologies, however my experience and intuition evolved a hollistic view of the project and firstly create an architecture & structure of every pages/interactions.

So at the beginning it is worth defining scopes, modules, and then later defining the details

When it comes to pure design aesthetics, you just have to watch a lot good projects.

For tutorials You can visit this article:

https://uxdesign.cc/ultimate-start-guide-for-beginner-ux-ui-designer-b848be089589

I read this few minutes ago and it's a good repository of knowledge for beggining.

  • Thanks Piotr. I'm familiar with several UI frameworks like Semantic and Material. However, I think they solve the problem at a micro level (i.e. UI components), while I'm looking for macro level design, i.e. app architecture, and the wisdom behind making certain choices in layout, navigation, workflow design, and task-oriented design. I'll give Apple's design guidelines a closer look. – khaledh Jul 23 at 0:39
1

I would also recommend checking out Steve Schoger's Refactoring UI work which could be really handy for you. https://refactoringui.com/

He has lots of interesting videos on youtube.

  • What a coincidence, I and Steve worked briefly together on the same product several years ago! Thanks for the tip about his site. I will definitely check out his tips and videos. – khaledh Jul 23 at 0:34

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