Sign in

Hello. I write about design, UX, UI, animation, entrepreneurship, art and life in NYC. UX lead Lelantos Press, Artist, UX GA grad, top medium design writer.

They are en vogue and ubiquitous

Fixed, or static, icons and elements are now part of our screen experience, whether users are aware of it or not. For some actions, such as the scrolling-back-to-top, users expect a fixed icon to be integral to a content-heavy site by default. This is indeed the case for most super-complex sites with extensive scrolling.

Fixed screen elements serve the user with a function regardless of the user’s journey at that very moment

Clicking on a fixed icon element is not dependent on any other user action

Fixed icons are often found towards the bottom right corner of the screen, assuming…


Do you like counting pixels?

If yes, you can relax. If no, this is even more important.

A 1-pixel grid illustrating 16-pixel UI elements. Each element is set 16px x 16px, the square in the center with rounded corner radius, and the square on the right with fully rounded radius creating a circle. Designed with XD.
A 1-pixel grid illustrating 16-pixel UI elements. Each element is set 16px x 16px, the square in the center with rounded corner radius, and the square on the right with fully rounded radius creating a circle. Designed with XD.

Pixel-perfect design provides the most precise creative content design as every pixel is accounted for and utilized

For example, a static iPhone X screen viewport measures 375 x 812 pixels, (pixel ratio of about 3). This provides the designer with 304,500 pixels to design with. That is a lot of pixels to create with.

For the design blueprint, or wireframe, screen elements need to be separated into units. Units need be specified either in actual pixel, or in percentage proportion to the device screen size. Maximum user experience, such as tapping, scrolling, and zooming, needs to be integrated into the design elements.

Pixel measurements are…


This landing page is defined by white space. The brand logo is featured in the center of a full color gradient screen, and one actionable button sets the content hierarchy, to scroll down.
This landing page is defined by white space. The brand logo is featured in the center of a full color gradient screen, and one actionable button sets the content hierarchy, to scroll down.

White space is defined as the space on a page without information or data

Conceptually, it is also referred to as negative space. Contrary to its name, white space can be any color, any gradient, or even a full-screen picture, or movie.

How white space impacts information architecture

Making use of white space can be an impactful design strategy, especially when applying a column grid to the information architecture concept.

White space first = Less is more

White space is used to set the mood and tone of the brand. Less information but more space creates greater awareness of what’s to come

Utilizing white space, or…


Design Essentials: Bézier curves

An animation showing a straight line with two nodes transforming itself into a curved line with variations.

We’ve all heard of the Bézier curve. But do we really know how to draw one, how to apply it within applications, how to write it in code, or who discovered the concept? Let’s find out.

The genius of connecting two points by optimizing their control handles

A Bézier curve consists of two nodes with attached control handles. The values of these control handles is used by the computer software to render the curve. Control handles define the shape of a curve on its start- and end points, and can be manipulated by the user within the software.


How to grasp the concept quickly

UX Design Essentials: Atomic design and modular thinking

The concept of atomic design is every visual designer’s dream tool box. It is a simple, modular design system for the digital screen. It uses single elements (atoms) to build entire landscapes (interactive screens).

The system is borrowed from chemistry.

In chemistry, an atom is the smallest unit* which combines with other atoms to form molecules, which then combine to form organisms.

(*Atoms break down into smaller units, but for the purpose of Atomic Design, we will not delve deeper into the structure of an atom here.)

Each atom has a specific shape formed by its properties


A 3-column/3-row grid with designated grid-areas per div, with a Firefox grid overlay. See Figure 1.
A 3-column/3-row grid with designated grid-areas per div, with a Firefox grid overlay. See Figure 1.

Discover the fun of creating multiple grid compositions with css grid-area

CSS grids provide powerful properties to style static and responsive grids. Some come with ease-of-use, others with distinct complexities. One of my favorite property for an immediate layout visual is the grid-template-areas/grid-area property.

In Figure 1, the <div class=”boxes”> is defined in css as a 3-column and 3-row-grid, with .boxes {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 150px 150px 150px;}.

Additionally, .boxes is assigned the grid-template-areas property as follows:

.boxes {
...
grid-template-areas:
"a a b"
"c c b"
"d e e";
}

Figure 1


Random fluid blob shape.
Random fluid blob shape.

Amorphous, vague, and nebulous design icons

How to describe a blob? Just as the noun implies, a blob is a seemingly random, pseudo-organic, shapeless form that is rendered as an iconic vector shape, commonly referred to as svg. In its primary form, it suggests growth and flexibility, boundlessness and expansiveness.


Design your story in columns and rows

CSS grids are powerfully playful. With a few lines of style css and a number of html div tags, a CSS grid can easily implement an elegant responsive design to any screen layout, without it being difficult to grasp as a concept.

Grids have fascinated designers for centuries. And grids are here to stay. Applying a grid to a screen layout builds a solid foundation to the screen design structure.

A grid structure offers infinite variations, especially when considering columns, rows, and gap dimensions as the grid design building blocks

Sketching out a basic square grid with 9 components, we can quickly see how a screen design can benefit from a grid structure. …


Divergent creative thinking and convergent audience feedback

Note: The spelling of Publissh is intentional.

A “Publish” button but spelled with two “s”, and in so doing, representing bliss in Publissh. This not only boosts the writer’s motivation, it also strengthens the bond with the audience.
Putting the bliss in Publissh not only boosts the writer’s motivation, and also strengthens the bond with the audience.

Publisshing is scary. Because as writers, we tend to think more in grand gestures, yet we share less of that thinking through practical application, which is, in essence, writing. Often, we hear that less is more and editing our stories and narratives to the bare skeleton is the secret of good writing. It’s true, BUT, the real secret of good writing is sharing. And sharing one’s thoughts on Medium means only one thing: to hit the Publissh button at the top right of the screen.

As a UX and design writer, I consider…


Default root font display at 2rem.
Default root font display at 2rem.

Root font pixel presets and style measurements

Browsers, such as Chrome, Safari, Firefox, and others, support rem/em units based on their browser root font presets. If the font size is not explicitly reset by the individual user, an 1rem unit is equal to the default browser’s font size. For Chrome v92, for instance, the root font size is 16px. [1]

Rems

The root font size can be set in css as html font-size as 100% of the actual browser default size. This setting allows for optimum scalability and accessibility across browsers.

Thus:

If root font-size is specified as 100% in html:

/* css */html {font-size: 100%;}

Then: 100% = 16px = 1rem

Once the root value is established, font-sizes are scaled in css…

Eva Schicker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store