Usability UI Design UX etc - documenting for a project

0 votes

I'm a software developer, and I'm going onto a project now that involves implementing a website using ASP.NET (3.5 / 2008, using the Web Client Software Factory). I've been tasked at creating a UI / UX Design Document for the project, however I don't really know where to start.

I've been on one project in 3 years where there was a formal UI design document, which included layout and style guidelines/rules (e.g. the application has a header, navigation, etc., links must be colour A, buttons for positive actions must be on the right, etc. etc.). It was pretty useful in hindsight, I appreciated that someone went into that much effort too - even defining the CSS classes in the document. However, the doc was based on an existing application and conformed to the business' overall corporate identity.

The current project is a new project, which at the moment doesn't have clearly defined requirements (yes, I know... how do you design when there aren't many requirements... I digress). It is hard to know what functionality exactly will be needed. There are two different user types / personas, but no formal research will be performed on them for this document. Also, I'm not sure of the corporate identity, apart from that the business has some rules regarding use of their logo, which I'll only get further clarification on in a few days time.

So I'm slightly in the dark, throwing paint at a canvas, hoping I get a pretty picture at the end (if only I were Jackson Pollock).

What would you include in this document? It is aimed at the business (the client), as well as the developers. I can think of only the below:

  1. Layout - header, footer, content, navigation
  2. Styles - colour palette and styles of the different expected components
  3. User Interactions - when a user performs an action and must wait they are notified by a modal dialog, validation is done using AJAX, navigation should be contextual, tasks should be performed with a minimum amount of clicking / navigation, etc. etc.

Has anyone got any experience in creating such a document, or any known, tried and tested process for UI design?


Apr 25, 2023 in UI UX Design by Ashwini
• 5,430 points

1 answer to this question.

0 votes

First, you should aim to understand the project's goals and target audience. What are the main objectives of the website, and who are the users? You mention two user types, so you should consider their needs, motivations, and pain points. This information can inform the design decisions you make later on.

Next, you can create a site map or user flow diagram that outlines the different pages and how users navigate between them. This can help you identify the key pages and functionality that need to be prioritized.

Once you have a good understanding of the project requirements and user needs, you can start working on the actual design. You mentioned layout, styles, and user interactions, which are all important aspects to consider. You can also include guidelines for typography, imagery, and icons, as well as any animations or microinteractions that enhance the user experience.

Another important consideration is accessibility. You should ensure that the design is inclusive and accessible to users with disabilities, such as those who use screen readers or have visual impairments.

Finally, you can include any technical considerations, such as browser compatibility, responsive design, and performance optimization.

As for a process for UI design, there are many different methodologies out there, such as Design Thinking, Agile, and Lean UX. You may want to research these and see if any resonate with you and your team's workflow. Ultimately, the process should be flexible and adaptable to the project's needs and constraints.

I hope this helps give you a starting point for your UI/UX design document!

To know more about UI UX, It's recommended to join UI UX Design Course today

answered Apr 25, 2023 by Tej

Related Questions In UI UX Design

0 votes
1 answer

How to achieve this UI/UX design for an iOS UIButton object

From the image provided, it appears that ...READ MORE

answered Apr 25, 2023 in UI UX Design by seena
0 votes
1 answer

Need UI/UX Design layout name

The layout design that uses is ...READ MORE

answered Apr 25, 2023 in UI UX Design by pooja
0 votes
1 answer

UI/UX design or audit - how to measure the costs?

When it comes to charging for a ...READ MORE

answered Apr 25, 2023 in UI UX Design by Tej
0 votes
1 answer

Slack UI/UX design with collapsable columns

To replicate Slack's collapsible functionality using Split.js, ...READ MORE

answered Apr 25, 2023 in UI UX Design by pooja
0 votes
1 answer
0 votes
1 answer

Which is better normal desktop window or MDI like excel and chronos

How people interact with your system entirely ...READ MORE

answered Nov 4, 2022 in Others by narikkadan
• 63,700 points
0 votes
1 answer

UI/UX Design in Real Time Applications

When designing for real-time applications like those ...READ MORE

answered Apr 25, 2023 in UI UX Design by vinayak
0 votes
1 answer

Coding Photoshop UI/UX to fully working website?

To turn your Photoshop UI/UX design into ...READ MORE

answered Apr 25, 2023 in UI UX Design by Anitha
0 votes
1 answer

UI / UX designer tool with custom style

Yes, there are several UI/UX design tools ...READ MORE

answered Apr 25, 2023 in UI UX Design by seena
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP