2017/perweb

Personal Website Layouts was a session at IndieWeb Summit 2017.

Notes archived from: https://etherpad.indieweb.org/perweb
Video at: https://www.youtube.com/watch?v=AnleiM6ea_M

---

When: 2017-06-24 16:00

Participants

• Grant Richmond
• Jonathan LaCour
• Michelle JL
• dougbeal
• Martijn van der Ven (remote)
• John Allsopp
• gRegor Morrill
• Marty McGuire
• Sebastiaan Andeweg (remote)
• Chris Aldrich (remote)

Notes

It is a struggle to find functional pretty personal website designs. Particulary for indieweb websites

Suggested Sites

• eliseblaha.typepad.com
  • photography heavy
  • looks like CMS but isn't
  • archives are entirely by category
• brennannovak.com (down - looked at it via archive.org)
  • essay pages - black text on white background. good line-height/whitespace. good contrast on links.
• cleverdevil.io
  • homepage only shows long-form writing and photo posts
  • big background image, just for flavor
  • maps are the default from withknown - clean grayscale leaflet maps
• aaronparecki.com/2017/06/
  • calendar view w/ lots of icons. lots of moon icons that made people think of "coexist"
• seblog.nl/2017/06/
  • calendar view w/ icons. also shows reacji.
• grant.codes
  • splash page text anomation
  • lots of movement!
  • grant.codes/timeline - map on the background moves as you scroll back through the timeline! (http://owntracks.org for data, leaflet map updates as page scrolls to location embedded in post at the top of the view)
• andy-j-miller.com
  • cute text w/ hand-drawn appearance and subtle animation
  • full of super colorful images (he is an illustrator)
• http://www.adhamdannaway.com/
  • interesting split face header
• v4.jasonsantamaria.com
  • uniq designs for each post.
  • archive includes things like the main color for the post's design (e.g. "yellow")
  • also includes thumbnail screenshots of the articles
  • looks very like print design
• trentwalton.com
  • articles look a lot like medium.com
• kartikprabhu.com
  • lots of custom indentation and other whitespace manipulation
• http://www.nytimes.com/projects/2012/snow-fall/
  • super custom scrolling overrides, incl video backgrounds fading in and out
• https://www.bloomberg.com/businessweek/design-conference/
  • bloomberg was like "we get design. and we hate it. and you." (very tongue-in-cheek)
• archive page (I'm biase but like it :) https://gregorlove.com/archives/
  • archives by month, each day looks like a calendar box, but to 5 per row.
• http://hansbrinker.com/
  • very print-like block printing design
  • anomalily: side-to-side scrolling elements can be interesting on "my day" sites
• https://theoutline.com/

• http://ncase.me/fireflies/
• gRegor http://designbyproxy.com
• shauninman.com
  • links try to follow the cursor as you mouse over/out, then snap back.
  • also has an 8-bit archive shauninman.com/pact/
  • Screenshot of another landing page: https://www.flickr.com/photos/unmatchedstyle/4553686703
  • Shaun’s blog used to slowly change background colour over time. Screenshots:
    • https://www.flickr.com/photos/one1983/2296611196
    • https://www.flickr.com/photos/miesjel/3829608521
• keithjgrant.com
  • beautiful subtle animations in the menus
  • super neat text title effects (background shows through, some kind of blend mode)
• CSS text effects (semantic HTML + CSS - and some SVG - works in most browsers) https://codepen.io/collection/DamKJW/
• jimramsden.com
  • that landing animation, wooww.

aggregator: http://www.verynicesites.com/ <== basically this session in a nutshell

Jonathan: A lot of websites look very similar.

Animation (specifically use of gifs)?

• used to be a big part of the web

Let's end with zombo.com (or http://html5zombo.com/ )

Fun terrible UI design: http://www.creativebloq.com/inspiration/bad-volume-sliders-are-a-masterclass-in-terrible-ui-design

Which of these two websites are you designing: https://twitter.com/jongold/status/694591217523363840?lang=en

Good looking Podcast Pages

• responsivewebdesign.com/podcast/
• insertuser.nl
  • the player is crazy! bouncing text and floating links. moves the page around as you listen.
• geekouts.xyz
  • live scrolling and highlighting transcript as audio plays. also allows jumping playback by clicking on the text.

TODOs:

• https://hotlinewebring.club/ - looks like it's run by jkphl? we should ask him to make an indiewebring.club??

Photos