Anh

Hi, I'm Anh. You might know me better by my pseudonym: pwign.

I'm a designer from Hanoi, Vietnam. I mostly tweet and write about design, development, software, and tech in general. Most of my design work are currently on Dribbble. When I'm not designing, I take photos for my Unsplash page.

If you'd like to reach out, my Twitter DM is open — or you can also email me.

This website is currently under construction as I'm working on its design. Please let me know if anything breaks.

Anh

Latest

I’m currently designing and developing this website, so I thought it would be fun to write about my process.

Something that came up most recently in my to-do list is choosing the right colours for the website. I knew from the beginning, I wanted to support system-wide dark mode—and the easiest way to do that is with CSS variables.

// Colour to be used in default mode (or light mode).
:root {
  --color-text-60: #636363;
}

// Colour to be used in dark mode.
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-60: #cccccc;
  }
}

If you’re already experienced with CSS variables, you know there’s a smarter way to do this.

// Light: --color-text-60: rgba(0, 0, 0, 0.6)
:root {
  --color-base-rgb: 0, 0, 0;
  --color-text-60: rgba(var(--color-base-rgb), 0.6);
}

// Dark: --color-text-60: rgba(255, 255, 255, 0.6)
@media (prefers-color-scheme: dark) {
  :root {
    --color-base-rgb: 255, 255, 255;
  }
}

The problem with this aproach is that even though the opacity value we’re using (0.6 or 60%) is the same for both themes, the real contrast to the human eyes isn’t.

Before — unbalanced colour contrast between the two themes

If you look at the link in the image, it appears to have less contrast against the surrounding text in the light theme. Another example of how our eyes fool us is how the same value of brightness and saturation of yellow will feel brighter than violet.

To fix this, the opacity value for the link in the dark theme needs to be manually raised to match the one in the light theme, or vice versa.

After — balanced colour contrast between the two themes

That’s why for white and black colours, I have to use two separate palettes so that the contrast looks uniform in both themes. Unfortunately, there’s no programmable way for this process I’ve found to be useful, so I just ended up eyeballing my way through all of them.

Thankfully, Figma’s Selection Colors made this process extremely easy. The two main appearances of colours in the website is the text and the

Aside from the black and white colours, I also had a brand/primary colour scheme to accent my design. It’s a mixture of blue and purple, or as some people prefer to call it “blurple.”

It went through a similar process as the black and white colour scheme, except the saturation, has to be dropped way down for the dark theme.

At last, it was time to migrate to the new colour system. I made all the old values red, so I know where to start switching to the new colors.

This might seem like I’m being too nitpicking, but it’s a gripe I’ve always had with websites and apps that didn’t take colors seriously enough—who changed the background to black and called it a day.

Oh, and if you’re curious about the colours used in the code blocks, it’s from the VSCode Github theme. I also didn’t forget to use CSS variables, so it should work in both light and dark mode.

Published · Hyperlink

Other

My goal for this website is to make it as accessible as possible. Even though my content isn’t really for people outside of tech, I still want to include them in the off chance they might be interested.

One of the most popular conventions that websites have with external links is adding target="_blank" to it so that browsers will open the link in a new tab. I think the main reason why people use this is that they don’t want users to leave their website. Opening external links in a new tab mean that your website will still stay open as a tab. And users need to intentionally close off your website tab if they don’t want to continue browsing your site.

I’ve always held down the Cmd key while clicking a link to open it as a new tab in the background, so it doesn’t affect my browsing experience.

External or not?

My problem with implementing target="_blank" is that there’s no indication as to whether the link to open in a new tab or not.

If you have Status Bar turned on in macOS Safari, it will tell you if a link will open in a new tab as opposed to Chrome and Firefox, which will only show the URL.

Safari status bar

But the status bar isn’t switched on by default in Safari, and it only works in macOS.

Some websites add an icon that indicates that a link is an external one, but when placed in a body of text, it’s really disruptive and takes away the focus from the content, which I do not want. Also, the icon design isn’t very popular, which might confuse people who are new to the website.

Icon designs for external links

A viable option I’m considering is to add a tooltip upon hovering that indicate the link as an external one, and as a bonus, show the domain of where they will be redirected to.

Something like this:

But it doesn’t solve the problem that people don’t know the link will be opened in another tab; it’s only telling them that the link is going to move them off-site.

Back button

Another concern I have is when you open a link in a new tab. It’s not easy to get back to the origin tab. The back button is greyed out. The only web browser that seems to address this is Safari. When you open a page as a new tab there, the back button will bring you back to the origin tab.

Safari has a back button for new tabs

But again, it means that this feature is only limited to platforms where there’s Safari—so not the best option.

