Thu, Oct 21
Fonts, Forms and More
Forms, and a bit of type
- Forms in HTML
- Styling forms with CSS
- Form processing
- Order flow (e-commerce)
- Booking flow (airline)
- Trusted traveller program
- Testing forms
- Prototyping forms
- Fonts - intro
- UX design with Adobe XD: Basics (for next week)
Forms-implementation and validation
Forms-design and styling
- Example: SCAT Airlines
- Example: Apply for a visa
- Example: Buy a new shiny thing
- Example: Trusted Traveler Programs
- A good intro to simple form design.
- Fundamentals of form design Required
Make sure Adobe XD is installed and working on your computer. For next class, please review https://www.adobe.com/ca/products/xd/learn/get-started-xd-design.html Required and https://www.adobe.com/ca/products/xd/learn/get-started-xd-prototype.html Required
Here you will find any sample files you need for class.
Using Google Fonts
Minimal form (HTML only)
Basic form elements (HTML only)
Form with labels and action
Form with CSS
- A quick intro
- Styling forms
- Code examples
- Your first form
- Best practices
- Getting started with form styles
- Basic CSS for forms.
- Fonts: what's in your browser?
- CSS Font Stacks
- 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.
Add a form
Using your Assignment 4 as a starting point, add a form to it. The idea is to collect data from web site visitors in order to help them plan their trip to Iceland. Focus on clarity, hierarchy and flow of interactions, and use of the best HTML form elements.
Here are the pieces of information you are to collect. Think about the order, labels, sizes, any default settings, what are required fields and what are optional, and any other aspects of the user experience.
Approach: Be an active designer. Research, think about the project from the user's perspective, and provide solutions to the best of your ability. There may be details of the design brief that are missing information or have not be 100% thought through. Respond to the intent of the request - to get information about web site visitors. Contact me (slack public channel messages are best) if you need clarification.
Add headings, instructions, or other element you think would be helpful. Make sure to use the appropriate form element for each field. Form validation is not required, but feel free to add if you wish to experiment. Add or alter fields if needed, but all the information noted below must be collected.
- How you will get there - fly or ferry?
- Reasons for visit:
- See puffins
- Volcano viewing
- Glacier hiking
- Spas and pools
- Pony riding
- Other (allow users to provide own answer )
- Country of origin
- How long a visit?
- When do you plan to visit?
- Email address
- Would you like to sign up for our e-newsletter?
- How do you expect to travel during your visit?
- Would you like a copy of our free printed vacation guide? (Note: if they do, you will need to capture their mailing address in the form, with each "chunk" of information as a separate field. Look at similar forms to see how they are structured.)
- Room for additional comments or questions.
What happens when people submit the form? For this assignment, use the following:
<form action="http://rcurrie.nscadlab.ca/form-processor.php" method="post">
Create a page that represents what they will see when the form is submitted. Call this file
Name the assignment folder "assignment-05" and add a link to it from your main index page.
Due Wed, Oct 27, 6:00 PM.
Late assignment penalties
For this assignment, late submissions will be penalized at 10% of the total mark (that is, if an assignment is graded out of 10, you will lose 1 point per day, starting on the due date.)
A 1-hour grace period after the assignment due time will be given to avoid any technical issues related to internet speed resulting in late assignment penalties.
The best approach, however, is to submit work early.
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.
Contact me - Slack is best.