Forem: Claudia Wu.

Linking Anchors In Standard MarkDown

Claudia Wu. — Wed, 03 Jun 2020 19:12:49 +0000

Dev.to uses standard markdown. Define an anchor you want to link to right before the line you want to refer:

<a name="anchor-name-1"></a>

and place your link:

[link text](#anchor-name-1)

If you want to link to a remote url you can also do this:

[link text](https://[...]#anchor-name-1)

Try it yourself 😉

[Try it yourself](#try-yourself) 😉
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<a name="try-yourself"></a>
# If you got here it worked! 🤪
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

If you got here it worked! 🤪

.
.
.
.
.
.
.
.
.
.
.
.

Any ideas or feedback?

I would like to know your thoughts and experience related to this topic.

Do you like this article? Follow me on Twitter and don’t miss any future posts.

Build Your Individual Color Palette In 3 Easy Steps

Claudia Wu. — Tue, 02 Jun 2020 10:05:19 +0000

Colors determine the emotions of your viewers. Choosing the right color scheme can lead a customer to stay at your website and buy your product. However, if you are new to webdesign the color decision can be difficult. In this article I will show you how to find your color scheme in 3 easy steps.

1. Trigger The Right Feelings

Think about the emotions you want to trigger when a viewer enters your website. Pick the first and second rank of color names that fit the desired feelings the most.

Note: If there is a first color specified (e.g. in a given logo), use this one as your first choice and pick the best fit of the list as your second rank.

Second Note: If you already have a website and want to rework the design, I recommend to maintain the main color of the old design, because your viewers very likely identify your website by it.

The following psychological and emotional effects of colors come from color-effects.co.uk and arttherapyblog.com.

Examples

If your website is about summer vacations you probably want warm and bright feelings. I suggest choosing yellow or orange as the primary color and brown as the accent color.

If you sell sports products you need trust of your customers. Leading social media platforms mainly use the color blue in their designs for the same reason. The sports topic matches perfectly with the accent color orange or red (powerfull).

A website about gardening tips could use green and brown to express naturality, earthyness and environmental awareness.

First step: ✔

2. Find Your Main Colors

Now you know the names of the colors that attract your viewers. The main colors are the basis of your color palette and consist of:

primary (the color that is used for most elements)
accent (a smooth contrast to your primary-color)
warn (a signal color that alarms the viewer in case of an error)

Your warn color should be red or red-related (pink or orange). Your task now is to find a primary, accent (dependent on the two colors from step one) and a warn color that fit all together. Write down the color codes.

You have two options to find your color codes:

browse thousands of handpicked palettes at https://colorhunt.co/. Filter the palettes by the color names you picked in step one and choose the palette you like the most.

or get a customized color palette here: http://colormind.io/bootstrap/. Click the generate button to generate a new color palette and click on the lock icon if you found one of the color names from step one and you like the color. Scroll down to see how it looks like when applied to elements.

Examples

The following color palettes consist of:
[primary color][accent color][warn color]

The website about summer vacations could use these main colors:

The website about sports products could use these palettes:

Second step: ✔

3. Build Up Your Color Palette

Now you need some more shades of your colors. A white background and black text is actually implemented very often but it is never a good choice. Black and white don't exist in nature nor in your surroundings. Neither choose absolutely black or white in your color palette. Instead, pick a very dark or very light shade of your main color that is almost black or white. You will notice that it looks like actual black or white but more pleasant.

Your color palette should at least consist of:

primary (font-light - light - main - dark - font-dark)
accent (font-light - light - main - dark - font-dark)
warn

Your task now is to find your shades of the primary and accent color. Just inherit the warn color from step two.

Visit https://convertingcolors.com/, pick a bright, dark and light shade of your primary color and wright down the color codes. Then pick a very dark and very light shade of your primary color for your font (for best results, pick the darkest and the lighest color that is not absolutely black (#000000) or absolutely white (#FFFFFF)) and write it down. Repeat this step for your accent color.

Note: It is not always a good idea to simply pick a lighter and darker shade of exactly the same color. If you see a lack of e.g. blue in your darker shade, add some more blue.

If you want to apply your color palette on the material theme (or a similar framework) you can test it on https://in-your-saas.github.io/material-ui-theme-editor/.

Examples

This is a final example of a color palette for e.g. a sports products website. The color accent-dark is a little more red than the rest of the accent colors.

Third step: ✔

What's Next?

Now you can apply these colors in your mockUp. When implementing a webApp you will likely use CSS (or SASS/SCSS/LESS). I recommend putting the color codes into variables and swap these into a separate file. The example in step three uses the syntax for variables of SASS/SCSS. When using the Material framework, you can also override the Material Theme.

After building some elements on my new website I usually make a few corrections in my color palette, because only after seeing the colors in the final design I can decide if e.g. the accent color is bright or the contrast between my primary and accent color is high enough.

I hope you enjoyed this article. Thanks for reading!

Any ideas or feedback?

I would like to know your thoughts and experience related to this topic.

Do you like this article? Follow me on Twitter and don’t miss any future posts.

Why you have to change your approach to UX as a programmer

Claudia Wu. — Thu, 21 May 2020 21:15:58 +0000

Photo by Taras Shypka on Unsplash

Every time a human wants to interact with a computer, one need some kind of software that provides a user interface. This concerns desktop software, native mobile applications and websites. Information and content is visually processed in order to become legible and intelligible to the user. The average user has no idea about data and functions behind the scenes. Thus the only interface between him and the software features is the graphical user interface.

Importance of User Interface Design

User Interface (UI) and User Experience (UX) are currently popular buzzwords in the field of frontend development. The User Experience Design defines improvements of the overall user experience while interacting with the Software, e.g. number of clicks from the start page to the target action or the simplicity and clarity of the navigation. The User Interface Design focuses on the presentation and interactivity of the application , e.g. branding and fanciness. There is a fluent transition between the two — one can not work without the other.

If you want as many users as possible to use your application, you have to think about UI / UX Design. Thinkwik summerized the importance of UI/UX Design perfectly in his blog post:

The primary goal of any business is to increase its sales and increase the growth of the business. UX/UI Design plays an essential role in achieving this goal. The UX/UI Design of the application improves the user experience and customer satisfaction that ultimately helps increase the number of users of the specific application.

Reality of UI / UX Design

The ideal frontend team consists of programmers who mainly deal with functionality and communication with other systems, one or more UI Designers, one or more UX Designers and some stakeholders and users — depending on the project they are working on. If your team looks like this, you are doing well. Unfortunately frontend teams are not always composed like this. Sometimes there are no UI / UX Designers, sometimes the project is very small and so is the team, sometimes the UI Design is provided by an external agency or the customer thinks he doesn’t need a designer. The minimal team usually consists of at least one or more programmers. Thus the programmers learn how to develop a good user experience — or they don’t and the final product looks and feels like a website in the 1990's.

My Experience

I joined the minimal type of team several times. Me and my team mates implemented design details we liked most and I noticed that the UI / UX Designs of the final products felt not bad nor good. Interacting with the application felt uncomfortable. None of us could tell why because everything was logically structured. None of us ever dealt with visual design. We all developed tunnel vision.

I began to research extensively about designing user interfaces. I searched for logically comprehensible rules that I can simply implement in the existing project. I hoped to find 2 to 3 very small modifications that make all the difference. Instead I found about 20 heuristics I had to translate into specific changes. Most of the resulting changes felt counterintuitive to us whereas the users liked it. However the improvement wasn’t big enough and I wanted to know why my experience differs so much from the user’s one.

My Method

Whenever I face problems that seem intractable I put on my earphones, turn up the music and move the brain in a relaxed state of concentration. After a few minutes I return to my issue and can see the problem from a new perspective. So I applied this method on testing the user interface. Slowly I got an idea about the downside of being a programmer: The brain always asserts against the intuition. With loud music in my ears I suddenly noted the unintuitive frontend design. Besides, I developed some ideas about improving some design details for the first time.

Brain vs. Intuition

Every time a stimulus reaches the brain the same process is triggered: First it checks some reflexes and intuition. The brain takes for example a split second to decide if the stimulus is life-threatening. Afterwards it starts processing the stimulus on a logical level. Therefor the brain uses acquired knowledge.

Photo by Createria on Unsplash

Similar things happen when a user discovers a screen with his eyes: First it scans the user interface for colors and areas or icons it is familiar with and triggers some hardly noticeable feelings like “there is an important thing in the top right corner” (maybe a call-to-action button?), “there is something dangerous on the left” (a colorful ad?), “the page feels cool” (the main color could be blue) or “this element feels pretty familiar” (whatsapp, telephone or download icon?). Now the brain begins analysing and interpreting texts, borders, graphics and everything the intuition could not completely match. You realize that the borders you see optically separate content and the numbers after a phone icon are a phone number. The heading tells you that the page is about scientific articles.

The phone icon fits perfectly well with a phone number. The blue color scheme prepared you to the scientific articles topic. You do understand the content very quickly because your intuition noticed important details before. Or it didn’t — then your mind has to work harder and you feel increasingly annoyed.

The brain of a programmer

Programmers usually always think logically during their work hours. We develop algorithms, deal with big data, implement interfaces for network communication etc. Our brains don’t get a real chance to rest while working. This means that we analyse and interpret content much faster than the average consumer. We kind of skip intuition. And someone who skips intuition doesn’t consider a phone icon near a phone number nor using different stylings for different content. Adding styles, icons, graphics etc. feels over the top.

The good news: You can bring back your intuition by slowing down your mind activity. Develop your own method to get into a relaxed state. However it is tricky to get ideas to improve design details, even if you notice that something feels uncomfortable. You have to gain experience over time to master developing UI / UX design.

By the way: Creativity happens when you don’t think anything e.g. while taking a shower or watch raindrops running over a window. You can read more at Why We Have Our Best Ideas in the Shower: The Science of Creativity.

Any ideas or feedback?

I would like to know your thoughts and experience related to this topic. Please also leave your job title.

Do you like this post? Follow me on Twitter and don’t miss any future posts.