Perhaps I’ll find a better solution to all of these in the future, but for now, I’m keeping target="_blank" on my website for the sake of being consistent with the rest of the web.

Published · Hyperlink

After five days using iOS 14, I have to say it feels surprisingly stable. iOS 12 beta was so unusable on my device that I decided to skip iOS 13 beta altogether.

As always, the general advice is to not install it on your primary device. But if you still want to proceed, here are some common issues I have seen for the past few days:

  • Animations skipping frames. Especially when opening and closing apps.
  • Random overheating. Have to restart to resolve.
  • Battery will drain very quickly for the first day following installation, presumably for search indexing.

Most apps seem to work fine for me, but some will be pretty annoying with the occasional clipboard access notifications.

Published · Hyperlink

The new design of the San Francisco as it turns into a variable font is unfortunately a step down in terms of legibility for users using Latin characters with diacritics like me.

Here’s a comparison of the before and after of the new update:

Diacritics in iOS 14 has a lower height than those in iOS 13
Close up view of diacritics in iOS 14

This isn’t the usual “find Waldo” UI nitpicking; I literally found it because it was much harder for me to read and keeping in mind, I’m 18 years old.

I hope this is just an oversight on Apple’s part, but if this goes through to public release, I don’t think I can recommend the new update to my parents, considering they’re already using the enlarged system font size setting.


Apart from the size change, there’s a new design for the diacritics as well.

The WWDC session video didn’t address this change, but the description is undoubtedly ironic.

Learn how to achieve exceptional typography in your app’s user interface that enhances legibility, accessibility, and consistency across Apple platforms.

[…]

Published · Hyperlink

The iOS 13 text selection is really frustrating to use.

iOS is designed for touch input, and it was always aware of people’s touching the screen… with their finger. That’s why we can easily increase a tappable area with button content inset, have character preview on keyboards and magnification loupe for text selection.

Character preview
Magnification loupe
Enlarged touch target for fingertips

I’m not saying that everyone needs this, and the design team at Apple most likely has done their user research to justify removing such a defining iOS feature, but as someone who considers themselves as a “power user”, it’s hard to imagine how others are coping with this change.

I’m not the only one.

Video demo.

Published · Hyperlink

Medium is known for being one of the most loved blog platforms out there — or at least until it started to monetize and all the growth hacks start coming left and right. If you’ve visited Medium before, you obviously know about the obtrusive pops up and ask you to sign up, or the 100px tall stacked navigation bars.

But this isn’t about those, this is about the most-anxiety inducing feature that was released alongside the monetization push: the free articles limit warning.

This one

So here’s an attempt to fix that.

1. Make the paywalled articles indicator more obvious compared to free ones

Paywalled articles are currently marked by a star icon. By marking them with a Membership tag, they are instantly more recognizable and far easier for people to identify the different content type at first glance.

Article item in the article list with better indication it's a paywalled article

Since the touch target is also larger than an icon, it’s also possible to attach a tooltip to it to display more information about the Membership.

Tooltip explanation when clicked on the new paywal indicator

A downside to this is that repeated usage of the tag will make the layout look much more busy, increasing cognitive load and prevent readers from focusing on the content that matters.

The overall design in a grid feels too busy

It’s also worth noting that as I’m editing this blog post for republishing on my new website, a lot more content on Medium has been put behind the paywall. So it’s very likely that the Membership tag will appear frequently in the layout.

I’ve also realized that the majority of people who don’t know the meaning behind the star icons are those who have not visited Medium before, and so they have probably visited the article from an external link.

So as an alternative, the indication tooltip for the Membership program could be displayed on the first visit inside the article instead.

2. Remove the tripwire penalty

Twitter card of a Medium article in the Membership program

Also related to different referrer source, if you visit a Membership article from somewhere else like Twitter or Reddit, you wouldn’t know whether the article is a free one or not until you actually visit the link.

Unexpected user interface elements like these feel like stepping on an explosive mine while taking a stroll in the park. No one likes surprises, especially if you want to be the platform that people can put their trust in.

I’m not sure if the current implementation can be classified as a dark pattern, but I feel cheated because I was never warned that I have a limited amount of reading allowance before I entered the website.

There are two ways this information can be properly communicated to the reader:

  • On the article preview card
  • On the article page

The first option doesn’t work for 4 reasons:

  1. Because card previews varies a lot in size, this text might be inelligible in small sizes.
  2. Having text on an image thumbnail is generally frowned upon because it’s not very accessible.
  3. Not all links are accompanied with a card preview.
  4. Not every article has a preview image.

The second option seems to be more plausible.

Before
After

First-time readers now know that the article they’re reading is behind a paywall. They’re given options as to whether they want to read the article and use up one membership preview, or they can upgrade to get unlimited access to all the articles.

Published · Hyperlink