Dave  Ewert  Dave  Ewert  

Wireframe Portfolio

Project 1: Recipe App

Project 2: Responsive Design

Project 3: Order Management

Portfolio Examples

Project 1: Recipe App - 1/4

3  

Project  -­‐  Mobile  Recipe  App:  Synthesized  and  improved  the  recipe  applica8on  designs  of  

Epicurious  and  Big  Oven  

Feature  Displayed:    Recipe  Page  for  ‘Savory  Chicken  Dinner’    

4  

Recipe  Search  Results  Page:  Sort  Recipe  results  aEer  clicking  a  8le  on  leE-­‐most  wireframe.    

Feature:  Recipe  results  sorted  by  Total  Time  or  Maximum  Calories  per  Serving  

App  Intro  Page:  Tiles  displayed  for  prebuilt  Recipe  search  results  e.g.,  ‘Italian  Dinners’  

Project 1: Recipe App - 2/4

5  

Feature:  Tool  menu  for  single  recipe  displayed  as  overlay  

Feature  (Alterna?ve):  Tool  menu  for  single  recipe  displayed  aEer  using  leE  swipe  ac8on  

Project 1: Recipe App - 3/4

6  

Feature:  In  the  top  sec8on,  the  Filter  BuQon  and  Search  Field  display  side  by  side  for  easier  use.  

Features:  Ac8vated  Filter  displayed  as  overlay  with  minimum  but  sufficient  filter  op8ons.  

Project 1: Recipe App - 4/4

7  

Project 2: Responsive Design - 1/3

Project  -­‐  Social  Services  Website:    Updated  exis8ng  website  design    

by  using  content  audit  and  compe88ve  analysis.    

Responsive  Design  Used  Responsive  Design  for  Mobile  (shown  leE),  tablet  and  desktop  formats.  See  following  examples.  

8  

Project 2: Responsive Design - 2/3

Format:  Tablet  

9  

Format:  Desktop  

Project 2: Responsive Design - 3/3

10  

Project  -­‐  Order  Management  Desktop  Applica?on:  Documented  custom  order  management  process  flows  and  func8onal  requirements.  Designed  user  interface  to  relate  detailed  func8ons  to  overall  business  process  context  

Project 3: Order Management – 1/4

Detail  Func?ons:  Order  Management  User  Interface  

11  

Project 3: Order Management – 2/4 The  Order  Summary  report  below  enables  a  Finance  Coordinator  to  view  all  orders  for  a  client.  To  navigate  to  this  page,  the  user  has  already  selected  the  ’Order  Management’  tab  high-­‐lighted  in  blue  font,  and  has  selected  'Client  A'  in  the  lighter  blue  box,  under  ‘Your  Clients’  on  the  far  leE  side.  Below,  the  user  has  sorted  the  rows  by  'Media  Type’,  the  second  column  from  the  leE  in  the  ‘Order  Summary’  table    

12  

Project 3: Order Management – 3/4

Detail  Func?ons:  Detail  of  Order  selected  near  the  boQom  of  the  previous  page  

13  

Project 3: Order Management – 4/4

Detail  Func?ons:  DraE  Invoice    Page  

When  the  user  selects  the  'DraE  Invoices  Tab’  high-­‐lighted  in  blue  font  below,  the  Invoice  Summary  table  appears  further  below  for  the  same  client  as  was  displayed  on  the  previous  Order  Management  pages.  The  black  box  in  the  flow  diagram  below  for  ‘DraE  Invoice  Management’,  provides  business  process  context.  In  the  table  further  below,  the  user  has  selected  the  leE-­‐most  column  heading  to  sort  the  rows  by  'Invoice  Number’.