Get an overview of designing and prototyping a website as well as an app.
- [Instructor] Now let's talk about transitioning from graphic design to UX/UI. So a lot of our traditional graphic design skills carry over. We need to understand the client, the strategy, all the content. Understand everything it takes to be a graphic designer, so fonts, colors, layout, traditional design principles, some creative thinking. And typically what you end up with is some branding, some graphic development of some kind.
That's all traditional graphic design skills. The end result would be like a logo, or some sort of branding guideline, print materials, a website. It's almost like a product that you're just giving to the client. Okay, what gets a little bit different moving forward. What skills are needed, quite frankly, to dive into UX and UI? Well for user experience design, it means we need to understand wireframing and prototyping, so no longer it is throwing a website design over a fence and wishing them the best, and maybe they come back in six months for a redesign, it's really that continuous wireframing and prototyping process.
Testing and iterating based on those results. So, it's more of a long term relationship that you have with the client to make the product successful. For user interface design, it's not only creating the visual assets, but applying those to the products interface as to best enhance the users experience. So our goal is not just to make something look pretty, but we're here to enhance the users experience. Whatever that may be.
Enter Adobe XD CC, the XD stands for experience design, but allows for you to design prototype and collaborate. So from within one interface we can design what we need to create all those pretty graphics, make sure it adheres to the branding guidelines that maybe we've developed, and then we'd prototype those. So linking those screens together and adding those transitions. But also we'd collaborate or share this with others.
Alright, so we might share this design with the client, maybe with an end user and get their feedback, but it's a continuous process, we can always update this prototype, and in the end, what you end up with is a design that's gonna be successful for the end user as well as the client, and what you end up giving the developer are all the graphics. So you're not necessarily programming a website in this case, but what you're doing is creating all the graphics and all the specs that the developer needs to move forward.
And this really is where XD's power lies. Allowing you the designer to design, prototype, and collaborate with others all within one interface.
- What is UX and UI design?
- Transitioning from graphic design to UX and UI
- What is Adobe XD?
- Creating graphics and text
- Adding images and effects
- Using Photoshop with Adobe XD
- Creating multiple screens
- Prototyping interactions and transitions
- Designing for different screen sizes
- Sharing design specs with developers