Skip to content
Search

Design

lastmod 2026-04-27created 2014-02-1950 edits

Design (design; North Korean standard language: dejain) can be used as both a verb and a noun. As a noun, design means the form of a plan or proposal (a drawing, model, or other representation) for various objects or systems (blueprints in architecture, engineering drawings, standard business processes, circuit board diagrams, sewing patterns, etc.), or the result of putting a proposal or plan for making an object into practice. As a verb, design means making these. There is no generally accepted, unified definition of design, and the term is interpreted and applied with various meanings in different fields. The act of creating a tangible object, or the result of that act (glassware, pottery, wooden ornaments, etc.), can also be called design.

  • The term design derives from the Latin designare, which means to indicate, to express, and to accomplish.

In general, a design outcome must effectively achieve various goals at the same time, so design work must consider various aspects along the way (for industrial design, for example, materials, production efficiency, safety, economy, durability, appeal, etc.). To do this, it may go through design research, thinking, experimental models, interactive experimentation and adjustment, redesign, and so on before the creative process. Design as a process therefore exists in many different methods and forms, depending on how the object is designed, the individuals taking part and their fields, and their diversity. In philosophy, design as an abstract word refers to some pattern, or to a meaning that has a reason for existence and a purpose.

Categories

Social networking service

  • Pinterest - A social network service where users post images they want to clip and share them with other users.
  • Dribbble - Dribbble is an in-house development and social networking platform for digital designers and creatives.

Styles

Pixel art

Tutorials

Resources

Tileset

Example

  • Baba is you: 24x24 (?)
  • Cadence of Hyrule: 24x24 (?)

Visual design rules you can safely follow

You don't have to follow them, but these rules are always fine to apply as they are

  • Use near-black and near-white instead of pure black/white
    • Pure black looks unnatural on screen, and pure white is too bright
    • Use #222222 and #F2F2F2 instead of #000000 and #FFFFFF
    • From here on, black/white refers to these colors
  • Tint neutral colors
    • Neutral colors are usually black/white/gray
    • If you use color, add just a little of it to the neutrals (light red instead of grey, dark blue instead of black)
    • This makes the color palette feel more consistent
    • With HSB, adding about 5% saturation or less is enough
  • Use high contrast for important elements
    • Every element users need to notice: buttons, content, etc.
    • Use as little contrast as possible for dividers, drop shadows, etc.
  • Every element of a design must be deliberate
    • Everything, including margins, alignment, size, spacing, color, and shadows
    • When someone asks about a specific part of the design, you should be able to explain why you did it that way
  • Optical (visual) alignment is often better than mathematical alignment
    • Certain shapes are sometimes better presented so they look aligned to the eye
    • Aligning by eye takes practice, but if you do it regularly you pick it up quickly
  • Lower letter spacing and line height for large text, and raise them for small text
    • Applies to all text
    • The larger the text, the less space it needs between letters and lines. The reverse is also true
  • A container's border must contrast with both the container and the background
    • Make the border darker than the background, not a color between the container's interior and the background
  • Everything should be aligned with something else
    • Alignment tells you that things are related to each other
    • If something is not aligned with anything else, it feels like it doesn't belong in the design
    • Ideally, each element should be aligned with other elements by some kind of logic
  • The colors in a palette should have distinct brightness values
    • When colors have different brightness values, they can have a distinct look and feel in brightness as well as hue
    • This makes a better color palette, because the colors don't compete with each other as much
  • If you tint neutral colors, use either Warm or Cool. Don't use both
    • Using both warm and cool colors in the neutrals makes the color palette feel inconsistent
  • Sizes should be mathematically related
    • Spacing between elements, sizes, etc. should be determined by some kind of scale. This helps the design look consistent
    • The example uses multiples of 8 for every element. Spacing is 8/16/24/32, line height is 48/40/24, and text size is 40/32/16
  • Elements should be placed in order of visual weight
    • When a row or column has several elements and some are visually heavier than others (like 2 buttons and 3 links)
    • The visually heaviest element should come first, and the lighter elements should follow in order, ending with the lightest
    • Note that the visually heaviest element should be on the outermost side
  • If you use a horizontal grid, use 12 columns
    • When dividing into columns, 12 lets you use 1, 2, 3, or 4 columns, which gives a lot of flexibility
  • Leave space between points of high contrast
    • Our eyes find the edges of elements by contrast, so we expect space between points of contrast
  • Closer elements should be lighter
    • The closer elements on screen are to the user (the further forward they are), the lighter they should be
    • This applies to light/dark mode as well, because that's how the real world works
  • Set the drop shadow Blur value to twice the distance value
    • If you set a shadow that extends 4 pixels on the Y axis, set the blur value to 8 pixels
    • When an element gets "closer" to the viewer, it's also good to lower the shadow's opacity
  • Put simple things on complex things, or complex things on simple things
    • A complex background (a flashy gradient) works best when the foreground (text) is simple
    • If the foreground is complex, a simple background suits it best
    • Simple on simple is possible, but looks plain
    • Complex on complex creates visual confusion, so avoid it
  • Keep container colors within brightness limits
    • The brightness difference between the background and a container should be within 12% in dark interfaces and within 7% in light interfaces (brightness value in the HSB color system)
    • Found in a study that compared the brightness of containers with the background on about 100 well-designed websites
  • Make outer padding equal to or greater than inner padding
    • A container's inner padding is the space between elements inside the container. Outer padding is the space between the elements and the edge of the container
    • Outer padding should be equal to or greater than inner padding
  • Keep body text at 16px or larger
    • 16px is the default text size in most browsers
    • Text smaller than this is hard to read, so it's safest not to use it for body text
  • Use a line length of about 70 characters
    • Whether the line length is 60 or 80 doesn't matter much, but going too far either way can cause readability problems
  • Set a button's horizontal padding to twice its vertical padding
    • The standard button pattern is wider than it is tall
    • To make people recognize it as a button, it's good to follow this pattern
  • Use at most 2 typefaces
    • A second typeface is a chance to reinforce the concept behind the design
    • It also helps add variety to the design
    • There is rarely a need to use more than two, and doing so can make the design feel visually cluttered
  • Handle nested corners correctly
    • Sometimes two or more rounded corners are nested
    • To make them look right, set the inner corner radius to the outer corner radius minus the distance between the two
    • e.g. If the outer corner radius is 30px and it is 20px away from the inner corner, make the inner corner radius 10px
  • Don't put two dividers together
    • Background transitions, container edges, and dividing lines are hard to tell apart visually
    • Don't let two or more dividers sit next to each other

See also

Favorite site

References

  1. Miniboss_Pixel_art_tutorials.zip ↩

author Zer0 sitemap