diff --git a/blog/20230704-i-redesigned-my-personal-brand-7-times.mdx b/blog/20230704-i-redesigned-my-personal-brand-7-times.mdx deleted file mode 100644 index e5c1008..0000000 --- a/blog/20230704-i-redesigned-my-personal-brand-7-times.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: "I rebuilt my portfolio 7 times: here's what I learned" -description: "How redesigning my personal brand over and over (and over) again made me think about iterative improvement." -date: 1688344788 ---- - -Building a brand for yourself is a challenging task. In fact, I'd confidently place it as the single most difficult project I have worked on as a designer. - -**But why?** - -When tasked with 'creating an identity,' as a designer, you are presented with a client brief. Their 'values' and 'culture' define the 'identity' with which they want to be perceived— your only job then becomes translating from vision to visuals. But trying to come up with a vision for yourself is a whole other challenge. - -# Stage 1: Discovery I - -The first few attempts I made at crafting my portfolio were, in hindsight, a "discovery" phase. I was trying out different tools, technologies and styles to try and figure out which ones (if any) would fit. - -Looking back, although these projects were fun, they acted more as sandboxes for trying out new things (like TailwindCSS). They lacked planning (or much thought, in fact) and were never really intended to be the final product. - -# Stage 2: Discovery II - -Once I had a better idea of what kind of stack I'd want to use for building my portfolio, I began to think about what I truly wanted it to convey— namely, some of the visual styles I had drawn inspiration from. - -This kicked off a long phase of collecting anything I came across that I liked the look of, then trying to replicate it in Figma. The result? A strange amalgamation of various styles that lacked much harmony and vaguely resembled my Dribbble/Bēhance feed. - -![Project page on an early version of my portfolio]() - -![Another project showcase page]() - -![Landing page concept]() - -# Stage 3: Narrowing - -After creating a design, building it in React, and subsequently realising it 'looks off' (and going around that loop many times), I began to rethink what I wanted my portfolio to showcase, and why I was even building it in the first place. - -## Style - -One of the domains of design I have been very influenced by is transportation and wayfinding design— the result of deliberate decisions and consideration of user needs and accessibility. - -'Wayfinding at Schiphol' by Paul Mijksenaar details some of the design principles of the VI System which governs signage design at Schiphol Airport in Amsterdam. What the system achieves so well is wayfinding which stands out, even in a context of information overload. - -This was a theme I wanted to also incorporate into my portfolio. - -## Purpose - -Perhaps the bigger problem I was facing was that I was developing a portfolio for the purpose of selling myself. The way I structured content and the way I presented it visually, was with the intention of impressing a potential client. - -Showcasing many different styles in one, including a CTA on almost every page and focusing on making projects appear impressive led to a portfolio that was messy, cluttered and not representative of my work. - -Instead, I focused on creating an 'archive'— a repository of my work with no other purpose than to simply showcase it. - -# Stage 4: Final.html... FinalFINALfinal01_02_final.html - -After rethinking some of the aspects of what it was I was trying to build, I made a new prototype. - -![Landing page]() - -Was this the final product? By no means. - -And although it was still making some of the same mistakes as previous versions, it was a clear step up in terms of quality and cohesion. - -# The final product (for now) and key takeaways - -Taking some of the improved aspects, I arrived at the final product— the one you're looking at right now. In the process of getting here, I learned a few important lessons: - -## Scope, scope, scope - -No project can succeed without a clear intent. Lack of a concrete intent leads to two things. First, a constant deviation from what you were trying to build at a certain point in time; and second, it results in producing low-quality pieces of work that try (and fail) to achieve way too many things at once. - -## Maybe look over your... scope (again) - -Finding myself in a situation where I constantly felt the need to make little tweaks, over time, I ended up with a final product that was almost unrecognisable when compared to initial concepts. - -After a while, I realised something— I was diverging, not converging onto a single goal. - -Again, lacking a clear, concise intent led me to branch out in many different directions and continually produce things I absolutely hated. - -## Frustration is your friend - -Reflection may bring comfort to some, making you feel that you're learning from your mistakes, and that you're improving. - -Perhaps you're right— or perhaps you're lying to yourself. - -Learning from mistakes takes a very heavy, conscious effort and constant awareness— things which are very difficult to maintain. Particularly when working alone, it's easy to become entrapped in a cycle of repeating the same mistakes. - -That cycle, however, will begin to break down quicker and quicker, as frustration begins to set in more and more. Being unhappy with your work is what gives "learning from mistakes" any real meaning. \ No newline at end of file diff --git a/blog/20230921-designing-a-design-system.md b/blog/20230921-designing-a-design-system.md new file mode 100644 index 0000000..0aced5c --- /dev/null +++ b/blog/20230921-designing-a-design-system.md @@ -0,0 +1,58 @@ +--- +title: "Designing a pixel-perfect design system" +description: "The challenges of bridging beautiful UIs from Figma to code." +date: 1695252037 +--- + +2023 seems to be the year of the design system, with every other developer working on a "revolutionary" new way of building interfaces. + +While a lot of these developers have produced great results, each with a coherent look and feel (e.g. see: [shadcn/ui](https://ui.shadcn.com/) and [reshaped](https://reshaped.so/)), many struggle with achieving similar pixel-perfection. + +I have recently been working on a project, and in doing so, have had to implement some UI components myself— let's walk through a few of the things I've learned. + +# The Figma trap + +I'm a big advocate of Figma— a great piece of software, with a small learning curve, that allows almost anyone to quickly get started on designing things. + +As great as it is for conceptualising, however, moving away from Figma and trying to translate designs into code can often be tricky. Things that feel natural in Figma may take hundreds of lines of code to recreate. + +## Premature optimisation + +"Premature optimisation" is a term often used in backend development talk to refer to systems which take performance optimisations into account from a very early stage. + +This is commonly considered a naïve approach, as it can easily lead to getting stuck or creating a system that is overly rigid and not very extensible. The same can happen with design. + +Design tokens have gained immense popularity in the design systems world over the last couple of years, and can now be easily implemented with Figma Variables. When used right, design tokens can lay the foundations for a consistent design language. But when used wrong, they can lead many into the trap of premature optimisation and excessive abstractions with tokens like `colors.button.primary.500.hover.bg` and `spacing.text.paragraph.leading.2xl`. + +## Rendering differences + +Take iOS Corner Smoothing as an example— Figma's implementation of Apple's "squircle" rounding of corners. Albeit subtle, a smoothing of 60% can really uplift a design, making it look far more fluid and easy on the eyes. + +And while this takes less than 3 seconds in Figma, trying to recrete this effect in CSS doesn't fall short from tortorous. + +Impossible? By no means. Just as long as you're okay with importing a [js library](https://github.com/PavelLaptev/css-houdini-squircle) onto the page, [limited browser support](https://ishoudinireadyyet.com/) and several hundred LOCs for a few pixels' difference. + +Let's not forget text either, which looks vastly different in Figma, than it does on the web. Unless, of course, you turn on antialiasing... or [should you](https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/)? + +Achieving some of the visual results that Figma offers can sometimes come with tradeoffs, be that development time, accessibility or just painfully unnecessary complexity. + +## Context matters + +Figma is a blank slate that lets creativity flow. It's very easy, however, to forget about what exists beyond the blank slate. In reality, your design won't be the only thing present in the user's window. You will be fighting for screen space with a URL bar, tab bar, bookmarks bar, maybe a notch, notifications and many other visual distractions. This is easy to forget when designing in Figma, and putting a design into context can change its look entirely. + +# Less is WAY more. Do less. Please do less. + +You have created a beautiful skeumorphic button that implements iOS Corner Smoothing using CSS and JS, has 8 gradients, with different blend modes and 10 layers of shadows? Congratulations! You have created a button that nobody will use. Please stop. + +To see that less is more, it helps to turn to some very successful design systems, used by public agencies and authorities— for instance, the [GOV.UK Design System](https://design-system.service.gov.uk/). Notice how their buttons don't even have rounded corners, but instead bold colors and use of typography? Beauty is often hiding in simplicity— trying to force it using tens of subtle visual tweaks detracts from the function of a component, and usually results in a design that you will hate in two weeks anyway. + +# Inter is a beautiful font + +This is the last point, this time about fonts. + +You don't need to spend hours browsing Google Fonts in a quest to find the **PERFECT** fontface for your project. Honestly, Inter will do. Not to mention that Inter is an open-source typeface, maintained by people who have the time to discuss [cyrillic letterforms at length](https://github.com/rsms/inter/issues/567) (**NB:** if you're one of those people— I love you). + +However, I'm well aware that you won't listen to my advice. + +So, here's a better aproach to at least save you some time— pick out a few core fonts, ones along the lines of Inter, Public Sans and Libre Franklin; try those fonts for your project first; if you do feel the need to resort to another typeface, only **Sort by: Newest** when browsing, to save yourself from scrolling through hundres of fonts you are already well acquainted with. +