Web Design

Misc

Resources
- Website Inspiration Catalog
- Web Accessibility Resources Thread
Tools
- 4 color formula
  - 2 for text and background (primary & secondary colors).
  - 1 accent color to highlight important elements (number 4 & buttons).
  - An optional tertiary color to add a bit of personality (the hue slider).
Try adding a color fill gradient (or just darker bottom border) to navbars; gradient should be darker at bottom and only get slightly lighter towards the top
- Example: {schwabr}
First-load under five seconds budget (guideline for non-highend mobile devices)
- JavaScript-heavy content: ~1.3MB, with 650KB of HTML, CSS, images, and fonts and 650KB of JavaScript
- Markup-centric stacks: 2.5MB, with 2.4MB of HTML, CSS, images, and fonts and 100KB of JavaScript.
- See hrbrmstr daily drop for more details on how developer tools can be used to analyze the size of webpages.
Using “Brand” to help choose font, palette, and imagery
- Notes from Erik Kennedy Video
- Brand is just adjectives to describe your business, organization, etc.
  - e.g. Trustworthy, Geeky, Casual, Precise, Fun, Technical, etc.
- Common Brands
  - “Neat, modern”, “Luxury, formal”, etc. are more of what I’d consider brand adjectives
  - “Clean & Simple”,“Fancy”, “Techie”, etc. are how I’d describe the sites that epitomize those brands, but they could also be brand descriptors
- Blending Brands
  - Shows names of company websites that most represent the brand/website types
  - e.g. The Apple website is a blend of Techie and Fancy.
Websites should be under 14kb (article)
- Most web servers TCP slow start algorithm starts by sending 10 TCP packets which works out to 14kb
404 pages
- Guidelines
  - be brief: the message on the 404 page should be straightforward and easy to understand, informing the user that the page they were trying to access is not available.
  - be contrite: the tone of the 404 page should be friendly and apologetic, acknowledging the user’s inconvenience and expressing empathy.
  - be helpful: provide links to other areas of the website or a search box that can help users find what they’re looking for quickly and easily.
  - be informative: include contact information, such as a feedback form, social media account, or email address to give users an alternative way to reach out to you for assistance.
  - be you: incorporate your brand’s visual identity, including logos and colors, to help reinforce brand recognition and create a cohesive user experience.
- Examples