Thu, Oct 19
Fonts, Forms and More
Today's objectives
Forms, and a bit of type
- Forms in HTML
- Styling forms with CSS
- Form processing
- Examples
- Order flow (e-commerce)
- Booking flow (airline)
- Visa
- Trusted traveller program
- JavaScript form validation
- Testing forms
- Prototyping forms
- Fonts - intro
Tasks
In-class practice.
Presentations
Forms intro
Forms-implementation and validation
Forms-design and styling
Fonts
Agenda
Examples
- Example: SCAT Airlines
- http://www.scat.kz/kz/
- Example: Apply for a visa
- https://www.visa.gov.tj/index.html#/apply
- Example: Buy a new shiny thing
- https://www.apple.com/ca/
- Example: Trusted Traveler Programs
- https://ttp.dhs.gov
Readings
- A good intro to simple form design.
- https://www.seerinteractive.com/blog/ux-checklist-series-form-design/
- Fundamentals of form design Required
- https://www.nngroup.com/articles/web-form-design/
Preparation
Samples
Here you will find any sample files you need for class.
Using Google Fonts
See the Pen Untitled by Robert Currie (@rcurrie) on CodePen.
Minimal form (HTML only)
See the Pen Super basic form by Robert Currie (@rcurrie) on CodePen.
Basic form elements (HTML only)
See the Pen Basic form by Robert Currie (@rcurrie) on CodePen.
Form with labels and action
See the Pen Form with labels and action by Robert Currie (@rcurrie) on CodePen.
Form with CSS
See the Pen Form with real action by Robert Currie (@rcurrie) on CodePen.
Tutorials
- A quick intro
- https://blog.logrocket.com/how-to-style-forms-with-css-a-beginners-guide/
- Styling forms
- https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
- Code examples
- https://codepen.io/collection/KuDsH?cursor=ZD0xJm89MSZwPTEmdj0zMQ==
- Your first form
- https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form
- Best practices
- https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/
Resources
- Getting started with form styles
- Basic CSS for forms.
- Fonts: what's in your browser?
- CSS Font Stacks
Tools
- Google fonts
- Free fonts hosted by Google you can use in your web site. You can also download the fonts and serve them from your server, for a higher level of privacy.
- Adobe TypeKit fonts
- You may have access to these, depending on your Adobe CC subscription details.
Assignment 06
Mobile version of Assignment 4
Using your Assignment 4 as a starting point, and incorporating any feedback, create a low-fidelity wireframe for amobile version targeting the iPhone 13 Mini in vertical orientation (there is a preset frame size for this). Focus on clarity, legibility and clear navigation. You can change any structure or presentations but must keep all the images and text. Pay attention to type size and make sure all type is legible. As a low-fi wireframe you do not have to deal with colour palettes or design details.
Test the site with the Figma iPhone or Android app.
Name the assignment "YOURLASTNAME-assignment-06" and share it with my NSCAD email account. Also, add a link to it from your main index page. <>/p>
Due Wed, Oct 18, 6:00 PM.
Professional practice
Start your own collection of links to good (and bad) forms and interface elements. Is there something that really works well? Or poorly? Did you have a good or bad experience? A collection of precedents is a vital part of every designer's toolbox.
Need help?
Contact me - Slack is best.