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
22-05-2021
Layout en animatie changelog
Breedte en positie changelog geanimeerd obv vw
In gsap zelfde positionering systematiek hanteren als in je stijlsheet, anders onverwachte effecten. Dus niet in stylesheet: left: 100vw, en dan in gsap x: 300.
1
Scrolling changelog layover fix codepen) met behulp van GSAP DrawSVG plugin
Bij layover niet handig om main content alleen opacity te geven omdat deze klikbaar blijft wanneer er geen DOM element overheen ligt.
2
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
1
27-03-2021
SVG animaties homepage
Geprobeerd svg animaties te implementeren in eleventy
Fail. Lijkt erop dat 11ty bij build svg opbouw veranderd. Wordt vervolgd.
2
'Scribbles' svg's geanimeerd codepen) met behulp van GSAP DrawSVG plugin
DrawSVG kan geen externe svg's animeren. Inline svg's kunnen niet gebruikt worden als background en dus niet als pseudo element.
2
Ontwerp scribbles homepage.
Kleuren zijn moeilijk.
1
22-03-2021
CSS Grid
Stylen changelog table gebruikmakend van CSS Grid
Positionering met CSS Grid.
2
Ontwerp changelog table.
Wat in ontwerp eenvoudig is, is in techniek soms moeilijk.
1
11-03-2021
Templating
Implementatie van nunjucks templates en partials voor footer, header, content en changelog.
Dat foutmeldingen in terminal een boel tijd besparen als je ze tenminste ziet. Hoe je zowel .md als .html bestanden kunt gebruiken als basis. Wat frontmatter is.
3
Verdiept in templating languages.
Hoe templating languages (in dit geval nunjucks en liquid) werken en hoe je een basisstructuur opzet.
1
25-02-2021
Motion!
Menu, cahngelog en links geanimeerd.
GSAP x:0 is not x:0 maar x:0 vanaf startpositie element in de DOM.
4
18-02-2021
Opzetten typografische basis
Implementatie fonts en styling responsive typografie.
Niets
2
Een 'Fluid typography' systeem opzetten. Tekst gewrongen en styling homepage.
Typografie laten schalen tussen breakpoints gebruikmakend van 'clamp' in css.
4
17-02-2021
Opzetten framework personal site
Eleventy opgezet als static site generator.
Hoe je je eleventy inricht mbv terminal.
4
Gitlab setup
Wat een SSH key is en waarom je deze nodig hebt. Hoe rechtstreeks te committen vanuit VS Code.
2