Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aleksandra Ninković - Osnovni principi UI-a i ...

Avatar for Web Bootcamp Web Bootcamp
September 21, 2016

Aleksandra Ninković - Osnovni principi UI-a i UX-a

- Šta je UI
- UI standardi
- Šta je UX
- Istraživačke metode UX-a
- Styleguide
- Persone
- Wireframe
- Protototip

Avatar for Web Bootcamp

Web Bootcamp

September 21, 2016
Tweet

More Decks by Web Bootcamp

Other Decks in Education

Transcript

  1. ABOUT ME FILUM, University of Kragujevac 2008-2012 department of Graphic

    Design University of Wisconsin Eau Claire, USA 2010-2011 department of Graphic Design Women’s studies 2015-2016 Center for Women’s Studies, Belgrade work @Namics Belgrade as UI/UX Designer [email protected]
  2. TERMINOLOGY PERSONAS USER SCENARIOS USER STORIES USER FLOWS SITE MAPS

    WIREFRAMES PROTOTYPES MOODBOARDS DESIGN RESEARCH METHODOLOGIES REPRESENTATIONS CX USER CENTERED DESIGN FEEDBACK ON DESIGN MIND SCRIPTING TOOLS MEASUREMENTS RESPONSIVE RESOLUTIONS GOOGLE MATERIAL DEVICES UI ELEMENTS
  3. UI DESIGN User Interface (UI) Design focuses on anticipating what

    users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture. https://www.usability.gov/what-and-why/user-interface-design.html https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
  4. https://material.google.com/ DISABLED Flat Raised Flat Raised DISABLED NORMAL PRESSED DISABLED

    PRESSED NORMAL NORMAL PRESSED DISABLED PRESSED NORMAL Ali Connors Brunch this weekend? I’ll be in your neighborhood doing errands … Summer BBQ Wish I could come, but I’m out of town this … Oui oui Do you have any recommendations? Have … Birthday gift Have any ideas about what to get Heidi for … Recipe to try We should eat this: grated squash, corn and … Giants game Any interest in seeing the Giants play next … me, Scott, Jennifer Sandra Adams Trevor Hansen Britta Holt David Park 15 min 2 hr 6 hr 12 hr 18 hr 21 hr Inbox 12:30
  5. UX DESIGN User experience (UX) focuses on having a deep

    understanding of users, what they need, what they value, their abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services. https://www.usability.gov/what-and-why/user-experience.html https://www.usability.gov/what-and-why/visual-design.html
  6. PERSONAS The purpose of personas is to create reliable and

    realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics. Remember, your personas are only as good as the research behind them. https://www.usability.gov/how-to-and-tools/methods/personas.html
  7. STYLEGUIDE Style guides help maintain consistency throughout brands and all

    their digital and o ine entities. Because they are living documents, they provide enough structure without strangling creativity. A style guide is a comprehensive document that keeps track of all the repeating elements for a project, ranging from branding rules down to the amount of beveling for call-to-action buttons. Style guides also often reference rules and suggested practices, including dos and don’ts. On a more holistic level, they’re also a great place to state motives and missions statements for a company.
  8. USER FLOW For each scenario, this is a sketch of

    the paths users take through a product. It can bean actual map or just a simple line drawing that depicts the ways users navigate through a product. You can use any of the wireframing softwares available such as Axure, Sketch or Balsamiq to make these. Combined with task analysis, user flows give you a clear picture of how to create the easiest paths for users to complete goals.
  9. WIREFRAME A wireframe is a two-dimensional illustration of a page’s

    interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates. https://www.usability.gov/how-to-and-tools/methods/wireframing.html
  10. PROTOTYPE A prototype is a draft version of a product

    that allows you to explore your ideas and show the intention behind a feature or the overall design concept to users before investing time and money into development. A prototype can be anything from paper drawings (low-fidelity) to something that allows click-through of a few pieces of content to a fully functioning site (high-fidelity). https://www.usability.gov/how-to-and-tools/methods/prototyping.html