v0.01 — stardate

6 tips for giving useful feedback

As an Art-director, giving feedback on designs is an important part of my job. And at the same time, one of the most difficult aspects of it. Writer and speaker Scott Berkun wrote an article about this. Since everyone who works with a designer will have to deal with this sooner or later, I'm listing the highlights:

01.Ask questions first, shout something later

Have you been asked for feedback, but don't really know what the objectives are? Then it's quite a good idea to ask first. Unless you want your own personal preferences (taste) to be leading, and only people similar to you are going to use your product, of course 😀.

Protip: Ask "What are you trying to achieve here?" first.

02.Good / bad is not the same as beautiful / ugly

There is (unfortunately) no objective way yet to determine whether something is beautiful or ugly. Therefore, judge something on what it should do and not on what it looks like.

If you judge a fryer on its ability to play MP3s then there is a mismatch between what we are trying to achieve and how we judge it.

Scott Berkun

03.Get frameworks in place beforehand on which to judge something.

It helps enormously to think about the principles against which you can assess designs before starting a project. For example, you can define a Definition of Success, or set targets in the form of KPIs.

Example: At Pixelpillow, we always first define Design Principles at the beginning of a project, which provide guidance during the design process.

04.Point out not only what is wrong, but also what is already right.

We tend to focus on what is not working well. Pointing out what does work well makes it easier to determine what still needs to be done.

Talk as much about what is, as about what is not

Scott Berkun

05.Not all feedback makes things better

Be aware that changes made in response to your feedback can potentially make the product worse on other aspects.

Example: if the feedback is to strengthen the brand by making the logo bigger, the 'ordering' falls as a result

06.Be respectful

Assume that the other person has done their best and put a lot of time and energy into the design. Therefore, take your time in giving feedback and don't do it in a hurry in between. Also, giving feedback is not a competition in coming across as smart and critical. So always ask yourself: does my feedback make this design better?

Good criticism must be an act of respect: an act of communication with the intention of helping the other person do better work, or understand their work better.

Scott Berkun

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