prototyping for fa's

What is

prototyping ?

an early, primitive version
of the software,
that will be iterated upon,
and that will be used to learn from 

WhY DO

prototyping ?

to understand how an application works,
how we can interact with it and
how it supports our tasks/goals.
It's a simulation of how the finished product will work

WhERE TO

START FROM ?

WhAT TOOLS

CAN WE USE ?

Different flavors

of prototypes

interactive vs. static prototypes

 

paper / low fidelity prototype

interactive prototype

html prototype

UI Kits make

your life easier

A user interface (UI) kit is a collection of visual elements, patterns and components that can help designers with the task of building UIs for their applications.

  • standardized interface / design consistency 
  • improve workflow (easier to change)
  • improve time efficiency
  • don't restrict creativity
  • platform related patterns
  • don't reinvent the wheel, learn from it

UI kits typically include those components that convey meaning and provide functionality to users – think buttons, widgets, checkboxes, progress bars, and navigation buttons. 

UI Kit

eLEMENTS

  • Buttons and switches
  • Input fields, radio buttons, and check-boxes
  • Navbars, drop-downs, breadcrumbs, and menus
  • Tooltips
  • Tabs and cards
  • Progress bars and sliders
  • Icons and glyphs
  • Headers and footers
  • Social media share buttons
  • Typographic options (fonts, headers, weights, etc.)
  • Color swatches
  • Widgets
  • User interactions
  • Modals and content areas

CHOICES

CHOICES

  • http://pencil.evolus.vn/
  • https://nathanielw.github.io/pencil-stencils/
  • https://www.figma.com/
  • https://docs.microsoft.com/en-us/windows/uwp/design/downloads/
  • https://freebiesui.com/figma-freebies/
  • https://projects.invisionapp.com/d/login
  • https://www.sublimetext.com/
  • https://cssauthor.com/bootstrap-templates/
  • https://colorlib.com/polygon/sufee/

Adobe XD is the all-in-one UX/UI solution for designing websites, mobile apps, and more. Design, prototype, share. All in XD.

GET TO KNOW

ADOBE XD

Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc.

 

ADOBE XD

INSTALLATIE

Adobe XD

Resources

Support & instructies: https://helpx.adobe.com/
Handboek: https://helpx.adobe.com/be_nl/xd/user-guide.html

Resources; UI kits & templates: https://www.xdguru.com/
XD resources from Adobe: https://www.adobe.com/
UI kits: https://spectrum.adobe.com/page/ui-kits/
Design plugins: https://flawlessapp.io/designplugins

Shortcuts: https://helpx.adobe.com/XDKeyboardshortcuts

Adobe

Experience

Design

canvas & artboards

concept of layers

basic tools

Start with a low fidelity design

UI KITS in ADOBE XD

xd Transitions

Contact me for anything UXD

Presentations, training,

but most of all projects ;-)

hendrik.mondelaers@realdolmen.com

HENDRIK  MONDELAERS

evelyne.wauters@realdolmen.com

EVELYNE  WAUTERS

let's get started !

RD_UXD_prototyping

By Hendrik Mondelaers

Made with Slides.com

RD_UXD_prototyping

Presentation for BAPM / acADDemICTs at Realdolmen

  • 453

More from Hendrik Mondelaers