Best responsive grids3/23/2023 A user might be looking at multiple windows on a tablet or an ultrawide desktop monitor. NOTE: It's worth remembering that a small viewport doesn't necessarily mean a small device. Apple continued to make 320px iPhones until 2016. The 2007 iPhone was the device that really kicked off the responsive design revolution, with its 320 × 480px screen. If a design works at ~320px, it'll probably work everywhere it needs to. Lots of us used 320px phones for years without problems so I generally start around there, even though that's small by today's standards. Because Utopia will scale a design up to suit any viewport, it makes sense to design the screens as small as is practically possible. This doesn't need to map to a particular device. NOTE: Although this post is about the horizontal spacing of the layout grid, the same Utopian values can be employed to ensure a design's vertical rhythm stays in tune and the layout will look neat on any screen.Īn example space palette, showing tokens with their respective sizes and viewport widths.Ī good place to start designing a grid is to decide on a viewport width. I wrote in detail about designing with a fluid space palette in another blog post. The fluid space calculator takes that body text size and scales it up and down to generate a palette of related size tokens to use in your designs. I wrote a blog post about designing with fluid type scales. The fluid type scale calculator takes that body text size and scales it up and down to generate a series of size tokens. Some example properties of a step 0 type style. In any case, we call this value "step 0". It usually grows with the viewport width but it could also be a fixed size. The size of this text is the heart of the Utopian system: the centre of gravity around which everything else will orbit. This is the visual voice in which the majority of information will be communicated. Depending on a unique combination of factors including content, audience, and style, a designer needs to specify a handful of properties for the main body text, including a suitable font, weight, size, line height, and perhaps letter spacing. One of the first – and most important – design decisions on any project is what the majority of the text will look like. Step 0: define your body text size and generate a space palette We're aiming to design a grid that smoothly flexes between a small screen and a large screen like this: Over the course of a project we'll be looking to bring all of these related factors into balance. Reviewing typefaces, type scales, content, and components is an ongoing process. I'll describe my process in a series of steps although the reality is much messier. We're looking at the same thing through two different viewports: one small, and one big. Utopian projects include two layout grids, which are really the two poles of a single grid. This is true of breakpoint-based design as well as fluid responsive design, but because Utopia is declarative, we only need to visualise the smallest and largest states, which we call and Everything in between will be displayed according to the rules we set. Our only option with current design tools is to draw our designs at multiple viewport widths because an artboard doesn't (yet) behave like a real browser viewport. Our communication options are limited by the medium. It's like trying to draw all six sides of a 3D cube on a flat surface: we can either draw the cube unfolded, or from multiple angles. In 2022 our design tools are still based around fixed-size artboards, while we're trying to design products which scale gracefully to suit any screen. Utopia is a declarative design approach, where we describe some rules and let the browser interpret those rules according to its current situation. For designers working in tools like Figma and Penpot, though, layout grids remain a helpful way to design with consistent spacing. There's a good write-up at sign describing why we might prefer flexible, proportional spacing over a series of fixed columns when we're building for the modern internet. ![]() ![]() In a design tool, though, it's helpful to set up an underlying grid for reference to keep our designs neat and consistent. With modern CSS, layouts like these can be achieved on-the-fly with display properties like flexbox and grid, without needing to first create persistent grids made of columns and gutters. For example, a main content area and a sidebar, or three equal-width columns of content. This post aims to contextualise the Utopia fluid grid calculator which helps you to define a layout grid by clicking a few buttons.Īlthough each of our users' experiences will vary slightly according to their devices and settings, grids help us position our basic content areas predictably across pages, and consistently align certain aspects of an interface.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |