Typographic processes
GDES-315 spring 2019 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources
“We believe that everyone has something to protect, whether it’s from the government or parents or prying employers, stalkers, data-mining corporations, or an abusive partner.” (From ssd.eff.org “About” page.)
The Electronic Frontier Foundation, or EFF, wrote the Surveillance Self-Defense microsite as an approachable and authoritative guide to security and online privacy.
Your task, for this first project, is to redesign the Surveillance Self-Defense site.
This project examines web typography in more depth, and introduces visual prototyping tools. It also lets you refresh and assess your HTML/CSS development skills, including Grid and Flexbox. We are not yet particularly concerned with understanding users and the contexts in which they encounter our sites; that will come later.
An especially iterative process
You’ve probably usually worked on websites on paper first, then moved to a drawing program, and finally built your design in HTML/CSS. You might have revised you design in the browser, a reasonable choice. For this project, we’re going to plan on a four-step process that lets your coding skills speak back to the design concepts:
Your design should include:
- The microsite home page
- Possibly, section landing pages or lists of articles
- At least two articles…
- …Including one of the “security scenarios” pages
The website should work well on desktop screens and on mobile browsers. Consider usability, readability, and accessibility.
1. Initial design
Start work on paper and in a graphical program, Figma. Explore font choice, colors, and image selection first, then settle on a type hierarchy. Turn to page layout as the last step. You’ll need to show mockups of your site for both mobile devices and desktop-sized screens.
Think about using one or two of the fonts I’m recommending for this class.
2. Move to HTML/CSS to build that design
Start with a blank copy of the basic site (ZIP).
3. Revisit your design ideas
Reflect on the HTML/CSS development process. What did the site look like in the browser? What happened on mobile devices? What worked well, and what did you find difficulty in achieving?
Return to your design and refine it, based on your experience building the site. If the design looked wrong in the browser, change it; if you couldn’t build your design in the browser, simplify.
4. Create the final design in code
Return to HTML and CSS. Be sure to check your site on mobile-device sized screens.
Watch permissions, and cite everything you borrow
As usual, any material that you use—including images, text, code—must be freely available, in the public domain, licensed for you to use, or of your own creation. Attribute all work in the readme.md file. (See the full citations and copyright policy.)
EFF offers the Surveillance Self-Defense site under a Creative Commons CC-BY license, so you are free to republish the content, so long as you provide attribution.