编程代考 INFO 30005

INFO 30005
Web Information Technologies
UI mockups and

Copyright By PowCoder代写 加微信 powcoder

Group project
Design and build a web app
How to get started?
How to organize your process and team? Technology lifecycles

Software Development lifecycle
Build the right thing

What is SDLC? Phases of Software Development, Models, & Best Practices


Development Build the thing right

Design Thinking
https://dschool.stanford.edu/resources/get-started-with-design

Interaction Design
from Preece, J., Rogers, Y. & Sharp, H.
Interaction Design: Beyond human-computer interaction

Designing the User Interface
https://www.smashingmagazin e.com/2013/06/sketching-for- better-mobile-experiences/

Example: You’re designing an app …
You have been contracted to design and build an app called Food Buddy. The app helps people choose healthy foods that suit their nutritional goals and needs, and to keep track of what they eat over time. Much of the healthcare burden is due to chronic “lifestyle diseases”, so it is hoped that helping people to eat better will have a significant social impact.
The features fall into two groups: those that anyone can use, and those that only registered users can use.
Can be used without logging in
• Browse foods: scroll through hundreds of foods, or type into the search bar
• See details of one food: name, photo, description, nutritional data (calories, fat, protein, carbs, vitamins A to K,
sodium, calcium, iron per serving as % of daily recommendation)
• Set a food filter: click buttons to prefer or avoid particular kinds of foods
• Set goals: more/fewer calories, sugar, protein, fat,
Require login
• Enter profile details (name, gender, birth year, email, password)
• Set food filter permanently
• Set favourites: when looking at a detail page, click ‘heart’ button
• Track foods eaten: when looking at a detail page, click ‘I ate it” button
• Show lists, stats and charts based on ‘I ate it’ data over time

Rapid, low-fidelity paper prototype
wireframes user flows
annotations

Digital interactive prototype
UI / design
IxD / prototype
test and review
communicate with developer

Getting started with XD
install Adobe XD on your laptop (requires an Adobe ID)
install XD app on your phone limitations of free version
https://www.adobe.com/au/products/xd/pricing/individual.html

Getting started with XD
• artboards, drawing tools, zooming and panning
• images, masking
• aligning by grid or UI
• https://color.adobe.com/create/color-wheel
• UI kits and sticker sheets
• repeat grid
• transitioning between artboards
• preview on your computer and phone
• share for testing (or marking)

Resources for XD users
• data for repeat grids: https://www.repeatgrid.com/
• Icons: https://thenounproject.com/ https://material.io/resources/icons/
• Useful plugins: UI Faces, Photosplash, Confetti,
• Stock photos: https://unsplash.com/ https://www.pexels.com/ https://photos.icons8.com/
• Colour palettes: https://color.adobe.com/ https://www.colourlovers.com/palettes
• Font pairing: https://fontpair.co/ http://typ.io/
• Typographic systems: https://www.gridlover.net/try
• Font identifiers: https://www.myfonts.com/WhatTheFont/ (for image files) https://fontface.ninja/ (for web)
DESIGN INSPIRATION
• https://dribbble.com/ https://www.behance.net/
• https://helpx.adobe.com/xd/tutorials.html
• look on YouTube

Medium-fidelity mockup using XD

Software division of labour
UX designer
Design thinking
User research Competitor analysis Sketching, wireframing Lo-fidelity prototypes
UI designer
Detailed screen designs
Responsive design
Graphic design: type, colour, layout Hi-fidelity interactive prototypes Usability testing
Front-end: HTML, CSS, JS Back-end: software engineering Database design
Testing and feedback to designers Release to users
lofi mockups
hifi mockups

Wrapup: What has prototyping done for you?
• You can start making your web pages
• You know what requests your users will send
• You know what responses the server must make
• You can design your endpoints
• You know what data is needed for each screen
• You can design your database

程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com