Al PowerDesign, Development and Productivity2024-03-26T00:00:00Zhttps://www.alpower.com/Al Powerhello@alpower.comCreating an 11ty blog post using Raycast2024-03-26T00:00:00Zhttps://www.alpower.com/tutorials/creating-an-11ty-blog-post-using-raycast/<p>I've been loving using <a href="https://www.raycast.com/">Raycast</a> recently, and I wanted to see if I could speed up blog post file creation, given I used to create all posts initially using an Alfred workflow.</p>
<p>Raycast has the ability to trigger bash scripts on the local file system, so I figured I could use this to create a new post file.</p>
<p>A quick Google gave me the <a href="https://samwarnick.com/2023/3/creating-a-file-from-raycast">useful post and bash script example from Sam Warnick</a>.</p>
<p>Combining that with passing in bash params (<a href="https://www.raycast.com/blog/inputs-for-script-commands">raycast docs</a>)<br />
and I ended up with the following:</p>
<pre class="language-bash"><code class="language-bash"><span class="token shebang important">#!/bin/bash</span><br /><br /><span class="token comment"># Required parameters:</span><br /><span class="token comment"># @raycast.schemaVersion 1</span><br /><span class="token comment"># @raycast.title blog</span><br /><span class="token comment"># @raycast.mode compact</span><br /><br /><span class="token comment"># Optional parameters:</span><br /><span class="token comment"># @raycast.icon 🤖</span><br /><br /><span class="token comment"># Documentation:</span><br /><span class="token comment"># @raycast.description Create blog post</span><br /><span class="token comment"># @raycast.author alpower</span><br /><span class="token comment"># @raycast.authorURL https://raycast.com/alpower</span><br /><span class="token comment"># @raycast.argument1 { "type": "text", "placeholder": "title" }</span><br /><br /><span class="token assign-left variable">today</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span><span class="token function">date</span> +%Y-%m-%d<span class="token variable">)</span></span><br /><span class="token assign-left variable">publish</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span><span class="token function">date</span> <span class="token parameter variable">-v</span> +1H +<span class="token string">"%Y-%m-%d %H:00"</span><span class="token variable">)</span></span><br /><span class="token assign-left variable">filename</span><span class="token operator">=</span><span class="token string">"<span class="token variable">${1<span class="token operator">/</span><span class="token operator">/</span> <span class="token operator">/</span>-}</span>"</span><br /><span class="token assign-left variable">path</span><span class="token operator">=</span><span class="token string">"/Users/johnsmith/eleventy/src/blog/<span class="token variable">$today</span>-<span class="token variable">$filename</span>.md"</span><br /><span class="token assign-left variable">title</span><span class="token operator">=</span><span class="token string">"<span class="token variable">${1}</span>"</span><br /><br /><span class="token assign-left variable">template</span><span class="token operator">=</span><span class="token string">"---<br />title: <span class="token variable">$title</span><br />date: <span class="token variable">$today</span><br />permalink: blog/<span class="token variable">$filename</span>/index.html<br />tags:<br />summary:<br />---<br />written on <span class="token variable">$publish</span><br />"</span><br /><br /><span class="token builtin class-name">printf</span> -- <span class="token string">"<span class="token variable">$template</span>"</span> <span class="token operator">>></span> <span class="token string">"<span class="token variable">$path</span>"</span><br /><br /><span class="token function">open</span> <span class="token parameter variable">-a</span> <span class="token string">"Visual Studio Code"</span> <span class="token string">"<span class="token variable">$path</span>"</span></code></pre>
<h3 id="some-notes%3A" tabindex="-1">Some notes:</h3>
<ul>
<li>The <code>@raycast.title blog</code> is whatever command you want to trigger the script with.</li>
<li>The <code>filename</code> variable takes the query param title and hyphenates.</li>
<li>The <code>path</code> variable is whereever you store your blog entries on your local file system.</li>
<li>The publish variable is not needed - just added incase ever want to use today's date and time.</li>
<li><code>permalink</code> is because I want to start ordering my markdown with the date to find files faster, but not have the dates show in the URLs.</li>
<li>I added the date in as YAML frontmatter as I use it in my listing code - this is optional if you include it in your filename.</li>
<li>The final open command can be any application you want on your Mac that edits text files - I also tried this with iA Writer and it worked fine.</li>
</ul>
<h3 id="usage" tabindex="-1">Usage</h3>
<p>Trigger Raycast. Type <code>blog</code> and tab to the title field. Enter a title like <code>my test post</code> gives you a file with a filename of <code>YYYY-MM-DD-my-test-post.md</code></p>
<h3 id="%2Ftodo-still-needed" tabindex="-1">/TODO Still needed</h3>
<p>It's not perfect by any means - I still need to solve escaping single quotes in the title and also lowercasing the file name, but it's a good start to get me blogging faster!</p>
A quest to shoot better portraits2024-03-26T00:00:00Zhttps://www.alpower.com/blog/a-quest-to-shoot-better-portraits/<p>I'm saddened by the fact that I haven't picked up my camera in months - I was just starting to go out and shoot some street portraits semi-regularly but life got in the way.</p>
<p>However I'm feeling inspired by this interview from the always wonderful Sean Tucker with portrait photographer Phil Sharp (Phil's <a href="https://www.philsharp-photo.com/">website</a> + <a href="https://www.instagram.com/philsharp/">instagram</a>).</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/YG_rD3KcLx8?si=tsyo4J6PoICFhdoO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
<p>Hearing these conversations makes me really think about how I interact with people, and also how and where I shoot them.</p>
<h3 id="some-of-my-recent-portraits" tabindex="-1">Some of my recent portraits</h3>
<p>Some of my current photos are up on <a href="https://alpower.co.uk/">https://alpower.co.uk/</a> but I'm reviewing both where I share and store my photos, as well as the editing process.</p>
<figure><a href="https://alpower.co.uk/"><img src="https://www.alpower.com/img/blog/posts/2024-03-26-portraits.jpg" alt="Some of my portraits" /></a><figcaption>some of my portraits up on <a href="https://alpower.co.uk/">https://alpower.co.uk/</a></figcaption></figure>
<p>It's so nice having these brief moments of interactions with strangers, and sometimes sharing photos with them afterwards.</p>
<p>Of course not everyone wants their photo taken, which is totally fine, but I've had comments back from people saying that my photos have really helped boost their self-confidence and willingness to have their photo taken, which is really gratifying.</p>
<p>Like any hobby you need to dedicate time to it - I really just need to stop faffing and <strong>get out and shoot a lot more portraits</strong> - it's the only way to get better.</p>
Case study: Designing a better editing experience for Prezly2023-01-21T00:00:00Zhttps://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/<h2 id="introduction" tabindex="-1">Introduction</h2>
<p>This is a high-level summary of a project I did product design for in October 2022, how we approached it, what happened, the outcome and some things I learned.</p>
<p>At Prezly, we are now using <a href="https://basecamp.com/shapeup">Shape Up</a> (a product methodology created by the 37 Signals folks) and this was our first 6-week project since starting this way of working, which was both exciting and scary.</p>
<h2 id="the-problem" tabindex="-1">The problem</h2>
<p>When I joined the team at Prezly in June 2022, one of the key challenges I was given was to help redesign the story editing experience.</p>
<p>This was one of the things that attracted me to Prezly - <a href="https://www.lifelog.be/about">Gijs</a> (one of the founders) <a href="https://www.lifelog.be/category/product-management">blogs openly about building products</a> and <a href="https://www.lifelog.be/redesigning-the-writing--publishing-experience-tcdet7">wrote about the challenges redesigning the writing and publishing experience</a> (so refreshing to see!) and I could immediately see how I could contribute with my skillset.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-challenges.png" alt="Editor Challenges" /><figcaption>The details aren't important, but there were lots of things to address identified by Gijs in his original post, in layout and clarity</figcaption></figure>
<p>The core editor itself is a solid experience (<a href="https://github.com/prezly/slate">built on top of SlateJS</a>), but (as happens organically with a lot of software) the surrounding user interface had had features added over time and wasn't laid out optimally.</p>
<p>Things that struck me:</p>
<ul>
<li>a lot of controls were visible all at once.</li>
<li>Some labelling was unclear.</li>
<li>Publish settings were in several places.</li>
<li>It wasn't always clear what publish settings were set, or whether a story had been shared or not.</li>
<li>Some things (like translations) were hidden behind menus.</li>
<li>Some controls had multiple functions which weren't at all clear.</li>
</ul>
<blockquote>
<p>The time it takes to make a decision increases with the number and complexity of choices - <strong>Hicks's Law</strong> <sup class="footnote-ref"><a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fn1" id="fnref1">[1]</a></sup></p>
</blockquote>
<p>Even though it wasn't complex, I found it a bit overwhelming and wanted to simplify things.</p>
<h2 id="the-challenges" tabindex="-1">The challenges</h2>
<p>Things I had to consider:</p>
<ul>
<li><strong>Improve clarity and usability</strong> - address all the identified problems with the newsroom picker, sub-navigation, hidden links, and settings spread all over the place.</li>
<li><strong>Try not to alienate existing users</strong> - we already had a large user base who were familiar with the tool.</li>
<li><strong>Consider both solo users and enterprise teams</strong> - it had to cater for users on smaller plans, and scale up to large teams with lots of features.</li>
<li><strong>Be somewhat future proof 😅</strong> - there was a big list of new features that we wanted to add to the editor, but the existing UI didn't really have the real estate needed. Whatever I came up with had to have growing room.</li>
<li><strong>Be more responsive</strong> - the previous editor was desktop first and didn't work well on smaller screens or browser windows. User interviews told us people often had multiple windows open to copy content into the editor.</li>
<li><strong>Allow for a more focused editing experience</strong> - sometimes people just want to write without distraction! I love things like iAWriter with their focus modes - could something like this be incorporated? Could this help the design work on smaller screens? (Spoiler: yes! It could).</li>
</ul>
<h2 id="my-process" tabindex="-1">My process</h2>
<h3 id="get-to-know-the-problem-space-really-well" tabindex="-1">Get to know the problem space really well</h3>
<p>This is a bit of a cheat as wasn't within the 6 weeks of the project, but coming in new to the story editor, I knew I had only a few months to use it before this project would land.</p>
<p>I used it as much as I could writing up project reports in it and doing presentations using it, getting as much time to familiarise myself with the edges of it.</p>
<h3 id="observe-users-as-much-as-you-can" tabindex="-1">Observe users as much as you can</h3>
<p>I interviewed users and observed them using the editor. Using a suite of analytics tools (Mixpanel, FullStory) alongside personal observation, I mapped out what users used the most, and the least, where they seemed to fly, and where they got stuck.</p>
<p>As designers, we also have rotating days working with the support team, which really helped, both from the understanding and the empathy front when talking to real users about challenges they had.</p>
<h3 id="run-%22customer-empathy-sessions%22-with-new-staff" tabindex="-1">Run "Customer Empathy Sessions" with new staff</h3>
<p>We have a practice here of running all new staff through "Customer Empathy Sessions" <sup class="footnote-ref"><a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fn2" id="fnref2">[2]</a></sup> - scenarios where we set a task and ask new staff to role-play customers performing those tasks. We record these and have a mix of designers and developers watch and take notes, and debrief at the end.</p>
<p>As I knew I'd have to tackle this project eventually, I got involved and ran as many of these as possible. It's incredible what you can learn viewed through a fresh pair of eyes, especially when you aren't allowed to talk during the session.</p>
<p class="tip">
Check out Customer Empathy Sessions! Even running the same session over with different people surfaces new things every time.
</p>
<h3 id="consider-new-users-and-the-beginner's-mindset" tabindex="-1">Consider new users and the beginner's mindset</h3>
<p>It's really hard to design a product when you are super familiar with it, and I had to keep questioning my assumptions, and coming back to a "beginner's mindset", thinking about what guidance we could give a new user when they first come to the editor, with good empty states and sensible defaults.</p>
<p>I'd made copious notes/run a UX audit even before I started the job, so I referred to past-me - as a new user to it myself what did I think?</p>
<p class="tip">
Test with fresh users: I showed the editor (and my new designs eventually) to people who had never seen it for general comprehension.
</p>
<h3 id="get-feedback-early-and-stay-humble" tabindex="-1">Get feedback early and stay humble</h3>
<p>I'd fixed some of the basic UX and clarity issues and got early designs in front of colleagues as fast as I could in a rough state.</p>
<p>This was probably the best thing I could have done, as issues with early designs were identified, and I was able to course-correct fast.</p>
<p>If I'd sat on them until I thought they were perfect, I would have run out of time and been working on the wrong thing.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesigned-rejected.jpg" alt="Rejected ideas" /><figcaption>2/lots of rejected ideas</figcaption></figure>
<p class="tip">
Remember: you are not your designs - if they don't work, and you find out early, you can fix them! Early constructive criticism is good - it's not personal.
</p>
<h3 id="prototype-in-high-fidelity-and-test-with-users" tabindex="-1">Prototype in high fidelity and test with users</h3>
<p>We are in a golden age of design tools - no longer do we have to sweat for days pushing pixels in Photoshop when we have modular component-based systems like Figma.</p>
<p>I walked through lots of scenarios - a new empty story, and an existing story for both basic and advanced users, but only tested external users on the things I was really unsure about.</p>
<p>Save your customers time for the valuable stuff - there's a lot you can do with internal 'guerilla' testing.</p>
<p>Build rich prototypes and test with users as if it's the real thing.</p>
<p class="tip">
When testing, don't drop users into a screen without context - even a precursor screenshot can help set the scene - in reality, they would have always started somewhere.
</p>
<h3 id="iterate-lots-fast" tabindex="-1">Iterate lots fast</h3>
<p>Try lots of different ideas (divergent thinking), and get them in front of others - and throw out things fast. Explore in low fidelity before narrowing down (convergent thinking)<sup class="footnote-ref"><a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fn3" id="fnref3">[3]</a></sup>.</p>
<p>Sometimes wireframes aren't good enough for comprehension when talking to real users (but might be good enough for internal users).</p>
<p class="tip">
It doesn't have to be perfect at the idea stage, but good enough for people to understand it.
</p>
<h2 id="design-guidelines%2Fprinciples" tabindex="-1">Design guidelines/principles</h2>
<h3 id="come-up-with-a-set-of-design-principles-to-guide-decisions" tabindex="-1">Come up with a set of design principles to guide decisions</h3>
<p>Having identified some of the usability issues, I didn't want to make the same mistakes again.</p>
<p>I wrote up a set of design principles which I pinned on the wall above my monitor. These touched on things like clarity, simplicity, good way-finding, having a clear call to action and good defaults.</p>
<p class="tip">
Set principles - you don't always work at peak brain, so it's nice to have things to look to when you get stuck.
</p>
<h3 id="build-on-work-that-has-come-before" tabindex="-1">Build on work that has come before</h3>
<p>I was coming in cold to a situation that had been explored before by previous designers - there were lots of Figma/FigJam files to review and past discussions in Linear (the benefit of a remote-first company - a lot of discussions are all in writing!).</p>
<p>First I had to review existing attempts at redesign with an open mind (there were lots of good ideas), figure out what the impasses were, and take the good stuff while leaving things that didn't work - panning for gold somewhat.</p>
<p>Luckily my aforementioned design principles came in handy - then it became less about opinion vs opinion, and more about objectives.</p>
<p>Interviewing people involved prior also helped, and active listening without forming opinions immediately was key, and asking good open interview questions helped.</p>
<p class="tip">
<a href="https://www.alpower.com/blog/user-research-interview-question-tips/">Practice good interview techniques</a>: Be curious. Also shut up and listen.
</p>
<h3 id="look-to-other-products-for-inspiration" tabindex="-1">Look to other products for inspiration</h3>
<p>What do other editors/complex apps with lots of settings do? What lessons could I learn?</p>
<p>I reviewed WordPress, Ghost, Notion, Linear, and Gmail and took a lot of screenshots. A lot were quite complex and overwhelming.</p>
<p>What other design patterns are out there for complex app interfaces? After all, <a href="https://www.everythingisaremix.info/">everything is a remix</a>.</p>
<p>I <a href="https://cushionapp.com/journal/nested-modal-drawers-with-parallax">loved Jonnie Hallman's idea of a nested / stacked drawer system</a>, and I wanted to see if we could use that idea to layer content.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesign-nested-hallman.png" alt="CushionApp's nested drawer idea" /><figcaption>Inspiration: Johnnie Hallman's nested drawer prototype</figcaption></figure>
<p>This ended up working well, and I might write a separate post on this.</p>
<h3 id="use-existing-patterns" tabindex="-1">Use existing patterns</h3>
<p>By leveraging existing mental models, we can create superior user experiences in which the users can focus on their tasks rather than on learning new models.</p>
<blockquote>
<p>Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.<br />
<a href="https://lawsofux.com/jakobs-law/">Laws of UX</a></p>
</blockquote>
<p class="tip">
Be inspired but don't copy - every platform has its own challenges, and has different user needs - it's not one size fits all.
</p>
<h3 id="allow-designs-to-breathe---reduce-the-amount-of-lines-and-boxes" tabindex="-1">Allow designs to breathe - reduce the amount of lines and boxes</h3>
<p>I find you can do a lot with relative contrast, weight and text colour, and aligning things carefully instead of using lots of containing boxes always makes designs feel cleaner.</p>
<p>If you are designing around user content, check the longest possible lengths of things, and ensure these are handled OK - test the boundaries of things.</p>
<p>Step back and squint at your designs - can you see what the clear calls to action are?</p>
<h3 id="signpost-things" tabindex="-1">Signpost things</h3>
<p>Set the scene - what do people need to know before they do anything? Ensure you have suitable way-finding (breadcrumbs, page titles etc) so that if users land on a page they know where they are.</p>
<h3 id="group-related-tasks---get-the-information-architecture-right" tabindex="-1">Group related tasks - get the information architecture right</h3>
<p>Tasks that people could perform loosely could be grouped into three buckets:</p>
<ul>
<li>Things that changed the state of the story (publishing, scheduling).</li>
<li>Things that changed settings of the story (metadata, social sharing info).</li>
<li>Things that did something with the story that took users out of the editor (duplicating a story, deleting a story, translating a story).</li>
</ul>
<p>I found that grouping these logically helped me design with clarity, required less labelling, and made more sense to users.</p>
<h3 id="support-icons-with-text" tabindex="-1">Support icons with text</h3>
<p>Avoid using only icons in your designs unless you are 100% sure people know what they are - test them.</p>
<h3 id="keep-users-informed" tabindex="-1">Keep users informed</h3>
<p>Keeping the user informed when they perform an action - always follow up with some indicator so they know something has been saved.</p>
<p>Don't make things scary - highlight the consequences of dangerous actions before users do them and allow users to back out of things where possible. Someone has accidentally published a story? Let them unpublish easily.</p>
<h2 id="how-we-delivered-it" tabindex="-1">How we delivered it</h2>
<h3 id="break-it-into-smaller-deliverables" tabindex="-1">Break it into smaller deliverables</h3>
<p>If you can, try not to do all the things at once.</p>
<p>Before we started the project, I identified small pieces of work that could be done in isolation that would make the project easier and worked on them ahead of time.</p>
<p class="tip">
If there are smaller things you can break off and ship separately, do them to avoid shipping in a big bang at the end.
</p>
<h3 id="avoid-big-design-up-front" tabindex="-1">Avoid Big-Design-Up-Front</h3>
<p>This isn't Waterfall Development. Try to avoid 'solutionising' and getting things perfect - it's a collaborative and explorative process that you will have no idea about a lot of at the start. Trust the process.</p>
<h3 id="agree-to-disagree-and-commit-regardless" tabindex="-1">Agree to disagree and commit regardless</h3>
<p>Ever got to an impasse on a decision that went round and round in circles? It happens often in software projects.</p>
<p>I was lucky to be working with some amazing developers and content writers that I trusted, who had worked with me before and all had a good sense of UX and Design.</p>
<p>They pushed back when they disagreed with something I'd done, but were happy to disagree and commit on occasion when we need to prove something in the browser/test with users.</p>
<p>I was also wrong on more than one occasion. <em>Hears people gasp audibly</em> 😅</p>
<p class="tip">
Pick your battles - you have a certain amount of credit, and sometimes letting go of things is the right thing to do and keeps the project moving.
</p><p>
</p><h3 id="work-to-a-fixed-time-with-variable-scope" tabindex="-1">Work to a fixed time with variable scope</h3>
<p>One of the challenges/benefits of working with Shape up is you are timeboxed - there are no estimates, you just try and build and ship what you think you can within the time allocated.</p>
<p>As a result, you can't always achieve all the things you want, so have to let go of a lot of nice-to-haves.</p>
<p>Ask yourself - if we do this extra thing will we run over, or can we ship a great core experience without it? Focus on the important stuff and simplify where you can.</p>
<blockquote>
<p>Make a kick-ass half rather than a half-assed whole<br />
<em>Jason Fried</em></p>
</blockquote>
<h3 id="deliver-fully-working-things-end-to-end---scope-out-the-work-upfront" tabindex="-1">Deliver fully working things end-to-end - scope out the work upfront</h3>
<p>There's no point doing the front end first and the backend last - you will always run into problems.</p>
<p>Zoom out and map the project into scopes with your team when you start - divide it up:</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesigned-scopes.png" alt="Scopes - courtesy of Shape Up" /><figcaption>How to divide a project into scopes (from the Shape Up Handbook)</figcaption></figure>
<blockquote>
<p>Scopes reflect the meaningful parts of the problem that can be completed independently and in a short period of time — a few days or less. They are bigger than tasks but much smaller than the overall project.<br />
<em>Shape Up - Chapter 12 - <a href="https://basecamp.com/shapeup/3.3-chapter-12">Map the Scopes</a></em></p>
</blockquote>
<p>Map out tasks logically from the users' perspective, and work on an end-to-end slice - get things working in a browser as fast as you can!</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesigned-slices.png" alt="Slices - courtesy of Shape Up" /><figcaption>How to work on project slices (from the Shape Up Handbook)</figcaption></figure>
<p>Design in Figma, but decide in the browser, where you can see realistic interactions and your results at all screen sizes. Design isn't complete until something is working for real in a web browser.</p>
<p class="tip">
Designers: Divide all the things in your project into things that could function on their own, then design just enough to unblock developers. Even a sketch can be enough to get going with design polish later.
</p>
<h2 id="the-results" tabindex="-1">The results</h2>
<p>A simpler-to-use user interface with a better information architecture and clearer signposts that tested well with users, who were able to complete tasks easier than before.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesigned-1.jpg" alt="Editor redesign" /><figcaption>Final design</figcaption></figure>
<p>Through a careful reorganisation, and moving some things that didn't need to be used all the time down a level using progressive disclosure, we allowed users to focus on what they needed to do most of the time (edit stories) and deprioritised the things they did occasionally, while still making them obvious.</p>
<p>We made a much better responsive editing experience through the use of a responsive side panel.</p>
<h3 id="responsive-challenges" tabindex="-1">Responsive challenges</h3>
<p>The responsive nature was one of the hardest things to get right, as the app is 'desktop first' from our analytics, but we wanted to make it usable down to smaller screens.</p>
<p>We had a sticky header that hid the top nav but kept the action bar in place. Combine that with 2 levels of the collapsible nested sidebar, the first level which is shown inline on desktop, stacking contexts get complicated fast! Thankfully Ivan, one of the developers on the project was a complete front end wizard. 🪄</p>
<p>I could see some users had super wide screens, and some were on laptops. Some used multiple windows side by side, and cut and paste a lot of content in. Gone are the days of fixed breakpoints - we had to make the experience as fluid as possible.</p>
<p>Users often had long articles they needed to scroll, so keeping the top header sticky with publishing controls at hand was important, alongside sidebar options.</p>
<h5 id="responsive-demo-(view-in-browser-for-best-experience)" tabindex="-1">Responsive demo (view in browser for best experience)</h5>
<div id="responsive-demo">
<div id="responsive-demo-controls">
<fieldset>
<legend>Change screen size 👩💻</legend>
<input type="radio" name="size" value="sm" id="sm" />
<label for="sm">Small</label>
<input type="radio" name="size" value="md" id="md" checked="" />
<label for="md">Medium</label>
<input type="radio" name="size" value="lg" id="lg" />
<label for="lg">Large</label>
</fieldset>
<fieldset>
<legend>Change state 🎚️</legend>
<input type="radio" name="state" value="default" id="default" checked="" />
<label for="default">sidepanel (default)</label>
<input type="radio" name="state" value="menu" id="menu" />
<label for="menu">sidepanel (nested)</label>
<input type="radio" name="state" value="focus" id="focus" />
<label for="focus">Editor only</label>
<input type="radio" name="state" value="scrolled" id="scrolled" />
<label for="scrolled">Scrolled</label>
</fieldset>
</div>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-slides/editor-md-default.jpg" alt="Editor redesign" id="demo-img" /><figcaption id="demo-caption">play with the options to see how the layout changes!</figcaption></figure>
</div>
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-sm-default.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-md-default.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-lg-default.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-sm-menu.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-md-menu.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-lg-menu.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-sm-focus.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-md-focus.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-lg-focus.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-sm-scrolled.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-md-scrolled.jpg" />
<link rel="prefetch" href="https://www.alpower.com/img/blog/posts/editor-slides/editor-lg-scrolled.jpg" />
<p class="tip">
Don't just design to bootstrap breakpoints. Look at your analytics and what your users use most, and cater to that. Think about really wide screens, and smaller ones, and the spaces in-between. Try on touch devices and different platforms.</p>
<h3 id="a-separate-publishing-workflow" tabindex="-1">A separate publishing workflow</h3>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesigned-publish.png" alt="Publishing workflow" /><figcaption>Publishing and it's related options were moved into it's own modal, showing only when the user needed them</figcaption></figure>
<p>Publishing was moved into its own workflow (which we've simplified even more since). Why make people choose a date until they are ready to publish?</p>
<p>This is "<em>The Principle of Least Effort</em>" - people take the path requiring the least amount of mental and physical energy to complete a task, so the more you can chunk things together and only show them when they are needed, the easier it will be.</p>
<h3 id="a-clear-overview-section-with-settings-cards-and-calls-to-action" tabindex="-1">A clear overview section with settings cards and calls to action</h3>
<p>Analytics and Stats were moved up a level to the sidebar for clarity, and a new overview section was created.</p>
<p>Showing the key information in a grid helped with scannability, and giving everything a label helped with clarity. I considered going without labels for the overview to save space, but given English isn't the primary language for a lot of users, I opted for clarity (again referring to my previously set principles).</p>
<p>I scheduled user testing over some time, so I could incorporate feedback as I learned things, asking open questions to dig deeper into people's understanding and ways of working and usually found something from each session that could be tweaked.</p>
<p>The whole sidebar was polished as best as I could to look good - the more aesthetically pleasing a design, the more usable it's considered (<em>The Aesthetic-Usability Effect</em> <sup class="footnote-ref"><a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fn4" id="fnref4">[4]</a></sup>).</p>
<p>We decided to deemphasise the sidebar from white to grey to sit a little further back and let the editor stand out.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/editor-redesigned-sidebar.png" alt="Side panel details" /><figcaption>side panel details - overview, calls to action and drill-down settings cards</figcaption></figure>
<p>This was a designed as a platform to build on for the future: since shipping this the product team's added things like further SEO settings, clearer language options, better breadcrumbs, an ability to pin stories to one's homepage and more, all of which the new UI has happily catered for with room to spare.</p>
<h5 id="before%2Fafter-demo-(view-in-browser-for-best-experience)" tabindex="-1">Before/After demo (view in browser for best experience)</h5>
<div id="before-after-slider">
<div id="before-image">
<img src="https://www.alpower.com/img/blog/posts/editor-redesigned-before.jpg" alt="before" class="slider-img" />
</div>
<div id="after-image">
<img src="https://www.alpower.com/img/blog/posts/editor-redesigned-after.jpg" alt="After" class="slider-img" />
</div>
<div id="resizer"></div>
</div>
<figure>
<figcaption>Editor controls - before and after</figcaption>
</figure>
<h3 id="things-i'd-do-differently-next-time" tabindex="-1">Things I'd do differently next time</h3>
<p>Solve the hardest problem first. We left the responsive navigation part of the project towards the end, and this stopped us from releasing early, and it weighed on me.</p>
<p>Some things can't be broken up, but I'd have liked to at least ship something testable internally faster.</p>
<p>Ensure we had some of the key editor tasks smoke-tested using automated testing - even if throwaway tests - this would have saved a lot of last-minute bug fixes I think. The dev team have since rolled out some end-to-end testing which is already identifying small edge cases to fix.</p>
<h2 id="in-conclusion" tabindex="-1">In conclusion</h2>
<p>Overall I was really happy with how this project went - there's always room for improvement of course, and a SaaS product is never 'done', but I'm already looking forward to how we can build and improve on this foundation we've laid.</p>
<p>In the interest of keeping this around 3000 words, my experience using Shape Up is something for another post (also coming soon!), but I love it, and it worked well in this case.</p>
<p>Thanks for reading! A big thanks to the editor project team (Ali, Ivan, Istvan, Klarissa and Oskar) and to my colleagues who cast an eye over this - any errors in the above are mine alone.</p>
<p>Any questions or comments? <a href="mailto:hello@alpower.com">Get in touch</a>.</p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p><a href="https://lawsofux.com/hicks-law/">https://lawsofux.com/hicks-law/</a> <a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>HubSpot has a <a href="https://medium.com/hubspot-product/customer-empathy-sessions-a-tool-for-better-understanding-your-users-7f51e6d0a748">great guide to CES sessions</a> by Grainne Smith, one of their Product Designers. <a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn3" class="footnote-item"><p>...much like the <a href="https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/">Design Council's Double Diamond</a>. <a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fnref3" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn4" class="footnote-item"><p><a href="https://lawsofux.com/aesthetic-usability-effect/">https://lawsofux.com/aesthetic-usability-effect/</a> <a href="https://www.alpower.com/blog/designing-a-better-editing-experience-for-prezly/#fnref4" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Things I enjoyed in 20222022-12-31T16:36:00Zhttps://www.alpower.com/blog/enjoyed-in-2022/<p>Due to supporting vulnerable family members (which meant my wife was away 50% of the year), plus me starting a new full-time remote job, I was on my own a lot in 2022.</p>
<p>I spent a lot of time online, both socially (in Slack and Discord groups) for human connection and read, listened and watched a lot of things, and the following are some highlights.</p>
<h3 id="books" tabindex="-1">Books</h3>
<p>I read 20-30 books, but these were the standout ones:</p>
<h4 id="non-fiction" tabindex="-1">Non-fiction</h4>
<ul>
<li><strong><a href="https://basecamp.com/shapeup">Shape Up</a></strong> by Jason Fried, Ryan Singer. We have started using this framework at work, and it's helped how we ship software.</li>
<li><strong><a href="https://www.momtestbook.com/">The Mom Test</a></strong> by Rob Fitzpatrick. A game-changer for user interview questions.</li>
<li><strong><a href="https://writeusefulbooks.com/">Write Useful Books</a></strong> by Rob Fitzpatrick. A wonderful book on audience-driven feedback for writers.</li>
<li><strong><a href="https://amzn.to/3G6zRK2">Learning to Build: The 5 Bedrock Skills of Innovators and Entrepreneurs</a></strong> by Bob Moesta. Reframes how you see innovation and helps understand customers for the better.</li>
<li><strong><a href="https://amzn.to/3IbyvQH">How Design makes the World</a></strong> by Scott Berkun. Super clear and enjoyable book on why design matters.</li>
<li>The Practice by Seth Godin</li>
</ul>
<h4 id="fiction" tabindex="-1">Fiction</h4>
<ul>
<li><strong><a href="https://amzn.to/3jwDMYQ">The Gentleman Bastard Sequence</a></strong> by Lynch, Scott. Cracking page-turning fantasy set amongst a magical world of con-men and thieves.</li>
<li><strong><a href="https://amzn.to/3vrQQkS">Foundryside</a></strong> by Robert Jackson Bennett. Another heist based fantasy series with an interesting take on a magic-system.</li>
<li><strong><a href="https://amzn.to/3Q73yiP">The Blade itself</a></strong> by Joe Abercrombie. Think Conan the Barbarian meets Game of Thrones meets Tarantino. Great characters that had me laughing out loud more than once.</li>
<li><strong><a href="https://amzn.to/3G8UB3S">Leviathan Wakes</a></strong> by James S.A. Corey. Book 1 of the Expanse series, which I came to via the Expanse TV show on Amazon Prime.</li>
<li><strong><a href="https://amzn.to/3Ib1RyR">Mistborn: The Final Empire</a></strong> by Brandon Sanderson. New to Brandon Sanderson, and he's a master of epic high-fantasy novel series. Incredible world building, and completely sucked me in.</li>
<li><strong><a href="https://amzn.to/3Z37tBe">Jade City</a></strong> by Fonda Lee. Really fun. Think Hong Kong gangster film but set in a fantasy metropolis.</li>
<li><strong><a href="https://amzn.to/3G9hkwr">The Dark is Rising Series</a></strong> by Susan Cooper. I'm a sucker for good young-adult books, as they are often an enjoyable easy read, and this is a classic series I read as a child, enjoyed, and reread.</li>
</ul>
<h3 id="youtube" tabindex="-1">Youtube</h3>
<p>I got myself a YouTube subscription, and it's made a night and day difference to sheer enjoyment of online video.<br />
I probably consume way too much, but these are a few folks I subscribe to that I've enjoyed.</p>
<ul>
<li><strong>Magic</strong>: <a href="https://www.youtube.com/@ChrisRamsay52">Chris Ramsay</a> - I used to do a lot of close-up magic and both Chris and Penn and Teller on YouTube have been such a joy and rekindled my love of magic.</li>
<li><strong>Photography</strong>: <a href="https://www.youtube.com/@seantuck">Sean Tucker</a> for his philosophical approach to creativity. <a href="https://www.youtube.com/@FaizalWestcott">Faizal Westcott</a> - Faisal has a really nice editing style and his sheer enthusiasm for Street Photography is great. Also enjoyed <a href="https://www.youtube.com/@JamesPopsysPhoto">James Popsys</a> a lot. So many good photography YouTubers out there too many to list.<br />
<strong>Music Making</strong>: <a href="https://www.youtube.com/@RickyTinez">Ricky Tinez</a>, <a href="https://www.youtube.com/@Taetro">TAETRO</a> and <a href="https://www.youtube.com/@truecuckoo">True Cuckoo</a> - I've set myself the challenge of learning Ableton this year, and thoroughly inspired by watching this guys make beats.</li>
<li><strong>Coding</strong>: <a href="https://www.youtube.com/@JoyofCodeDev">Joy of Code</a> has been great for learning Svelte and SvelteKit.</li>
<li><strong>Design</strong>: <a href="https://www.youtube.com/@Figma">Figma</a>, <a href="https://www.youtube.com/@MotionHatch">Motion Hatch</a> and <a href="https://www.youtube.com/@charlimarieTV">CharlieMarie TV</a> have all been great.</li>
</ul>
<p>We seem to be in a golden age of TV and music at the moment, and there have been so many best-of posts, but the following were highlights for me:</p>
<h3 id="tv" tabindex="-1">TV</h3>
<ul>
<li><strong><a href="https://tv.apple.com/us/show/slow-horses/umc.cmc.2szz3fdt71tl1ulnbp8utgq5o">Slow Horses</a></strong> (Apple TV) - comedic London-based spy series - love Gary Oldman.</li>
<li><strong><a href="https://tv.apple.com/us/show/for-all-mankind/umc.cmc.6wsi780sz5tdbqcf11k76mkp7">For all Mankind</a></strong> (Apple TV) - a history rewrite of the space race, set over several decades.</li>
<li><strong><a href="https://www.amazon.co.uk/Lord-Rings-Power-Season/dp/B09QH97PTF">The Rings of Power</a></strong> (Amazon Prime) - a big budget Lord of the Rings pre-cursor.</li>
<li><strong><a href="https://www.bbc.co.uk/iplayer/episodes/m000b1v2/his-dark-materials">His Dark Materials</a></strong> S3 (BBC iPlayer) - a wonderful and emotional final series of Philip Pullman's beloved trilogy.</li>
<li><strong><a href="https://www.amazon.co.uk/Tom-Clancys-Jack-Ryan-Season/dp/B0B8KPX36F">Jack Ryan</a></strong> (Amazon Prime) - classic Tom Clancy popcorn thriller stuff.</li>
<li><strong><a href="https://www.amazon.co.uk/The-Peripheral-Season-1/dp/B0B8TD7NZJ">The Peripheral</a></strong> (Amazon Prime) - incredible time-bending sci-fi - hard to believe this was written in 2014.</li>
<li><strong><a href="https://tv.apple.com/us/show/the-mosquito-coast/umc.cmc.5nghmxp88xe0qxhtlhfiu5r2h">Mosquito Coast</a></strong> (Apple TV) - dark drama about a family fleeing the U.S. Government through Mexico - S1 and S2 equally good.</li>
</ul>
<h3 id="music" tabindex="-1">Music</h3>
<p>These aren't all new in 2022 but new to me - lots of folky stuff and ambient electronica.<br />
<strong><a href="https://www.youtube.com/channel/UC4eYXhJI4-7wSWc8UNRwD4A">Anything on NPR Tiny Desk Concerts</a></strong> - it's all good.<br />
<strong><a href="https://www.youtube.com/@ScaryPockets">Scary Pockets</a></strong> - great guests and solid funk.<br />
<strong>So many playlists on Apple Music</strong> - <em>Living in the Library</em> and <em>Piano Chill</em> are great as background music.<br />
<br />
<strong><a href="https://ludovicoeinaudi.com/">Ludovico Einaudi</a></strong> - incredible composer and his latest Underwater is amazing.<br />
<strong><a href="https://svaneborgkardyb.com/">Svaneborg KardyB</a></strong> Wurlitzer and percussion - danish and scandi folk/jazz - think distilled sunshine - joyous.</p>
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="175" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/gb/album/d%C3%A6mningen/1533478573?i=1533478582"></iframe>
<p><strong>Truth</strong> by Shallou - chilled and great for driving at night (<a href="https://open.spotify.com/track/0C7sbRykiD9VGrz1rXmv0T">Spotify</a> and <a href="https://music.apple.com/gb/album/truth/1221870287?i=1221870949">Apple Music</a>)</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0DZKc96T-RU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<p><strong>Once</strong> by Ben Böhmer (<a href="https://music.apple.com/gb/album/once/1572311601?i=1572311611">Apple Music</a>) - beautiful German electronica.</p>
<p>He also has a great Live at the Roundhouse set:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/guOFgrp7JoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<p>...As well as an incredible set from a Hot Air balloon above the Turkish desert.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/RvRhUHTV_8k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<p><strong>Rosewood</strong> by Bonobo - there's something about Bonobo that''s just magical - I think the fact that he's a multi-instrumentalist is what gives his music such depth.</p>
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="175" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/gb/album/rosewood/1584968878?i=1584968881"></iframe>
<p><strong>Home</strong> by Maribou State</p>
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="175" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/gb/album/home/965835276?i=965835278"></iframe>
<p><strong>Coastline</strong> by Hollow Coves - more on the folk side, with lots of mellow guitar.</p>
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="175" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/gb/album/coastline/1609039040?i=1609039044"></iframe>
<p><strong><a href="https://colly.com/articles/collys-music-weekly-motivation-sources-rules-and-process">Colly's Music Weekly</a></strong> - as someone who's not up on the music scene, I found Simon's weekly list is a great way to explore what's cool out there.</p>
<p><strong><a href="https://sitenonsite.com/">Site Nonsite</a></strong> and <a href="https://linktr.ee/sitenonsite">links</a> - thoughtful and interesting electronic music with Japanese ambient aesthetics.</p>
<p><strong>Music for Sushi Restaurant</strong> by Harry Styles. Never thought I'd be a Harry Styles fan, but here we are - I loved this song (and the album it's from) - very funky.</p>
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="175" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/gb/album/music-for-a-sushi-restaurant/1615584999?i=1615585001"></iframe>
<h3 id="online-communities" tabindex="-1">Online Communities</h3>
<p>Slack: <a href="https://www.designerhangout.co/">Designer Hangout</a> and Discord: <a href="https://frontend.horse/">Frontend Horse</a>, Friends of Figma, Svelte and <a href="https://mobile.twitter.com/JamFactory/status/1511617419227324417">The Happy Place</a>.</p>
<p><a href="https://twitter.com/alpower">Twitter</a> used to be where I spent a lot of time but I've moved over to <a href="https://octodon.social/@alpower">Mastodon</a> and <a href="https://micro.blog/">Micro.blog</a> since Twitter's takeover and I think it's time I started posting more in places where I'm not the product - Much like Andy I'm hoping folks <a href="https://andy-bell.co.uk/2023-the-year-of-websites/">blog more on their own sites in 2023</a>.</p>
How to access post content in template listing files2022-11-06T17:26:00Zhttps://www.alpower.com/tutorials/access-eleventy-post-content-in-listing/<h2 id="why-do-this%3F" tabindex="-1">Why do this?</h2>
<p>You might want to show the contents of posts in listings, like a social feed for example.</p>
<h3 id="solution%3A" tabindex="-1">Solution:</h3>
<p>In your eleventy template listing you can use</p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span><span class="token punctuation">{</span> entry<span class="token punctuation">.</span>templateContent <span class="token operator">|</span> safe <span class="token punctuation">}</span><span class="token punctuation">}</span></code></pre>
<p>(with entry being whatever the post object name you are iterating on) which gets the contents of the post (markdown in my case), escapes it and makes it safe for use in the listing.</p>
NetNewsWire - My RSS reading setup2022-10-23T17:59:56Zhttps://www.alpower.com/blog/my-news-feed-reader-setup/<p>Thought I'd note what I use for RSS feed reading (If you have no idea what this is check out: <a href="https://aboutfeeds.com/">what is RSS?</a>).</p>
<p>I've tried a bunch of commercial feed readers and syncing services since the demise of Google Reader, but have settled on the wonderful and open source RSS reader for Mac, iPhone and iPad: <a href="https://netnewswire.com/">NetNewsWire</a> by the wonderful <a href="https://inessential.com/">Brent Simmons</a>.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/netnewswire-dark.jpg" alt="NetNewsWire Settings" /></figure>
<p>Bonus tip: If you add your feeds to iCloud, they stay in sync across devices, without the need of feed syncing services.</p>
<figure><img src="https://www.alpower.com/img/blog/posts/netnewswire.jpg" alt="NetNewsWire Settings" /></figure>
<p>Highlights for me are:</p>
<ul>
<li>previously mentioned syncing: it can sync for free via iCloud, so if you read an article on your phone, then the Mac app knows it's read - make sure you add feeds to the 'iCloud account' for this to work.</li>
<li>it has really nice keyboard shortcuts on the Mac, and is very easy to use on your iPhone.</li>
<li>it works natively with dark mode really well.</li>
<li>Starred articles are great - a nice reference for things you want to save for later.</li>
<li>it has a really clean reading experience.</li>
</ul>
<p>I've found sometimes while it's useful to keep up with things, Twitter and the news can lead to doom-scrolling, and RSS is a nice self-cultivated way of reading internet content without being bombarded with ads or promoted content, and it's now what I reach for first.</p>
15 lessons learned working remotely for a Product Company2022-10-23T00:00:00Zhttps://www.alpower.com/blog/15-lessons-learned-working-remotely-for-a-product-company/<p>While working remotely is not suited to all, I've been really enjoying it, so thought I'd write up some of the things that I've learned about working on a product team remotely, both in terms of culture and working practice.</p>
<p>I've spent the last few months working on the design team at <a href="https://www.prezly.com/">Prezly</a>, a storytelling platform used by companies to easily publish newsrooms, blogs, galleries and more online to help people build audiences and reach their fans.</p>
<p>Prezly is properly remote - while technically based in Belgium, it's a team of <strong>25 people based in 19 countries</strong> (mainly Europe, but also South America, Asia and Africa) across an 11-hour time difference! 😮</p>
<p>I'd had previous jobs that were full-time remote (and have written about <a href="https://www.alpower.com/blog/some-thoughts-on-remote-working/">remote working tips in 2014</a> and <a href="https://www.alpower.com/blog/making-remote-work-work/">2019</a>) but I'd usually been located in the same time zone/country.</p>
<h2 id="nearly-140-days-in%2C-what-have-i-learned-about-remote-working-culture%3F" tabindex="-1">Nearly 140 days in, what have I learned about remote working culture?</h2>
<h3 id="1.-one-to-one-relationships-are-key." tabindex="-1">1. One-to-one relationships are key.</h3>
<p>Remote work often misses out on the water cooler conversations and moments you really get to know someone outside of a project context that you'd find in a traditional office environment.</p>
<p>Luckily for me, I started right at the same time as another designer when the company got together for its annual meet-up, and I had a great week getting to know people properly.</p>
<p>These initial bonds were invaluable in both making new friends, and learning who people were and what they did, enabling me to communicate better with them online and I've plans to meet up with colleagues soon to renew those bonds.</p>
<p><strong>Suggestion:</strong> If you can, meet up with your colleagues at least once a year. If you can't, try and organise social activities online where you can get to know people better.</p>
<h3 id="2.-meetings-suck---have-fewer-of-them." tabindex="-1">2. Meetings suck - have fewer of them.</h3>
<p>Having worked in past roles that sometimes had 6 hours of meetings in a single day, I'm a firm believer that most meetings are unnecessary.</p>
<p>There's nothing wrong with jumping into Zoom for 5 minutes to iron out an issue instead of writing something up or running a workshop, but far too often 'traditional' meetings that are pure status updates with no clear agenda are often a waste of time:</p>
<ul>
<li>they are hard to document.</li>
<li>they can torpedo flow or focus.</li>
<li>they often don't have a solid agenda or outcome.</li>
<li>they are often centred around a single person speaking.</li>
<li>they aren't asynchronous - not good for lots of different time zones.</li>
</ul>
<p>Prezly's approach is to default to text first and only meet when necessary, allowing people to read and digest things in their own time. The bonus is there's a searchable record of everything.</p>
<p>We use Linear (for shorter-form issue writing - great for nicely-threaded project-based discussions) and Notion (for longer-form writing). We also use a bunch of other tools (like Discourse) and even our product internally to document and present things.</p>
<p><strong>Suggestion:</strong> If you have to have a meeting, set a timer. Have a clear agenda. Invite as few people as possible. End with an outcome that someone is in charge of following up.</p>
<h3 id="3.-writing-is-key...as-are-visuals!" tabindex="-1">3. Writing is Key...as are visuals!</h3>
<p>As a result, writing well is very important. Get to the point fast if you can, but also ensure you set the scene and clarify to avoid confusion.</p>
<p>As a designer there's also a lot we can do visually - annotated screenshots help - a picture paints a thousand words.</p>
<p><strong>Suggestion:</strong> Share your writing with others before sharing more widely, and ask for critical feedback.</p>
<h3 id="4.-get-good-at-presenting-and-recording-videos." tabindex="-1">4. Get good at presenting and recording videos.</h3>
<p>I like recording asynchronous demos and talking through design decisions. I use a tool called CleanShotX to record video demos, which can then be posted elsewhere for people to watch at their leisure. The combination of a short video with dialogue and interactivity really helps.</p>
<p><strong>Suggestion:</strong> Start on easy mode: If you aren't confident talking to the camera, start small and record demos for just your team and you'll soon improve.</p>
<h3 id="5.-good-tools-are-important!" tabindex="-1">5. Good tools are important!</h3>
<p>We use tools like <a href="https://www.figma.com/">Figma</a>, <a href="https://www.notion.so/">Notion</a>, <a href="https://slack.com/">Slack</a>, <a href="https://linear.app/">Linear</a>, and Zoom at work. I use <a href="https://cleanshot.com/">CleanShotX</a> to annotate, make screenshots and record videos.</p>
<p>You don't have to be precious about specific tools - it's more about what works for you and your team and meets your needs.</p>
<p>I'm still a big believer in paper and pen - I keep a daily to-do list and write up all the tasks remaining at the end of the day for the next day - great for emptying your head and starting the next day right.</p>
<p><strong>Suggestion:</strong> Shifting tools at a team level can be hard/downright impossible, but if you feel your tools aren't working for you, ask your social network what they use.</p>
<h3 id="6.-turn-notifications-off-and-check-at-scheduled-points." tabindex="-1">6. Turn notifications off and check at scheduled points.</h3>
<p>Modern tools like Slack and email are great but are designed to suck you in - if you are not careful they can lead to a very interrupt-driven culture.</p>
<p>I've got used to the fact that unless it's an emergency, it's OK not to expect an immediate response - be mindful of others' time.</p>
<p><strong>Suggestion:</strong> Try closing all distracting browser tabs you might normally have, silence notifications, and set a schedule to check for updates and notifications.</p>
<h3 id="7.-block-out-your-calendar-and-work-when's-best-for-you." tabindex="-1">7. Block out your calendar and work when's best for you.</h3>
<p>Despite a lack of meetings, I do schedule ad hoc meetings with people and encourage others to do so with me if they want to talk about something. I block out focus time when working on projects, allowing me to choose the best time of day for meetings, and letting people know I'm busy.</p>
<p>Working remotely is about outcomes and outputs, not presenteeism or the 9-5, So you can work at times more suited to you. I generally work a regular day, but usually start early as my brain works best then.</p>
<p><strong>Suggestion:</strong> If you have a lot of meetings, try and group them so that your day isn't punctuated by them. It takes time to get into a flow state.</p>
<h3 id="8.-err-on-the-side-of-over-communication-without-being-too-noisy." tabindex="-1">8. Err on the side of over-communication without being too noisy.</h3>
<p>The more you can be clearer on the problem you are solving and desired outcome, the better framed your communication will be, but there's no need to write a novel. Be as clear as you can, and don't be afraid to ask for clarification from others.</p>
<p>The worst you can do is go away for weeks without communicating or showing your work.</p>
<p><strong>Suggestion:</strong> If your tools allow, write regular status updates.</p>
<h3 id="9.-work-to-fixed-deadlines-with-variable-scope." tabindex="-1">9. Work to fixed deadlines with variable scope.</h3>
<p>I've worked on a lot of endless projects in my time, to which features kept being added. Without a time limit, there's always a better version.</p>
<p>The problem with this is that quality often suffers and QA and testing get left to the end.</p>
<p>As the saying goes, "Perfect is the enemy of done". We are experimenting using a methodology called <a href="https://basecamp.com/shapeup">Shape Up</a>, which I'm loving, and have lots more thoughts and posts about coming.</p>
<blockquote>
<p>There’s no absolute definition of “the best” solution. The best is relative to your constraints. The ultimate meal might be a ten-course dinner. But when you’re hungry and in a hurry, a hot dog is perfect. - <strong>Ryan Singer</strong></p>
</blockquote>
<p><strong>Suggestion:</strong> Get things in front of others, get other viewpoints, think of edge cases, and be clear on what you are trying to achieve and what your appetite is given a fixed amount of time. What would you do if you had half the time?</p>
<h3 id="10.-giving-feedback-and-taking-criticism-is-harder-online---be-humble-and-positive." tabindex="-1">10. Giving feedback and taking criticism is harder online - be humble and positive.</h3>
<p>There are nuances to giving and receiving feedback that are often lost digitally, so it can be easy to misinterpret things for more than they are.</p>
<p><strong>Suggestion:</strong> Learn how to give good feedback at the right time and learn how to take criticism well - it's rarely personal, and everyone is trying to make the best thing possible. <a href="http://www.discussingdesign.com/">Discussing Design</a> is a great read.</p>
<h3 id="11.-stand-on-the-shoulder-of-giants---involve-others." tabindex="-1">11. Stand on the shoulder of giants - involve others.</h3>
<p>I work with a bunch of crazy smart people, all experts in their disciplines (like Marketing, Customer Success, Support, Design, Development and Sales).</p>
<p>I try to keep learning from them, ask for their advice and get them involved where I can, as my work is invariably better as a result.</p>
<p><strong>Suggestion:</strong> Get other folks involved in your projects early on, even at a high-level, as their perspectives often change how you would approach things.</p>
<h3 id="12.-you-don%E2%80%99t-have-to-build-what-the-customer-asks-for." tabindex="-1">12. You don’t have to build what the customer asks for.</h3>
<p>We all know the misattributed Henry Ford quote about listening to customers and building faster horses. If you added every feature to a product someone asked you to you'll quickly end up with a mess. If you try and please everyone, you'll please no one.</p>
<p>Customers aren't UX or Design experts, so often not aware of what's possible. Collate feedback requests, and note when people start asking for the same thing. We use a tool called ProductBoard to highlight and surface feature requests over time.</p>
<p><strong>Suggestion:</strong> Continuous feedback loops help you solve the highest-priority problems. Ask why, look at underlying pain points, and validate actual needs.</p>
<h3 id="13.-get-closer-to-the-customer." tabindex="-1">13. Get closer to the customer.</h3>
<p>I am on a rota to help out the Support Team occasionally. This can be unnerving to start with for those not used to customer support but is well worth it.</p>
<p>Good analytics are important, but as a designer, there's nothing like seeing and helping customers first-hand with their requests to understand how people use things.</p>
<p>For the sake of a few hours every month, it brings you close to those you are designing and building products for.</p>
<p><strong>Suggestion:</strong> Even if you haven't got time to work with your support team, block out a few hours to look at what gets requested regularly, and synthesize this information if you can into a high level overview.</p>
<h3 id="14.-ship-small-and-fast-if-you-can%2C-but-make-sure-it's-right." tabindex="-1">14. Ship small and fast if you can, but make sure it's right.</h3>
<p>The product will never be finished - there's always more to do. If something feels like an insurmountable problem, ask yourself whether it can be broken up into smaller parts you can ship and validate separately.</p>
<p>I loved 37 Signals <a href="https://37signals.com/seven-shipping-principles">Seven Shipping Principles</a>:</p>
<blockquote>
<p>Everything that goes out has to easily pass the dual questions of <strong>Is It Right?</strong> and <strong>Is It Good?</strong></p>
</blockquote>
<p><strong>Suggestion:</strong> Ask whether something can be solved more simply. Sometimes simpler solutions emerge. Test edge cases, and see if others can break what you've made.</p>
<h3 id="15.-get-new-hires-looking-at-your-product---fresh-eyes-are-good." tabindex="-1">15. Get new hires looking at your product - fresh eyes are good.</h3>
<p>Even when you feel you have a part of your product dialled in, set up user testing scenarios for new hires, get new members of staff to roleplay and try and walk through a process.</p>
<p>Get a few other colleagues to silently watch and take notes. I guarantee new ideas and improvements will fall out of this.</p>
<h3 id="in-conclusion..." tabindex="-1">In conclusion...</h3>
<p>If you are starting with remote work, I hope the above helped! There's still so much to do and for me to learn, and I'm learning new things almost every day. Got good tips for remote working? <a href="https://twitter.com/alpower/">Let me know!</a></p>
<p>I’ve loved it so far and can’t wait to see where the role takes me - there’s so much potential in the product, and I’m looking forward to doing some great things with the team in the next 12 months.</p>
<p>While these are very much my unprompted thoughts, if the above excites you, Prezly is always on the lookout for good people, so <a href="https://careers.prezly.com/">keep an eye on their job board</a>.</p>
<p><em>Credits: <a href="https://www.pexels.com/photo/planet-earth-220201/">Earth image from Pexels - CC0</a></em></p>
Better UI design through first principles2022-04-03T09:48:38Zhttps://www.alpower.com/blog/better-ui-design-through-first-principles/<p>After over two years of lockdown, I ventured out to my first conference face-to-face, and it was a tonic for the soul.</p>
<p>Held at <a href="https://plusx.space/locations/brighton/">PlusX</a> in Brighton, <a href="https://www.uxcampbrighton.org/">UXCampBrighton</a> yet again knocked it out of the park, with a solid lineup of great talks, and lovely folk. Most people masked up also, so it felt really safe.</p>
<p>My talk was called <strong>UI Design Tips for Success</strong> but broadly it was a very visual talk that broke down approaching a bad design and improving it step by step using before/after examples. I only had 20 minutes, so had reduced things down to a high-level essence.</p>
<p>I looked at the cases where someone starting out in design's taste has levelled up before their actual UI design skills have, and some practices and principles on UI design one can take to remedy that.</p>
<p>I'm probably going to give the talk again soon, so won't spill all the beans, as it worked best listened to/seen, but a very high-level summary of the points were:</p>
<h3 id="what-is-design%3F" tabindex="-1">What is design?</h3>
<p>Understanding what design is is key. I looked at the term 'aesthetics' (the philosophy of beauty and taste) and broke that down into two types of aesthetics:</p>
<h4 id="classical-aesthetics" tabindex="-1">Classical aesthetics</h4>
<p>Think classic Braun design - clarity and usability. The essential function or nuts and bolts of a design.</p>
<h4 id="expressive-aesthetics" tabindex="-1">Expressive aesthetics</h4>
<p>Think artistic touches - a beautiful gradient or watercolour background behind a landing page - something not essential to a design, but that elevates it into something more beautiful.</p>
<p>For me, good User Interface Design has to focus on the former first, but also touch on the latter. Beauty cannot come at the expense of clarity.</p>
<h3 id="evaluating-and-responding-to-client-provided-design-efforts" tabindex="-1">Evaluating and responding to client provided design efforts</h3>
<ul>
<li>Everyone thinks that they are a designer, so often you get clients coming to you with designs.</li>
<li>Learn how to embrace that in a positive way, and use it as a tool to understand their needs more.</li>
</ul>
<h3 id="principles-of-ui-design" tabindex="-1">Principles of UI Design</h3>
<p>Using that as a framing metaphor, I then ran through several principles of design:</p>
<h4 id="simplification" tabindex="-1">Simplification</h4>
<ul>
<li>Squint your eyes when evaluating a design. Notice what stands out and what doesn't.</li>
<li>What is the one thing you want people to do above all else? Focus on that. People tend to only scan things, and you want your primary tasks to stand out.</li>
</ul>
<h3 id="calls-to-action" tabindex="-1">Calls to action</h3>
<ul>
<li>My worked-out example was a dashboard. Don't leave people hanging - if you can link through to deeper resources do so, even if they appear in the navigation. People don't always see navigation links, so the clearer you can make the 'what should I do next moment' the better.</li>
</ul>
<h4 id="colour" tabindex="-1">Colour</h4>
<ul>
<li>Beginners often go all-in on colour, but I like to start in grayscale first. This helps get the design right, before thinking about colour.</li>
<li>Brand colour and emotive connotations are important. Think about what you want your users to feel about your brand, and use the right colours to support that.</li>
<li>If you are starting out, stick with a primary brand colour.</li>
<li>Use tints, shades and tones, by mixing your primary colour with different shades of whites and blacks to get a nice palette.</li>
<li>if you need an accent colour, choose something from the opposite end of the colour wheel.</li>
</ul>
<h4 id="typography" tabindex="-1">Typography</h4>
<ul>
<li>I talked through serifs vs sans-serif and when to use them, how the character of a typeface is important, and can really add to the feel and tone of a design.</li>
<li>I had some preferred fonts (mainly geometric sans-serifs like IBM Plex Sans and Work Sans), and showed some fonts to avoid (looking at you Papyrus).</li>
<li>Talked through effective use of Google Fonts.</li>
<li>Find a font with multiple weights - good for UI controls.</li>
<li>If you are not a typeface expert, consider using a superfamily - a serif/sans-serif/monospaced font designed to work together - almost cheating it's so good.</li>
</ul>
<h4 id="font-size-and-reading-distance" tabindex="-1">Font size and reading distance</h4>
<ul>
<li>Think about the context of usage - people hold a phone closer to themselves than say using a desktop computer, so adjust the font size accordingly.</li>
<li>Headings can have tighter leading (whitespace between lines of text) than body fonts.</li>
<li>I like 130% of font size as my leading.</li>
<li>The bigger the font size, the less 'leading' you need.</li>
</ul>
<h4 id="whitespace" tabindex="-1">Whitespace</h4>
<ul>
<li>Whitespace is really important, and often underused. If in doubt double your whitespace.</li>
<li>There's a reason expensive shop windows often look nicer - they have less in them and use whitespace (or negative space) well to draw your attention to things.</li>
<li>Remove boxes and lines - new designers often use boxes and lines for a lot of things - you can use other things like whitespace, colour and contrast to organise things effectively while keeping things clean and feeling less cluttered.</li>
</ul>
<h4 id="alignment" tabindex="-1">Alignment</h4>
<ul>
<li>Alignment makes things feel more designed.</li>
<li>Use edge alignment for things that are similar in size, or align through the centre of mass for things that are different sizes.</li>
<li>It's tempting for new designers to align text centrally, but it only works for smaller blocks of text - left is usually better for longer paragraphs.</li>
</ul>
<h4 id="layout" tabindex="-1">Layout</h4>
<ul>
<li>Because we are in a responsive device-agnostic world, we need to think about how our designs will flow into many different screen sizes.</li>
<li>Don't use a strict grid - use relative spacing - position things relative to their nearest neighbout instead of using a strict grid, so things can flow responsively.</li>
<li>I like units in multiples of 4px (4, 8, 12, 16,24, 32 and so on).</li>
<li>Group related things together, and space unrelated things apart.</li>
</ul>
<h4 id="bonus-tips" tabindex="-1">Bonus tips</h4>
<ul>
<li>Darkness recedes, lightness brings forward. You can use dark and light colours to make things seem closer to the user (as it emphasises) and further away if darker (deemphasis). Useful for designing a dashboard with lighter panels</li>
<li>Personalisation - if you know about a logged-in user, and whether they are new or not, you can show helpful guidance or messaging that's context-sensitive.</li>
<li>Dark UI design overview - talked through Spotify and Netflix's use of dark UI design to emphasise media.</li>
<li>Light falls from above - pretty much always put your shadows below things for a natural feel.</li>
<li>Collect inspiration, test with users, and take a break if you are stuck.</li>
</ul>
<h3 id="in-conclusion" tabindex="-1">In conclusion</h3>
<p>UI design, especially starting from scratch or from a less-than-ideal existing design can seem overwhelming, especially for new designers. Break things down step by step and you'll be amazed how even just small changes add up to a more polished effective and usable design.</p>
<h3 id="resources" tabindex="-1">Resources</h3>
<p>Because the talk worked through step-by-step visual changes before and after, it's too long for a blog post really, but I might well record the talk and put it up here at some point. For now though resources and links mentioned in the talk can be found over on my <a href="https://www.alpower.com/design/ui-design-resources/">mini design tips blog</a>.</p>
<p><em>Photo by Leo Barnes - thanks!</em></p>
UXCampBrighton March 2022 - UI Design Resources2022-03-25T00:00:00Zhttps://www.alpower.com/design/ui-design-resources/<p>I'm giving a talk at UXCampBrighton in March 2022 - here's a round up of resources and links I talk about.</p>
<h3 id="links-mentioned" tabindex="-1">Links mentioned</h3>
<ul>
<li><a href="https://vimeo.com/85040589">Ira Glass - The Gap (video on Vimeo)</a></li>
<li><a href="https://en.wikipedia.org/wiki/Aesthetics">Aesthetics - wikipedia</a></li>
<li><a href="https://fonts.google.com/knowledge/choosing_type/emotive_considerations_for_choosing_typefaces">Emotive Considerations for choosing typefaces - Elliot Jay Stocks @ Google Fonts</a></li>
</ul>
<h3 id="great-ui-design-tips" tabindex="-1">Great UI Design Tips</h3>
<ul>
<li><a href="https://onepagelove.com/100-tips/">OnePageLove - Landing Page Hot Tips by Rob Hope</a></li>
<li><a href="https://www.refactoringui.com/">Refactoring UI by Steve Schroder</a></li>
<li><a href="https://anthonyhobday.com/books/visualdesign/">Anthony Hobday's 'How to Improve you Visual Design' online book</a></li>
</ul>
<h3 id="collect-inspiration" tabindex="-1">Collect inspiration</h3>
<ul>
<li><a href="https://www.dribbble.com/">Dribbble</a> - check out their advanced search hex code tool to find designs in a certain colour</li>
<li><a href="https://www.pinterest.co.uk/">Pinterest</a> - search for ‘UI Design + Keyword’</li>
</ul>
<h3 id="design-galleries" tabindex="-1">Design Galleries</h3>
<ul>
<li><a href="https://minimal.gallery/">https://minimal.gallery/</a></li>
<li><a href="https://www.siteinspire.com/">https://www.siteinspire.com/</a></li>
<li><a href="https://the-responsive.com/">https://the-responsive.com/</a></li>
<li><a href="https://httpster.net/2022/mar/">https://httpster.net/2022/mar/</a></li>
<li><a href="https://www.hoverstat.es/">https://www.hoverstat.es/</a></li>
<li><a href="https://www.admiretheweb.com/">https://www.admiretheweb.com/</a></li>
<li><a href="https://land-book.com/">https://land-book.com/</a></li>
</ul>
<h3 id="join-design-%26-ux-communities%3A" tabindex="-1">Join DESIGN & UX Communities:</h3>
<ul>
<li><a href="https://www.designerhangout.co/">Designer Hangout</a></li>
<li><a href="https://slofile.com/slack/uxbri">UXBrighton</a></li>
<li><a href="https://twitter.com/UXup_Brighton">UXUp</a></li>
</ul>
When to use uppercase in your designs2022-02-25T00:00:00Zhttps://www.alpower.com/design/when-to-use-uppercase-in-your-designs/<p>Use UPPERCASE (or 'all-caps') in your designs sparingly as the letterforms for uppercase letters are harder for the eye to distinguish, because of the equal height of all letter forms - it's difficult to read and scan.</p>
<blockquote>
<p>The four days must have added nearly another fifty miles to their journey, and Joe was jubilant. He began to predict that they would reach the Yukon in good season, and get out by steamer from St. Michael that fall.</p>
</blockquote>
<p>versus:</p>
<blockquote>
<p><strong>THE FOUR DAYS MUST HAVE ADDED NEARLY ANOTHER FIFTY MILES TO THEIR JOURNEY, AND JOE WAS JUBILANT. HE BEGAN TO PREDICT THAT THEY WOULD REACH THE YUKON IN GOOD SEASON, AND GET OUT BY STEAMER FROM ST. MICHAEL THAT FALL.</strong></p>
</blockquote>
<p>It can all feel a bit <strong>SHOUTY</strong>!</p>
<h3 id="where-uppercase-can-be-ok%3A" tabindex="-1">Where uppercase can be OK:</h3>
<ul>
<li>Small Headings</li>
<li>Button text</li>
<li>Table Headers</li>
<li>Form labels</li>
</ul>
<p>Uppercase draws the users attention to small bits of text.</p>
<p>The alignment of the letter forms creates a sense of alignment, and can be used to bring consistency to varying bits of text.</p>
<figure><img src="https://www.alpower.com/img/design/uppercase-good.png" alt="Use uppercase text sensibly for table headers, small titles, and button text" /><figcaption>Uppercase can be put to good use in UI design</figcaption></figure>
Make clearer calls-to-action with the squint test2022-02-24T00:00:00Zhttps://www.alpower.com/design/the-squint-test/<p>A simple one today. If part of your design is supposed to attract someone's attention to something, try squinting your eyes to see if the key elements still stand out.</p>
<p>While this doesn't stop you from needing to test for accessibility, it's a good quick test you can do to check that you are providing the right level of emphasis.</p>
<p>Example below: If the key elements you want to stand out were the title and add to basket button, you would give them some more emphasis to make them visible, even when squinting.</p>
<figure><img src="https://www.alpower.com/img/design/squint-test-bad.png" alt="Card design with elements of all same visual weight" /><figcaption>Elements are all same visual weight</figcaption></figure>
<figure><img src="https://www.alpower.com/img/design/squint-test-good.png" alt="Card design with elements that have a visual hierarchy" /><figcaption>Elements are given a relative visual weight, with emphasis where you want to focus attention</figcaption></figure>
How consistency helps your UI feel more designed2022-02-23T00:00:00Zhttps://www.alpower.com/design/consistency-in-ui-design/<p>When you are designing something and it doesn't feel quite right, step back and ask yourself "what can I make more consistent?".</p>
<p>Often new designers try to use just font size alone to differentiate between user interface elements.</p>
<p>Try reducing the number of font sizes you use, and use colour and weight instead - elements of your design will fit together better and feel more designed.</p>
<div class="img-centred">
<figure><img src="https://www.alpower.com/img/design/number-fonts-bad.png" alt="Average design with 5 font sizes" /><figcaption>Average design with 5 font sizes</figcaption></figure>
<figure><img src="https://www.alpower.com/img/design/number-fonts-good.png" alt="Better design with only 2 font sizes" /><figcaption>Better design with only 2 font sizes, and changes in colour and weight instead</figcaption></figure>
</div>
<p>It's OK to vary font sizes if you have to, but do it with purpose.</p>
<p>Determine what it is you want to emphasise in your designs, and consider more than just font size to highlight elements.</p>
Achieve consistency using a font superfamily2022-02-22T00:00:00Zhttps://www.alpower.com/design/achieve-consistency-using-a-font-superfamily/<p>If you are new to typography, sometimes choosing a type superfamily can really help give you a level up without much effort.</p>
<h2 id="what-is-a-font-superfamily%3F" tabindex="-1">What is a font superfamily?</h2>
<p>According to wikipedia:</p>
<blockquote>
<p>In typography, a font superfamily or typeface superfamily is a font family containing fonts that fall into multiple classifications ...The result is a set of fonts that, while belonging to different classes such as sans and serif, have a similar appearance. - <a href="https://en.wikipedia.org/wiki/Font_superfamily">wikipedia</a></p>
</blockquote>
<p>Usually designed by a single foundry or designer, you'll have <em>a set of fonts designed to work well together</em> without having to make sure they pair well.</p>
<p>This can be great for editorial work, where you often want headlines to pair very well with body text.</p>
<h3 id="nice-superfamilies-in-google-fonts" tabindex="-1">Nice superfamilies in Google fonts</h3>
<p>Pretty much all the below choices have multiple weights, so they work in many situations.</p>
<h4 id="alegreya-%26-alegreya-sans" tabindex="-1"><a href="https://fonts.google.com/?query=Alegreya">Alegreya & Alegreya Sans</a></h4>
<figure><img src="https://www.alpower.com/img/design/superfamily-fonts-1.png" alt="Alegreya & Alegreya Sans" /><figcaption>Example of Alegreya & Alegreya Sans</figcaption></figure>
<h4 id="merriweather-%26-merriweather-sans" tabindex="-1"><a href="https://fonts.google.com/?query=Merriweather">Merriweather & Merriweather Sans</a></h4>
<figure><img src="https://www.alpower.com/img/design/superfamily-fonts-2.png" alt="Merriweather & Merriweather Sans" /><figcaption>Example of Merriweather & Merriweather Sans</figcaption></figure>
<h4 id="nunito-%26-nunito-sans" tabindex="-1"><a href="https://fonts.google.com/?query=Nunito">Nunito & Nunito Sans</a></h4>
<figure><img src="https://www.alpower.com/img/design/superfamily-fonts-3.png" alt="Nunito & Nunito Sans" /><figcaption>Example of Nunito & Nunito Sans</figcaption></figure>
<h4 id="roboto-slab-%26-roboto" tabindex="-1"><a href="https://fonts.google.com/?query=Roboto">Roboto Slab & Roboto</a></h4>
<figure><img src="https://www.alpower.com/img/design/superfamily-fonts-4.png" alt="Roboto Slab & Roboto" /><figcaption>Example of Roboto Slab & Roboto</figcaption></figure>
<h4 id="ibm-plex-sans-%26-serif-%26-mono" tabindex="-1"><a href="https://fonts.google.com/?query=IBM">IBM Plex Sans & Serif & Mono</a></h4>
<figure><img src="https://www.alpower.com/img/design/superfamily-fonts-5.png" alt="IBM Plex Sans & Serif & Mono" /><figcaption>Example of IBM Plex Sans & Serif & Mono</figcaption></figure>
<p>IBM Plex, Alegreya and Nunito are particular favourites.</p>
<p>Superfamilies with monospaced fonts like Plex can be great for data tables, as any numbers will line up with one another perfectly.</p>
<p>Roboto Condensed can be great for UI that has very long labels.<br />
<strong>Update</strong>: Robot now has <a href="https://material.io/blog/roboto-serif">Roboto Serif</a> as well, which looks lovely - even more reason to try it!</p>
<p>IBM Plex Sans is very readable if you need to make small UI controls.</p>
<p>(text source: <a href="https://www.gutenberg.org/ebooks/67445">Project Gutenberg</a>)</p>
Finding good fonts to use in your projects2022-02-21T00:00:00Zhttps://www.alpower.com/design/finding-good-fonts-to-use-in-your-projects/<h3 id="where-do-i-find-good-fonts%3F" tabindex="-1">Where do I find good fonts?</h3>
<p>One of the hardest thing I find when starting a design is to find the right fonts for my projects.</p>
<p>Whether you are a fan of Google Fonts, or like buying more premium fonts from Font Foundries, here's a collection of places you can go for inspiration.</p>
<p>I usually try to think of font choices when I know more about the personality of the brand of what I'm designing, as that can influence what font you choose.</p>
<h3 id="learn-about-type" tabindex="-1">Learn about type</h3>
<p>Google Fonts has a very nice <a href="https://fonts.google.com/knowledge">primer on the basics of type</a>.</p>
<h3 id="go-with-a-system-font-stack" tabindex="-1">Go with a System Font stack</h3>
<p><a href="https://systemfontstack.com/">Systemfontstack.com</a> and <a href="https://css-tricks.com/snippets/css/system-font-stack/">CSS Tricks</a>.</p>
<p>If you are designing for the web, consider using the built-in fonts on the platforms you are targeting. Looks good and native to whatever you are reading on, and no extra resources to download.</p>
<h3 id="find-great-font-pairings" tabindex="-1">Find great font pairings</h3>
<p>One of the real challenges is finding a nice font pairing. I often use a fairly plain body font with a fancier heading.</p>
<ul>
<li>
<p><a href="https://www.fontpair.co/all">Fontpair.co</a> - this is a great resource if you want to see some nicely made Google font pairings.</p>
</li>
<li>
<p><a href="https://www.typewolf.com/">Typewolf</a> - another great pairing resource.</p>
</li>
</ul>
<h3 id="where-to-find-great-fonts" tabindex="-1">Where to find great fonts</h3>
<p>Some clients don't want to pay for/can't afford font licensing, whereas others really value the difference a good font can bring to their brand, so I've got a mixture of places I look:</p>
<ul>
<li>
<p><a href="https://fonts.google.com/">Google Fonts - Free</a> - downside is there are several fonts there that you see used everywhere (because it's free) but there are some nice fonts if you dig deeper.</p>
</li>
<li>
<p><a href="https://fonts.adobe.com/">Adobe Fonts - Subscription</a> - if you have a creative cloud license, Adobe fonts are an affordable way of using premium fonts in your projects.</p>
</li>
<li>
<p><a href="https://simplebits.com/collections/fonts">SimpleBits - Dan Cederholm</a> - lovely handcrafted fonts at reasonable prices.</p>
</li>
<li>
<p><a href="https://www.indiantypefoundry.com/">Indian Type Foundry - Premium/Licensed</a> - specialists in both Latin and Indian fonts, I just love browsing their catalogue.</p>
</li>
<li>
<p><a href="https://dharmatype.com/">Dharma Type</a> - creators of the free Bebas Neue, they have so many nice geometric fonts.</p>
</li>
</ul>
3 tips for using colour in UI design2022-02-18T00:00:00Zhttps://www.alpower.com/design/3-tips-for-using-colour-in-ui-design/<p>As I've just talked about <a href="https://www.alpower.com/design/accessible-colour-contrast/">accessible colour contrast</a>, I thought I'd round up some quick tips for using colour in UI design.</p>
<p>As I was learning to design, I found colour to be one of the hardest things to get right, as the possiblilities are endless.</p>
<p>Here are three things that helped me work with colour in design.</p>
<h2 id="1.-design-in-grayscale-first" tabindex="-1">1. Design in Grayscale first</h2>
<p>Partly an excuse to not have colour choice block you, but thinking in black and white makes your design not overly rely on colour.</p>
<p>Think about what your primary calls-to-action your want users to focus on on each screen, and make those more prominent (darker or lighter, depending on the rest of the interface).</p>
<h2 id="2.-limit-the-number-of-colours-in-your-design" tabindex="-1">2. Limit the number of colours in your design</h2>
<p>Often I've heard people say limit your colours to 3 at a maximum. Unless you are a colour expert, it can get overwhelming.</p>
<p>A nice trick I've seen people use is using darker and lighter shades of a colour to keep the overall number of colours down.</p>
<p>Look at the example below: you can see just by adding black and white to a base colour for the search UI, the app looks more harmonious than if you'd used other colours.</p>
<p>Try saturating your blacks and whites with a tint of your primary colour for extra credit.</p>
<figure><img src="https://www.alpower.com/img/design/3-tips-color.jpg" alt="Using shades of a colour" /><figcaption>Trainline - Using shades of a colour</figcaption></figure>
<h2 id="3.-the-60-30-10-rule" tabindex="-1">3. The 60-30-10 rule</h2>
<p>Liberally stolen from interior design, the 60-30-10 rule is about relative distribution of colour, and creating a well balanced palette.</p>
<figure><img src="https://www.alpower.com/img/design/3-tips-color-603010.jpg" alt="Interior shor of a kitchen showing the 60 30 10 rule" /><figcaption>The 60 30 10 rule</figcaption></figure>
<ol>
<li>60% of the UI should be dedicated to one colour (usually a neutral or light colour).</li>
<li>the second 30% should be a complementary colour (think the header, nav and general UI chrome).</li>
<li>Finally the 10% should be an accent colour, often sharply contrasting, and used for highlighting things you want the user to notice.</li>
</ol>
<p>You can actually see it in the Trainline screenshot above, and if I hadn't cut off the button of the screenshot, over 60% of it is white.</p>
<p>There's so much one can do with colour, but these three starting points should help you get going, and the following links provide ma much more in depth look at the theory of colour:</p>
<h3 id="further-resources" tabindex="-1">Further resources</h3>
<p><a href="https://frutostudio.co.uk/blog/a-guide-to-colour-in-ui-design">Fruto Studio - A guide to colour in UI design</a><br />
<a href="https://uxdesign.cc/all-you-need-to-know-about-colors-in-ui-design-theory-practice-235179712522">Colour Design Theory</a></p>
Optimising images for the web2022-02-17T00:00:00Zhttps://www.alpower.com/design/optimising-images-for-the-web/<p>Image optimization is about shrinking the file size of your images as much as possible, while keeping quality, so images look perfect but your page load times remain low.</p>
<p>It's also good for SEO, as Google takes into account page load time.</p>
<p>Use images that are a suitable size for your where you intend to use them. Especially if you are working with images taken from a camera, dimensions are often much larger than you need.</p>
<p>I often double dimensions for retina screens, (so an image displayed at 300x200px would natively be 600x400px), but I often then don't export images at 100% quality from my image editor - often 75% is good enough without losing any fidelity.</p>
<p>Once I have a folder of images, I like running them through the following tools:</p>
<h3 id="imgoptim---my-favourite" tabindex="-1">ImgOptim - my favourite</h3>
<p><a href="https://imageoptim.com/mac">ImageOptim</a> is a free Mac app and web service that optimises and reduces file sizes. Works for PNG, JPEG or SVG. It also has a <a href="https://jamiemason.github.io/ImageOptim-CLI/">CLI option for developers</a>.</p>
<h3 id="svgomg" tabindex="-1">SVGOMG</h3>
<p><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> - Jake Archibald's excellent web based tool lets you either drop images in or paste markup for SVG files and has a ton of optimisation options.</p>
<p>Great for pasting in SVG code exported from Figma or Illustrator, which can often be unecessarily large.</p>
<h3 id="tinypng" tabindex="-1">TinyPNG</h3>
<p><a href="https://tinypng.com/">TinyPNG</a> has an online tool you can drag and drop images onto. up to 20 at a time. Works for WebP, PNG, or JPEG files.</p>
<h3 id="bonus-tip" tabindex="-1">Bonus Tip</h3>
<p><a href="https://web.dev/browser-level-image-lazy-loading/">Lazy load images</a> - add the following attribute to your image tags <code><img loading=lazy/></code> and any Chromium powered browser or Firefox will load images at different priorities depending whether they are above or below the viewport.</p>
<p>Images marked <code>lazy</code> will defer being loaded until they have reached a calculated distance from the viewport (i.e. off screen but close to scrolling into the viewport), which will help with page load speeds.</p>
<p>This will still load huge unoptimised images if you don't optimise them, so still use the tools listed above!</p>
Accessible colour contrast2022-02-16T00:00:00Zhttps://www.alpower.com/design/accessible-colour-contrast/<p>When designing and developing user interfaces, it's always good to use a colour contrast checker to make sure text is clearly readable, especially when placed against coloured backgrounds.</p>
<blockquote>
<p>WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.<br />
<a href="https://webaim.org/resources/contrastchecker/">WebAIM</a></p>
</blockquote>
<p>This is especially important when designing using non-colour calibrated monitors, and in any case, you cannot guarantee what kind of screen someone else may be using when viewing your user interfaces, so the clearer you can make things, the better.</p>
<h2 id="tools-i-like-to-use-to-check-colour-contrast" tabindex="-1">Tools I like to use to check colour contrast</h2>
<h3 id="figma-plugin---able" tabindex="-1">Figma Plugin - Able</h3>
<figure><img src="https://www.alpower.com/img/design/contrast-able.png" alt="Able" /><figcaption>UI panel for Able</figcaption></figure>
<ul>
<li>Allows you to select two layers and check contrast ratios</li>
<li>Modes for simulating colour blindness<br />
<a href="https://www.figma.com/community/plugin/734693888346260052/Able-%E2%80%93-Friction-free-accessibility">Able - Friction Free Accessibility Plugin</a></li>
</ul>
<h2 id="natively-on-the-mac---colorslurp" tabindex="-1">Natively on the Mac - ColorSlurp</h2>
<figure><img src="https://www.alpower.com/img/design/contrast-slurp.png" alt="ColorSlurp" /><figcaption>UI panel for ColorSlurp</figcaption></figure>
<ul>
<li>Colour picker (free)</li>
<li>Contrast checker (premium paid for)</li>
<li>Lots of other useful features<br />
<a href="https://colorslurp.com/">ColorSlurp</a></li>
</ul>
<h2 id="online---webaim" tabindex="-1">Online - WebAIM</h2>
<figure><img src="https://www.alpower.com/img/design/contrast-webaim.png" alt="WebAIM" /><figcaption>UI panel for WebAIM</figcaption></figure>
<ul>
<li>Contrast checker</li>
<li>Good explanation, as well as pass/fail for normal text, Large Text, and User Interface Components<br />
<a href="https://webaim.org/resources/contrastchecker/">WebAIM</a></li>
</ul>
<h2 id="devtools-contrast-checker---in-your-browser-for-free" tabindex="-1">Devtools contrast checker - in your browser for free</h2>
<p><img src="https://www.alpower.com/img/design/contrast-firefox.png" alt="DevTools" title="UI panel for DevTools" /><br />
Open up Developer tools in Firefox or Chrome and click any colour chip in the Style panel, and it will give you the contrast, AA or AAA rating, and whether it's for large or small text, and you can edit colour values inline.</p>
<h3 id="further-resources" tabindex="-1">Further Resources</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Colour Contrast on MDN</a></li>
<li><a href="https://www.webaxe.org/color-contrast-tools/">Webaxe big list of tools</a></li>
<li><a href="https://accessibility.digital.gov/visual-design/color-and-contrast/">Digital.gov Color and Contrast</a></li>
</ul>
When should I use wireframes2022-02-15T00:00:00Zhttps://www.alpower.com/design/when-should-i-use-wireframes/<p>A common question I hear from new designers is "what are wireframes?" and "When should I use wireframes?".</p>
<p>This is completely understandable - often clients ask to see designs, so a lot of designers are keen to jump straight to a higher fidelity, and some see wireframes as tools of UX folks.</p>
<h2 id="what-are-wireframes%3F" tabindex="-1">What are wireframes?</h2>
<p>Wireframing is designing at the structural level, laying out content in a low fidelity way based on layout and and user needs. It's not focused on design, or often even copy.</p>
<p>Wireframing can be done simply with paper and pen, or a whiteboard, or even using dedicated software like Axure or Balsamiq.</p>
<h2 id="when-should-i-use-wireframes%3F" tabindex="-1">When should I use wireframes?</h2>
<p>For me the answer given depend on several things:</p>
<ul>
<li>Who is the intended audience for the wireframes?</li>
<li>What level of design fidelity do you need to make sensible decisions?</li>
<li>Where are you in the process of design? How sure are you on what you are making?</li>
</ul>
<h2 id="who-is-the-intended-audience-for-the-wireframes%3F" tabindex="-1">Who is the intended audience for the wireframes?</h2>
<p>Not everyone understands wireframes, so like all design you must present with context and reasoning. I often find wireframes work best early on in the lifecycle of a project, with project stakeholders, analysts and developers.</p>
<p>While you can test wireframes with end users, often they have a hard time understanding them over a high-fidelity UI, unless there's a decent amount of detail.</p>
<h2 id="what-level-of-design-fidelity-do-you-need-to-make-sensible-decisions%3F" tabindex="-1">What level of design fidelity do you need to make sensible decisions?</h2>
<p>Wireframes are cheap and fast, and often can be made much more speedily than high fidelity designs. Things like the <a href="https://www.youtube.com/watch?v=KgJCk5sRdoU">crazy eights technique</a> can be great in workshops for exploring multiple ideas.</p>
<blockquote>
<p>Design at the cheapest level you need to make the right decision</p>
</blockquote>
<p>Wireframes are best used for higher level decisions, like a general approach to a problem with multiple solutions, but not making decisions about visual elements, for which high fidelity designs in a tool like Sketch or Figma would be more useful.</p>
<p>I work agency side, where I know certain customers are receptive to wireframes, and others not. Know your audience and what works best for them.</p>
<div class="responsive-table-wrapper">
<table>
<thead>
<tr>
<th>Type</th>
<th>Fidelity</th>
<th>Speed</th>
<th>Cost</th>
<th>Detail Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pen & Paper/Whiteboard</td>
<td>Low</td>
<td>V Fast</td>
<td>Cheapest</td>
<td>Low - good for 10,000 ft view/ basic layout and flow, when you are unsure of what you are making</td>
</tr>
<tr>
<td>Wireframing Tool (like Balsamiq)</td>
<td>Low-Medium</td>
<td>Fast</td>
<td>Cheap</td>
<td>Medium - no visuals but basic content - good for layour choices</td>
</tr>
<tr>
<td>High Fidelity Design</td>
<td>Detailed</td>
<td>Slower</td>
<td>More expensive (usually double that+ of a wireframe)</td>
<td>Good for detailed visual design decisions</td>
</tr>
<tr>
<td>Clickable Prototype</td>
<td>Detailed</td>
<td>Slowest</td>
<td>Most expensive (usually double that++ of a wireframe)</td>
<td>Good for replicating exactly how something works, including interactions - best for when you know what you are making</td>
</tr>
</tbody>
</table>
</div>
<h2 id="where-are-you-in-the-process-of-design%3F-how-sure-are-you-on-what-you-are-making%3F" tabindex="-1">Where are you in the process of design? How sure are you on what you are making?</h2>
<p>The simpler the wireframe the faster it is to make and easier to discard, and the more options you can explore without wasting too much time, and not having to worry about trying out different ideas for a single design.</p>
<p>For existing projects, where you have a design system in place, and you already have consistent methods of layout and design decisions already in place, it might be just as fast to mock up new ideas in high fidelity.</p>
<h3 id="consider-real-content" tabindex="-1">Consider real content</h3>
<p>A downside of wireframes is that you often don't design with real content.</p>
<p>Make sure you do some higher-fidelity designs that take into account what might appear in the final product visually, as you might change your choice depending on the actual size of content or how many of something there is in your UI.</p>
<h2 id="so...-when-should-i-use-wireframes%3F" tabindex="-1">So... when should I use wireframes?</h2>
<p>If you have lots of ideas you need to evaluate fast, then wireframing might really help.</p>
<p>I often find early on in a project when you aren't quite sure what you are making, wireframes can help evaluate lots of ideas fast, without much cost.</p>
<h3 id="know-your-audience" tabindex="-1">Know your audience</h3>
<p>Are they a tool to make decisions internally? Then they might help.</p>
<p>Is it something you are testing with real users? Then higher fidelity might work better.</p>
Use fewer borders2022-02-14T00:00:00Zhttps://www.alpower.com/design/use-fewer-borders-for-better-design/<p>One of the classic mistakes I see junior designers is using solid borders on everything, from modals, to form fields to tables to separate things.</p>
<p>You can easily overwhelm a user interface with too many boxes and borders. If everything has the same emphasis, it's hard to see what is and isn't a control. The below example is contrived, but does highlight the point.</p>
<p>Too much going on can be too stimulating, increase visual clutter, and distract from the task at hand.</p>
<p>Borders aren't the only tool you can use. If you have form fields in your design, the edges of these can be user as separators.</p>
<p>Try using filled backgrounds, shadows or increase spacing between things instead of using lines to make your design feel more cleanly designed.</p>
<figure><img src="https://www.alpower.com/img/design/borders-bad.png" alt="Bad example of overuse of lines and boxes" /><figcaption>Bad example of overuse of lines and boxes</figcaption></figure>
<figure><img src="https://www.alpower.com/img/design/borders-good.png" alt="Cleaning up the same design" /><figcaption>Cleaning up the same design</figcaption></figure>
<p>Next time you see a good clean design, stop and ask yourself 'why' and you'll start to notice these things.</p>
Sharpen up your copy2022-02-11T00:00:00Zhttps://www.alpower.com/design/sharpen-up-your-copy/<p>What is a copy tip doing in a list of UI design tips you say? Well words are important, and a crucial part of design, and if you can say something more effectively that's good design.</p>
<p>Take advantage of modern grammar checkers. Not only will they spellcheck your work for you, but the will also tell you words you might want to avoid using.</p>
<p>We all have our bad writing habits (I use the word 'really' a lot). Since using a grammer checker, I've been able to cut right down on my mistakes.</p>
<p>My two favourite checkers are <a href="https://www.grammarly.com/">Grammarly</a> and <a href="https://hemingwayapp.com/">Hemingway Editor</a>.</p>
<h3 id="hemingway-editor" tabindex="-1">Hemingway Editor</h3>
<p>Free to use, this works by highlighting things, and making suggestions.</p>
<figure><img src="https://www.alpower.com/img/design/sharper-copy-hemingway.png" alt="Hemingway Editor" /><figcaption>Hemingway Editor</figcaption></figure>
<p>It identified use of the passive voice, adverbs, and whether sentences are hard to read.</p>
<p>It also has a Readability score (lower is better).</p>
<h3 id="grammerly" tabindex="-1">Grammerly</h3>
<p>This is a paid product, but they have a free version, which is pretty good.</p>
<p>It has a more advanced word suggestion engine, plus you can tune the engine to analyse your text in more specific ways (like 'write convincingly for a expert audience').</p>
<p>You can add it to your browser for free, or they have a web based editor, which I prefer as the right hand sidebar gives a useful overview useful.</p>
<figure><img src="https://www.alpower.com/img/design/sharper-copy-grammarly-1.png" alt="Grammarly Editor Interface" /><figcaption>Grammarly Editor Interface</figcaption></figure>
<figure><img src="https://www.alpower.com/img/design/sharper-copy-grammarly-2.png" alt="Grammarly Editor - Goal Options" /><figcaption>Grammarly Editor - Goal Options</figcaption></figure>
<h3 id="resources%3A" tabindex="-1">Resources:</h3>
<ul>
<li><a href="https://www.grammarly.com/">Grammarly</a></li>
<li><a href="https://hemingwayapp.com/">Hemingway Editor</a></li>
</ul>