“The Gothic speaks to this sense that we are all entangled in a messy middle, living in weird borderless biomes whose complex networks we can barely fathom.”

“Pointed arches stretch up towards God, flooding the interior with divine light and inspiring solemn awe, what one commentator called ‘an artificial infinite’.” - Roger Luckhurst

Gothic Architecture

“Monsters are cultural bodies that mark a ‘crisis of category’.” - <a href="https://www.jeffreyjeromecohen.com">Jeffery Jerome Cohen</a>

Monsters

“Humans exist in complex, interdependent, cross-species assemblages that drives a more subtle kind of monster.” - Roger Luckhurst

Cross-species Assemblages

“The octopus is likely to be ‘the closest we will come to meeting an intelligent alien’.” - Peter Godfrey-Smith, <a href="https://www.amazon.com/Other-Minds-Octopus-Evolution-Intelligent-ebook/dp/B01LXKA6FO/ref=nodl_?dplnkId=e5387ccf-f186-446b-bb23-70914bd82dc1">The Octopus and the Evolution of Intelligent Life (2016)</a>

Tentacles

“The biological world of fungi is highly ordered, marked by open-ended cooperative assemblages, ecologies whose complexities scientists are still trying to grasp.” - Roger Luckhurst

Fungi

“Gothic” by Roger Luckhurst is a plentiful book full of Gothic information. Ranging from categories such as architecture, design, film and television.

A richly illustrated history of the Gothic across a wide range of media, including architecture, literature, and film The word Gothic conjures associations with the dark and melancholy, the weird and feared, and haunted places and people. In Gothic, Roger Luckhurst offers readers an unprecedented look at the ways this uncanny style has manifested itself through architecture, literature, film, art, video games, and more. From the works of Victor Hugo and E. T. A. Hoffman to Southern Gothic, ancient folklore, and classic horror movies, Roger Luckhurst explores how an aesthetic that began in the margins has been reinvented through the centuries to become part of mainstream global culture. Organizing his wide-ranging history by theme, Luckhurst begins with Gothic architecture and form, including such elements as the arch, the house, and ruins. He considers how the Gothic is depicted in rural and urban settings, as well as in the wilderness and borderlands. And he delves into Gothic traditions and settings around the world, from the sublime Alps and Australian outback to the Arctic wasteland, from the dark folkloric realm of the forest to the postindustrial landscapes of abandoned hospitals and asylums, and then beyond the bounds of the planet to unknowable cosmic horror. Luckhurst investigates the monsters that mirror ourselves and society, and demonstrates that as the Gothic has traveled across the globe and through time, it has morphed according to the shape of our changing fears and anxieties. Filled with a wealth of color illustrations, Gothic will satisfy anyone yearning to lift the veil on our fascination with the eerie, morbid, and supernatural.

Gothic

In this cheat sheet we will cover: <ul><li>Types of patterns </li><li>Like </li><li>Save </li><li>Favorite </li><li>Rate </li><li>Views & listens </li><li>Closing thoughts </li><li>Further reading </li></ul>

UI cheat sheet: The 5 love languages of the web

Liking: Used for non-referenceable appreciation showing.Favourite: To earmark content, to show its importance, or to reference easier.Save: To bookmark content that isn’t yours to reference later.Rate: To give users the opportunity to say they dislike something as well as like it.Views: To track the number of people who have viewed something.

Types of patterns

As a pattern, liking is just an action a user takes on someone else’s content that doesn’t do anything apart from increase a tally. This means, there is also no way to reference the things you have liked. For example, you can’t go onto Instagram and easily see a list of all the content you have ever liked.

Like

The word ‘ like’is also a good example of ‘ real world’language being turned into a Ui. You wouldn’t say you ‘ heart’or ‘ Star’an Ice-Cream shop, you would say that you ‘ like’it. There has also been a shift away from the thumbs up icon and towards the heart icon. According to Wikipeida — it wasn’t Facebook who invented the like button (gasp!)

Standard liking

In the olden days, Facebook used to have the old school like button with the thumbs up. The idea that you could just ‘ like’something without any effort took off, and then came in the awkward social interactions. This is where ‘ reactions’come in. They provide the user with options other than ‘ like’to better express their emotions towards a subject. Reactions are ‘ like ’, ‘ love ’, ‘ Haha ’, ‘ Wow ’, ‘ sad ’,

Reacting

Clapping hands is a way to show that you really like something. If you see something with 100 claps, it could have come from just 100 people or two people. If you have a crush on medium, go give their stories 50 claps. They will think you are weird, but at least they will appreciate the effort.

Claps

