- Typography is the foundation of great design. Where ever possible I like to make use of the traditional typographic scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72, 80, 96) as mentioned in Robert Bringhust’s book The Elements of Typographic Style. It’s a great way to establish a clear hierarchy and vertical rhythm for your project.
- A 4px baseline grid provides the consistency and flexibility to design for both web and mobile without having to rethink about different measurements.
Posts Tagged ‘webDesign’
White space can be broken down into four elements:
- visual white space (space surrounding graphics, icons, and images);
- layout white space (margins, paddings, and gutters);
- text white space (spacing between lines and spacing between letters); and
- content white space (space separating columns of text).
With each second that passes while a page loads, fewer users stick around. In fact, 47% of users expect a Web page to load within two seconds. If a page hasn’t loaded within three seconds, 57% of users will leave the site. This is a consequence of human psychology: We have an eight-second attention span. (That’s shorter than the attention span of a goldfish.)
“In the age-old debate between beauty and function, parallax scrolling wins the beauty pageant, but fails miserably in terms of function.”
Parallax Scrolling: Attention Getter or Headache? by Jacqueline Kyo Thomas
Responsive Web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. With responsive Web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. But optimizing images, video, third party widgets and more using client-only solutions can be challenging.
At its core, Responsive Web Design is about serving the same HTML to every device and adapting its presentation (mostly through CSS) based on the specific capabilities of the device being used to access it.
Luke Wroblewski: Why Separate Mobile & Desktop Web Pages?
Mother BBC has launched its redesigned News site a few days ago. I want to actually use the site on a day-to-day basis before I express my user opinion. So no comment yet.
I’m however interested in ‘The-making-of’. Paul Sissons, the creative director of this project, explains. His view on the site’s redesign appears rather presumptuous to me. It sounds a biit like ‘You may not realise or not even appreciate it, but rest assured: we spent your money doing the right thing’. And indeed, there are some interesting design considerations, like the new homepage template that allows controlling the ‘volume’ of a topic or story. In other instances, the BBC appears to adapt standards that other news sites already have put into practice a while ago, such as horizontal top navigation, bold typo, and vertical depth (prime example for this site style is the Swedish newspaper Dagens Nyheter).
‘The gradients and textures of “Web 2.0” are gone, and everything is pared down to the minimum required for delivering news.’
‘With an incentive, users will scroll. If that proves a positive interaction, it’s something that could become habitual. So rather than design our indexes and front page with everything at the top of the page, we are encouraging scrolling by putting richer content within stories and towards the bottom.’
‘With Top Stories prominently visible to every user, we allow for more sideways navigation. People won’t have to click back and forth from Front Page to story in order to read the stories of the day.’
Visiting the exhibition Van Doesburg and the International Avant-Garde at the Tate Modern, I was struck to see something like a website wireframe in a small book from 1930, ‘Gesetze der Bildform’, by the modernist artist Kurt Schwitters.
On these two pages he compares / contrasts orientation with advertising.
Orientation / Advertising … (Orientierung / Werbung)
- Static / Dynamic … (Ruhend / Bewegt )
- No center, balanced, hence stable / Distinct center, hence radiating … (Ohne Mitte, daher ausgeglichen / Betonte Mitte, daher austrahlend)
- Passiv / Aktive … (Passiv / aktiv)
- Objektiv / Subjective … (Objektiv / Subjectiv)
- Vertical, horizontal, rectangular forms / Parallel, any shape … (Senkrecht, waagerecht, Vierecke / Parallel oder schraeg, jede beliebige Form)
- Parts of the same type; the negative of each part is essentially the same as its positive / Parts of different types. Negative and positive are essentially different, like conkave and convex … (Teile gleichartig; das Negativ jedes Teiles ist im Wesen gleich seinem positiv / Teile verschiedenartig; Negativ und Positiv sind wesentlich verschieden, wie konkav und konvex)
- hence – providing orientation / hence – advertising, aggressive … (also – orientierend / also – werbend, aggressiv)
The rule of thirds (aka Golden Ratio, going back to what is known in mathematics and architecture as Phi) is a common guideline in photography. It states that if you divide a panel (screen) into thirds, horizontollay and vertically, thereby creating nine equal parts, the viewer’s attention will fall on objects placed near the line’s four points of intersection.
Anthony T. Holdener (2008) Ajax: The Definitive Guide, Sebastopol: O’Really