From the course: User Experience (UX) for Non-Designers

Stage three: Design - Adobe XD Tutorial

From the course: User Experience (UX) for Non-Designers

Start my 1-month free trial

Stage three: Design

“

- [Instructor] With research results driving the first glimmerings of the project, and the conceptualizing phase, laying out the skeleton of the project, with a focus on how people will use the app or the site, the next question that arises from the rudimentary paper prototypes user flows and other techniques is, what's this thing look like? For example, the user flow diagram illuminated the number of screens required and the paper prototype gave a rough idea of what a couple of screens would look like. What they didn't do was show where the stuff would go. They didn't show where the content will be placed. The images and artwork used, colors and type, and even how the user would get from here to there within the project. And this is where the design stage arrives. Though every one of you has a different way of doing things. At this point, there are some common stages in the evolution of the project from concept to interactive prototype. And it doesn't matter whether the project is aimed at smartphones, a website, tablets, or even a bunch of mediums. A common starting point is the wire frame. Which is nothing more than boxes and arrows drawn into a notebook, or two sheets of paper. Think of these graphic symbols as being the skeleton, or bones of the project. This is where a UI designer, or graphic designer, gets to work. Using boxes, squiggles, and other shapes, the placement of the content on each screen, or page, is determined. These renderings are circulated to the team and others involved for their input, and the primary tool for making any changes is an eraser or a new sheet of paper. When that phase is complete, the computer is flamed up to create what is usually referred to as a comprehensive design. This is a static design, and contains all of the pages or screens to be used. The images, icons, drawings, and text are laid into each of the screens, and suddenly the project comes to life. And again, the project is sent out for approval, and changes are made. The next phase is where the interactive prototype is created. The focus is strictly on interaction or how the user gets from here to there, and what the user has to tap, swipe, drag, or click to get from here to there. Once again, the project goes through a rigorous approval process, and once everyone signs on, the project is essentially ripped apart, and handed over to a developer to be coded up. Now you may encounter some terminology for these three phases. And the terminology inevitably involves the word fidelity. So let's figure out what these are. The wire frames are referred to as low fidelity, kind of makes sense. The static pages with content are referred to as medium fidelity or mid fi. And the final phase is usually referred to as high fidelity. To understand each of those terms, think back to the evolution of the TV. The black and white TV gave us a grainy low-fidelity grayscale picture. When color TV arrived, the picture became less grainy, and the characters in our shows, and the text on the screen became clearer. With the arrival of HD, or even 4K, things became more realistic. Finally, each phase of the design should not only be submitted to each member of the team, but it is also not unheard of That each phase is subjected to user testing before moving into the next phase of the design process. In fact, testing is the subject of the next section.

Contents