# Concept design tutorials

**URL:** https://forum.essenceofsoftware.com/t/concept-design-tutorials/129
**Category:** Uncategorized
**Created:** [July 14, 2022, 9:11pm UTC](https://forum.essenceofsoftware.com/t/concept-design-tutorials/129 "2022-07-14T21:11:13Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![dnj](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.essenceofsoftware.com/dnj/32/17_2.png) [@dnj](https://forum.essenceofsoftware.com/u/dnj)
#### Post date: [July 14, 2022, 9:11pm UTC](https://forum.essenceofsoftware.com/t/concept-design-tutorials/129/1 "2022-07-14T21:11:13Z")

</div>

I’m starting to create a series of tutorials about different aspects of concept design. The [first](https://essenceofsoftware.com/posts/smooth-software/) is about how to make software “smooth”: that is, the get rid of the irregularities that often make it hard to understand and use.

What topics would you like to see covered? And any volunteers to contribute examples or tutorials? It would be nice to have a series of them in this forum…

Daniel

---

<div class="post-metadata">

### Author: ![winter](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.essenceofsoftware.com/winter/32/77_2.png) [@winter](https://forum.essenceofsoftware.com/u/winter)
#### Post date: [July 17, 2022, 1:24pm UTC](https://forum.essenceofsoftware.com/t/concept-design-tutorials/129/2 "2022-07-17T13:24:13Z")

</div>

I can contribute an example.

All the “tick” symbols in the tables in your tutorial are coloured black in my phone’s browser (Android Chrome), but on my PC (Windows Chrome) some of them are coloured as red.

The reason for the discrepancy is that on my Android device the tick symbol is being interpreted as an emoji (i.e. a picture-based glyph) and the colouring is determined by the platform (e.g. [https://emojipedia.org/check-mark/](https://emojipedia.org/check-mark/) ).

Emojis (as currently implemented) break the concept of text that can have its colour styled with CSS!

---

<div class="post-metadata">

### Author: ![winter](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.essenceofsoftware.com/winter/32/77_2.png) [@winter](https://forum.essenceofsoftware.com/u/winter)
#### Post date: [July 17, 2022, 5:10pm UTC](https://forum.essenceofsoftware.com/t/concept-design-tutorials/129/3 "2022-07-17T17:10:06Z")

</div>

It turns out the Unicode designers have developed a generic approach for dealing with the irregularity by allowing a “[Variation Selector](https://en.wikipedia.org/wiki/Variation_Selectors_(Unicode_block))” to follow a character to choose a variation for the preceding character (such as a monochrome variant or a colour variant of an emoji).

E.g. the Unicode HTML for a tick emoji is “&#x2714;” but if you want the text variant, you would write “&#x2714;&#xFE0E;”.

This works on iOS but unfortunately doesn’t work on Android Chrome (a long-standing bug), so won’t actually solve the problem for your article.

You may need to solve the problem outside of the “text” concept (e.g. by embedding appropriate SVG icons in the HTML). Or you could use a workaround like using a sad face emoji next to each questionable checkmark (doing that might also make it more accessible to people who have problems seeing colours).

---

<div class="post-metadata">

### Author: ![dnj](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.essenceofsoftware.com/dnj/32/17_2.png) [@dnj](https://forum.essenceofsoftware.com/u/dnj)
#### Post date: [July 17, 2022, 6:18pm UTC](https://forum.essenceofsoftware.com/t/concept-design-tutorials/129/4 "2022-07-17T18:18:59Z")

</div>

Ouch! Welcome to the forum, Winter, and thank you so much for pointing that out.

It’s a classic example of a concept integrity violation. The CSS styling concept is broken by the Emoji concept. I’ve updated the [piece](https://essenceofsoftware.com/posts/smooth-software/): I tried various options and ended up just putting parens around the red checkmarks and adding a note about this at the bottom.

---

<div class="post-metadata">

### Author: ![dnj](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.essenceofsoftware.com/dnj/32/17_2.png) [@dnj](https://forum.essenceofsoftware.com/u/dnj)
#### Post date: [August 1, 2022, 4:12pm UTC](https://forum.essenceofsoftware.com/t/concept-design-tutorials/129/5 "2022-08-01T16:12:31Z")

</div>

3 posts were split to a new topic: [Metadata design and evolution](https://forum.essenceofsoftware.com/t/metadata-design-and-evolution/140)
