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

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…

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…

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.

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

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

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.

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. …

Note: The spelling of Publissh is intentional.

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…