background preloader

Website Layout, Structure & Wireframes

Facebook Twitter

Responsive Design

Golden Grid System. GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used.

GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. AboutUseCaseMaps < UCM < Foswiki. The Use Case Map (UCM) notation is gaining in popularity and in notoriety. Whether you consider them as causal scenarios, as architectural entities, or as behaviour patterns, they can help you to describe and understand emergent behaviour of complex and dynamic systems.

The basic idea of UCM is very simple and is captured by the phrase causal paths cutting across organizational structures. The realization of this idea produces a lightweight notation that scales up, while at the same time covering all of the foregoing complexity factors in an integrated and manageable fashion. The notation represents causal paths as sets of wiggly lines that enable a person to visualize scenarios threading through a system without the scenarios actually being specified in any detailed way (e.g. with messages).

Where are UCM Models Useful? The notation is intended to be useful for requirements specification, design, testing, maintenance, adaptation, and evolution. On this Site. Home - Pencil Project. 960 Grid System. Five killer ways to break the grid. The Infinite Grid. Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between. We’re designing for an infinite canvas—and for that, we need an infinite grid system.

It’s common to think of responsive design as multiple layouts: mobile, tablet, desktop, etc. The problem is the “in-between” sizes tend to suffer, so we end up with layouts that look great at specific dimensions (320, 720, 960), but less than great for everything else. So while a site may look perfect on your 640x960 iPhone 4, it’s going to be a bit off on a visitor’s Nokia Lumia (480x800), or the 685x308 browser window you have open on your desktop. What is an infinite grid system? States#section2 Components#section3 1. 2.