Saving is generally understood as a way to avoid losing something. While it was traditionally thought of as a method to protect your work, the meaning has broadened to include saving something you have seen online. For the sake of this section, we will be ignoring ‘saving work,’ and ‘saving your place in a game’ and just focus on saving content online.

Save

Icon: Bookmark icon or the word ‘ save’. Some sites allow you to save content to a collection or a group. This makes Referencing a lot easier. Y'all, I remember when the Pinterest button used to say ‘ pin it’. But then (Cue dramatic thundercloud sounds) they changed it to just say ‘ save ’.

Save to a collection

Adding to a Wishlist or a Registry is used almost exclusively in Ecommerce. If something is added to a Wishlist, it gives you an opportunity to continue interactions with your users about the product that they have their eye on, until you push them over the edge. If you are a fan of ye old dark patterns, you can even tell the users when you are about to run out of that product. The heart icon is more Emotive and less ‘ committal’than the save icon ..

Add to wishlist or Add to registry

You probably first became acquainted with Bookmarking in your Browser’s Bookmark bar. While it doesn’t work differently to saving, Bookmarking is usually used for something you have to complete like a movie or an article. Youtube also lets you add a Video to a ‘ watch later’list, but it is more like the ‘ save to collection’pattern.

Bookmark

On Spotify you ‘like’ a song. You then go navigate to ‘Liked Songs’ and replay it 23 times.

Rulebreaker example 1: Spotify & Youtube

Facebook used to use the classic like button and are fairly synonymous with it, although now they use reactions. However, you can still just hit the ‘like’ button as opposed to choosing a reaction. Instagram uses a heart-shaped icon. Twitter used to have a favourite (star) icon but moved over to using a heart button to align with everyone else. (<a href="https://en.wikipedia.org/wiki/Like_button#:~:text=Facebook,-Main%20article%3A%20Facebook&text=The%20Facebook%20like%20button%20is,introduced%20on%209%20February%202009.">source</a>) Vimeo are the original like button creators. TikTok apparently also uses the like button. But being on the wrong side of 25 I can’t confirm this. Dribbble also uses a like button.

The Way The Like Button is Used

Like ‘saving’, ‘favoriting’ is referenceable. But unlike saving, it is usually used on your own content. Favoriting is usually used to help the user organize their own ‘things’ like emails and files.

Favorite

The Star icon is usually used to indicate importance in your own content, as opposed to content owned by others. Email services like Gmail use the Star icon to group important Emails.Google photos uses the Star icon to group your favorites.

Standard

The product I work on is a) science-based and, b) collaborator sourced. So while we initially wanted to put star ‘ratings’ on our content, it wasn’t a good move for our collaborators. We didn’t want their content getting ⅕ starts (even if it deserved it). So, the next option was ‘liking’ which felt a bit too unprofessional for the brand. Leaving our last option which was favoriting. It works for the product, even though users were favoriting content that wasn’t their own.

Rule Breaker

Ratings are kinda like the people of the world trying to help other people of the world out. Movie is 3 stars? Wait till it comes out on Netflix. Restaurant is 4.5 stars and only has one $? Count me in. Not sure what to read on your holiday with your in-laws to make yourself seem clever? Rank those business books according to popularity.

Rating

Generally speaking, when you rate something it will usually be out of 5. Why 5? I’m not sure, but here are a few of my best guesses: <ul><li>It is easier to Substatize 5 stars than it is to count to 10.</li><li>5 stars are easier to work with than 10. </li><li>5 is an odd number, which means that a neutral score is possible. E.g. If you say something is 3 stars, you neither love it nor hate it. </li></ul>

Standard five-star rating

When rating something, it is seldom that you will do it without attaching a written review alongside it. More and more sites are also using multiple ratings to get an overall score. A rental property could be perfect except the host wasn’t very good at replying to messages, which should affect the whole score. As a general rule, the less specific the products are (for example on Amazon) the less detailed you can be with your rating and review form. Sometimes, you see Brand-Specific ratings,

Rating and Reviewing

Youtube in 2010 moved away from a Star rating system to a ‘ Like/Dislike’one. The staff said the change was because users seldom used the numbers 2,3,4 and preferred the 1 and 5 stars. This style creates quite Polarising opinions of a piece of content.

Like vs Dislike

Up/down voting is a really interesting method of surfacing content that other users would find interesting. Like the ‘ Like/Dislike’pattern it can be fairly polarizing. One of the big disadvantages of this is quickly burning through interesting or controversial content due to early down voting.

Up/down voting

