Thu, Oct 24
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/
Tasks for next class
Make sure to prepare for each online lecture. If you have questions about code, have your (non-working) code ready to share in class.
For next class:
- Install a Figma component library - your choice of Google Material Design or iOS
- Read the Wireframe Sketching and Design process: the "double diamond"
Samples
Here you will find any sample files you need for class.
Using Google Fonts
See the Pen Simple font test 2024 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.
Assignments 6 and 7
Plan and Format
Using the text and images provided, make a readable and attractive series of web pages. Start with a simple low-fidelity wireframe, and then create the site in HTML and CSS. You may add headings, navigation labels or captions. Make sure to read and understand the text before thinking about the structure of the site. You will need to do some formatting to the text to get proper lists, paragraphs, etc.
Validate your basic navigation scheme - how users will move around the web site - with a Figma wireframe first, share it with me + post a link to the wireframe (as Assignment 06) and a link to the site (as Assignment 07). Include headings and navigation labels in your wireframe. You may want to use placeholders for images, or the images themselves.
Next, build the site in CSS and HTML. You can have as many pages as you want, as long as you have a minimum of three pages. Use CSS for type, size and colour. Use all the text; you do not need to use all the images. You may need to resize the images (they are all big) and use the text (provided in a text file). Name the assignment folder "assignment-07" and add a link to it from your main index page. You may also use CSS positioning, or other HTML or CSS techniques as long as you understand them.
Focus on typographic hierarchy and navigation.
Before you begin, think about what the user of the site may be wanting to achieve. Test and validate carefully your wireframe. Design for a desktop computer (we will investigate mobile design later.)
Recommended techniques include:
- Web fonts
- Using a "container" div to center and set width of content (Example here)
- Semantic HTML framework
- A navigation system that uses a styled list
Download the assets for this assignment here.
Wed, Oct 30, 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.