v0.01 — stardate

The tension between reusable patterns and optimal usability

Sometimes it's difficult to strike the perfect balance between designing for optimal usability and creating reusable patterns that support that usability.

Why reusable patterns are great

Reusable patterns are an excellent way to save time and money. By building your design with the intent of reusing it, you can ensure that each new page or module has all of the elements it needs for consistent design. This will also help your team work more efficiently because they won't have to reinvent the wheel every time they build a new screen.

When reusable patterns miss the mark

If you overuse reusable patterns, or if they're too rigidly applied, users will struggle to find the information that they need because everything looks the same. It becomes harder for a user to distinguish the different 'jobs'. This makes it harder to remember the different kind of interactions en learn how to use the application.

A few guidelines for balancing usability and reusable patterns

  • If you're going to use a reusable pattern, make sure it fits the context and is appropriate for the user
  • Make sure the different types of interactions are easy to distinguish for the user.
  • Make sure the patterns are consistent with your brand. And sometimes this means that being distinctive is more important than being consistent.

Conclusion

Reusable patterns can be a great way to save time and effort in your design/development process, but they need to be balanced with the unique needs of the user. It's important not to use them too rigidly. Consistency is not a goal.

Captains log

Date
Done
Learned
Hr
03-10-2021
Scribble animations & home onload
Debugged scribble animations.
Isolating timelines makes debugging way faster.
2
Added home onload animation.
Trigger after assets load, not just DOMContentLoaded.
1
26-07-2021
Reader page
Connected Airtable API to new 'reader' page.
Airtable paginates results — need to handle the offset or you'll miss records.
3
Designed and styled the page.
Design with a fixed dataset first, hook up the API after.
2
24-07-2021
Maker page resize
Added onResize event to maker page so titles stay centered.
GSAP breaks CSS positioning.
1
05-07-2021
Date script
Wrote script to automatically display stardate and copyright date.
JS months are zero-indexed. Classic.
2
24-06-2021
Photo selection & title animations
Photo selection and editing.
Less photos, more impact.
2
Title animations.
Conflict between CSS positioning and GSAP is still tricky.
1
23-06-2021
Draggable photos
Made photos draggable.
Went easier than expected.
1
19-06-2021
ScrollTrigger & responsive styling
Implemented ScrollTrigger on maker page.
scrub ties animation progress to scroll position — good for parallax stuff.
3
Responsive fluid styling.
Fluid sizing + CSS custom properties = much less breakpoint juggling.
2
13-06-2021
Stylesheet structure
Refactored stylesheet structure using @import (postcss-import plugin).
Split files are so much easier to navigate than one giant CSS file.
1
Base styling for maker page.
Layout first, cosmetics later. Saves a lot of rework.
2
12-06-2021
CSS & layout refactor
Structured style.css by separating layout, typography and cosmetics.
Separation of concerns in CSS makes debugging way faster.
2
Updated layout content wrapper for more flexibility and added utility classes.
Keep utility classes single-purpose or they get unpredictable fast.
1
10-06-2021
PostCSS & Git
Configured PostCSS to compile all CSS files. Updated config in package.json and eleventy.js.
A glob (*.css) in the build command saves having to list every file manually.
2
Added mixin support to PostCSS via postcss-mixins.
Works like Sass mixins. No need to switch preprocessors.
1
Figured out how to stage files individually and make separate commits in Git.
Cleaner commits, less chaos in the history.
1
30-05-2021
GSAP tooling
Added GSAP code hinting and linting to VS Code.
Autocomplete for GSAP methods saves a surprising amount of time.
1
29-05-2021
Animation & positioning
Researched animation layout, positioning and performance. Did Codepen experiments.
Differences between animating left/top/right/bottom vs translateX/translateY, and how this translates to GSAP values.
3
22-05-2021
Changelog layout and animation
Animated changelog width and position based on vw.
Use the same positioning system in GSAP as in your stylesheet, otherwise unexpected effects. Don't set left: 100vw in CSS and then use x: 300 in GSAP.
1
Fixed scrolling changelog layover (codepen) using GSAP DrawSVG plugin.
Using only opacity for a layover is a bad idea — the element stays clickable when invisible. Always place an actual DOM element on top.
2
Designed homepage scribbles.
Colors are hard.
1
27-03-2021
SVG animations homepage
Attempted to implement SVG animations in Eleventy.
Failed. Eleventy appears to modify SVG markup during build. To be continued.
2
Animated 'scribbles' SVGs (codepen) using GSAP DrawSVG plugin.
DrawSVG cannot animate external SVGs. Inline SVGs cannot be used as CSS backgrounds or pseudo-elements.
2
Designed homepage scribbles.
Colors are hard.
1
22-03-2021
CSS Grid
Styled changelog table using CSS Grid.
CSS Grid positioning.
2
Designed changelog table.
What looks simple in design is sometimes hard in practice.
1
11-03-2021
Templating
Implemented Nunjucks templates and partials for footer, header, content and changelog.
Terminal error messages save a lot of time — if you actually read them. Both .md and .html files work as a base. What frontmatter is.
3
Researched templating languages.
How Nunjucks and Liquid work and how to set up a basic structure.
1
25-02-2021
Motion!
Animated menu, changelog and links.
GSAP x:0 is not absolute 0 — it's 0 from the element's starting position in the DOM. If CSS sets left: 100px, GSAP x:0 animates to 100px.
4
22-02-2021
Link animations & stagger
Animated Captain's log link.
How to remove an event listener using removeEventListener.
2
Added stagger animation to changelog.
GSAP stagger animates a list in sequence with barely any code.
1
18-02-2021
Setting up typographic foundation
Implemented fonts and styling for responsive typography.
Nothing new.
2
Set up a fluid typography system. Worked on homepage text and styling.
How to use clamp() to scale type fluidly between a min and max.
4
17-02-2021
Setting up personal site framework
Set up Eleventy as static site generator.
How to configure Eleventy using the terminal.
4
Gitlab setup.
What an SSH key is and why you need one. How to commit directly from VS Code.
2