Images and short text posts don't usually get view counts that are publicly visible. Instagram counts something as a view after 3 seconds according to Matthias Funk for Tubics. Music apple music and Spotify both don’t show the amount of views, while Soundcloud does. If you are on one of the first two, you are already ‘ famous’and if you are on Soundcloud you are more ‘ Garage-Bandy’in which case, Listens/Views count.

Views & listens

Encourage users to sign up for pro accounts, and then distribute the fee across the artists that they spend the most time interacting with. Back 2017, the service paid $0.0064 per stream. By last year, that number had risen to $0.00783. Today, that number has settled at $0.00735. Spotify’s Per-Stream rate ranks as one of the worst, and it appears to be falling.

But how does the money work?

You like? You love? You favorite? You five stars? Well, whatever your love language is, let’s explore them together. So, why is it a good idea to have more than one way to show appreciation? Well, a…

Stashed ideas

Language is a way that people communicate concepts to one another. Visual design is a visual language. And learning visual design is no different from learning a new language.Good visual designs aren’t born. They are made. The key to becoming a better visual designer is rigor. You will only improve as a visual designer if you make a conscious effort.

Design as language

<ul><li>You can tell a lot about a designer by looking at their typography. This is because type is a fundamental basis for design.</li><li>Use space to create balance Spacing helps establish vertical and horizontal motion in your designs.</li><li>Use size to establish visual hierarchy. When it comes to creating visual hierarchy, sizing is second to none. By using size to convey visual relationships between elements, you can establish flow.</li><li>Use color to convey meaning. Color plays many roles. It conveys meaning, creates emotional resonance, and brings unity to designs.</li></ul>

Mastering the fundamentals

<ul><li>Identify the purpose of your design before choosing a color palette. Good design align its color palette with its purpose.</li><li>Identify your audience. People perceive colors differently. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences.</li><li>When choosing a color palette, simplicity is key. Choose a neutral background color. Then choose a primary and secondary accent color. Finally based on your other colors, choose an error and success color for your different UI states.</li></ul>

Using colors

As I was thinking about how to answer this question, my mind wandered to my experience with learning Mandarin Chinese. Recently, I decided to teach myself Mandarin. When it comes to learning a new…

Before you can master design, you must first master the fundamentals

When the iPhone X launched, a lot of designers were put off about the screen shape. Those complaints have mostly died down, but I haven’t seen much design-nerd talk about cool corner treatment detailsOnce Apple knew they wanted to take advantage of new full-screen technology, that gave them the opportunity to alter screen shape because they would need to address the manufacturing process anyway. Presumably, the expense was mostly built in.

No Cutting Corners on the iPhone X

iPhone X rounded screen corners don’t use the classic rounding method where you move in a straight line and then arc using a single quadrant of a circle. Instead, the math is a bit more complicated. Commonly called a squircle, the slope starts sooner, but is more gentle.Apple has been doing this to the corners of laptops and iMacs for years, but this type of rounding didn’t penetrate iOS until version 7. This shape has classically been difficult to achieve, because it wasn’t available in 2D design editors, though that’s starting to change.

Screen Corners

The left and right sides have two rounded corners. Because of the curve falloff, one curve doesn’t complete before the next one starts — they blend seamlessly into each other. As a result, no tangent line on this edge actually hits a perfect vertical.

The Notch

When the iPhone X launched, a lot of designers were put off about the screen shape. Those complaints have mostly died down, but I haven’t seen much design-nerd talk about cool corner treatment…

Data is useless without the ability to visualize and act on it. The success of future industries will combine advanced data collection with better user experience, and the data table comprises much of this user experience.Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.

Data is useless without the ability to visualize and act on it

Good user interface design is based on human goals and behavior. The user interface in-turn affects behavior, which drives further design decisions. In subtle and unconscious ways, user experience alters how humans make decisions. What is seen, where it is presented, and how interactions are afforded, influence actions. It is important we make design decisions that lead to a better world, one data table design at a time.

Good user interface 

Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience.

Bite-sized knowledge
to upgrade
your career

#visualdesign

IDEAS ABOUT #visualdesign

Gothic

UI cheat sheet: The 5 love languages of the web

It's time to

READ

LIKE

A PRO!

Before you can master design, you must first master the fundamentals

No Cutting Corners on the iPhone X

Design better data tables

Bite-sized knowledgeto upgradeyour career

#visualdesign

IDEAS ABOUT #visualdesign

Gothic

UI cheat sheet: The 5 love languages of the web

It's time to

READ

LIKE

A PRO!

Before you can master design, you must first master the fundamentals

No Cutting Corners on the iPhone X

Design better data tables

Bite-sized knowledge
to upgrade
your career