Table of contents

Child pages

UX / UI Websites

• Nielsen Norman Group
• WebDesign.org
• Web Designer Depot

Advice

Title (head)

• The format to use seems to be: specific → general

Examples

• Confluence: <Page title> - <Space title> - <Website company name?>
• Gmail: <Email name> - <Your email address> - Gmail
• Genius: <Artist name> – <Song title> | Genius Lyrics

Upgrade / 'Go Premium' / Pricing pages

• RescueTime
  • https://www.rescuetime.com/rescuetime-pro
  • I like the pictures showing the different features.
  • I like the features on different tabs.
  • I like the relatively short, organized descriptions of each feature.

Reset password

• Give the user a clue about what email address you're sending the reset link to.
  • Examples
    • Instagram gives you the first letter of your email address's username, the first letter of the domain, and (apparently) the number of characters in the username and the domain.
      • So, "hello@gmail.com" would be displayed as "h****@g****.com".

Which size units to use

• 2016.04.04 - Medium - Madhu - CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
• 2016.04.26 - Stack Overflow - What is best to use for this case (px, %, vw, wh or em)?

Screen resolutions to test

• https://www.w3schools.com/browsers/browsers_display.asp
• https://www.hobo-web.co.uk/best-screen-size/

Require as little input from the user as possible to provide the user with the desired output

• Rather than requiring a user to create an account, you could just track their browser.
  • http://stackoverflow.com/questions/3940179/detecting-a-unique-anonymous-user
  • http://samy.pl/evercookie/
• WhatsApp creates accounts solely based on the phone number of a user.

Using solid, strong colors to draw the user's attention

• Gmail → 
  • Notice how there are only two areas on the page where they use strong colors as the background: the 'Compose' button and the 'Search' button. And those are really the two most-common actions that a person would be expected to take (aside from reading the list of emails and clicking into one of them). It reminds me of how I would underline the key phrases in my resume to draw the reader's attention to them more quickly.
  • Contrast that with this: , where there are three elements with strong solid-color backgrounds. The selected-template doesn't even correspond to an action that the user would take from this screen, so it seems to go totally against what Gmail did. And I don't think users will be clicking 'Delete' so much that they'll benefit from having such a strong visual guide to that element. I think the 'Save' button makes sense; that seems like a button the users will be clicking a lot from this screen. I think it might also make sense to just have a single 'Add Template' button instead of several of them, and to make that element have a strong solid background.

Show how the user compares to other users as a gentle push

• LastPass → 
  • I like how it tells me how I stack up against other users.

Things that can make your website look like crap

Many times in the past I've had the frustrating experience of looking at a website I've created and saying to myself, "This looks like crap, but I don't know exactly why, and I don't know how to fix it."

• There may be too many colors
  • Look for every possible source of color and try to get rid of colors until you only have like 3 or 4.
    • Even small things like the borders on textareas and inputs, and the colors of buttons, will contribute to a general sense of "this doesn't look good" if they don't match the 3 or 4 colors you want to use.
• You're using standard fonts (Times New Roman, etc.).
• Needing to scroll down to find the main content of interest on a page.
  • Examples:
    • Yahoo Answers: 
      • I need to scroll down to find the answer on a particular page.
    • SENS.org
      • 

Design philosophies

Rich design

• ...

Flat design

• 2017.01.13 - UX Planet - Flat Design. History, Benefits and Practice.
• 2017.09.05 - The Register - It's official: Users navigate flat UI designs 22 per cent slower

Minimalist design

Examples

• http://www.azlyrics.com/
• https://www.craigslist.org

Brutalist design

Related websites

• BrutalistWebsites.com
• BrutalistFramework.com (Satire)
  • When thinking of brutalism, think CRUDE:
    • Cynically confrontational
    • Roughly raw and rugged
    • Uncomfortably ugly and unpolished
    • Deliberately daring and damaging
    • Extremely exasperated and embittered
• UX brutalism (Satire)
  • Forget seamless experiences. The Brutalist UX Framework™ creates rough edge moments that will make your users love you. A new type of experience based on neglect, and on user affinity caused by brutality.
  • The first (and only) step is to throw elements on the screen, without worrying too much about how they work together. Who are you to define hierarchy anyway? Let each element fight for the spotlight.

Articles / Videos

• Undated - Design Shack - Brutalism: A New Trend in Web Design
• 2016.05.09 - WashPo - The hottest trend in Web design is making intentionally ugly, difficult sites
• 2016.05.17 - Envato - It’s Tough Out There: A Look at Brutalism in Web Design
• 2016.05.29 - Boston Globe - Please don’t call the early Web ‘Brutalist’
  • Look around today’s Internet, especially its more design-conscious quarters, and you’ll find more than a few winking callbacks to this bygone era of blaringly basic Web 1.0 hypertext, complete with cheesy Shockwave effects, lame animated GIFs, quirky Javascripts, static layouts, and intentionally nightmarish navigation.
  • It’s a design phenomenon that’s lately received a fair share of attention through the curation of Pascal Deville, whose site Brutalist Websites archives some of the more adventurous recent realizations of the trend, but has also lent the wave a name that seems to be sticking.
  • I humbly submit that “Brutalism” misses the mark. (...) The original architects of the Web were building structures meant to embrace and showcase the freedoms granted by a powerful medium. In its early pages, the Web was experimental, unbound by guidelines or conventions, and marked by millions of hands making it into something – anything. It was certainly ugly, but it was never “brutal.” It was bold and brave (and sometimes blinking). It was heroic!
• 2016.06.05 - Vox - Brutalist architecture turns "ugly" into a design statement. Here's what that looks like on the internet.
• 2016.06.09 - Usabilla - The Curious Case of Web Brutalism
• 2016.08.25 - Web Designer Depot - The Rise and Rise of the Brutalist Design Trend
• 2017.01.03 - Envato - Brutalism: The ‘ugly’ web design trend taking over the internet
• 2017.05.31 - The Verge - This is what a brutalism world would look like on your phone (Satire?)
• 2017.07 - DesignLab - 5 Things Today’s Designers Can Learn From Brutalism
  • Do these sites have any meaningful affinity with Brutalism in architecture? We identified some key Brutalist features earlier in this article: repetitive, geometrical patterns; honesty about materials; social vision; and integrity of function. Certainly, some of the websites listed on Brutalist Websites have little about them that meet these criteria; in many cases, the aesthetic would better be described as postmodern, minimalist or grunge.
  • Some unfortunate misconceptions about Brutalism have found their way into some of the sites featured on Brutalist Websites. These include on the one hand an idea that Brutalism is intentionally “ugly”, or at least indifferent to its outward appearance; and on the other hand an idea that Brutalism is either all about concrete-gray, or about a random, anaesthetic use of color.

Website Designs I Like

• Letterhead Fonts - http://www.letterheadfonts.com/ - i like the art
• Saddleback Leather - http://www.saddlebackleather.com/ - i like the art
• SoundManager2 - http://www.schillmania.com/projects/soundmanager2/ - I really like how it gives you a bunch of cool stuff to try out on the front page, and even shows you how to use it.
• A Quora question asking for sites with good designs: http://www.quora.com/What-websites-are-admirable-for-their-good-design