web design

Prototyping Responsive Typography

  • Post author:
  • Post category:Design

By viljamis.com: Prototyping Responsive Typography:

Basically, a typography prototype is a single web page that consists of the project’s actual content. It’s designed in the browser using real web fonts and tools like Typecast. A typography prototype includes font choices, styles for the basic text content and a typographic scale, but nothing else.

All our decisions should start from the content out, not canvas in. This means we shouldn’t start doing any design work before having the project’s actual content on hand (or something that is very near the actual content). That’s because the content and the language used has a big impact on how our typography will work. This is especially true with display type and headers, but also with paragraphs and line-lengths. Having the real content also helps to judge if the font choices fit the mood correctly.

Very nice instruction on how to prototype for typography as a part of design.

Continue ReadingPrototyping Responsive Typography

Online Housecleaning

I’ve been doing a lot of housecleaning, site-wise over the past several weeks. I’m in the process of converting over some of my older blog sites to wordpress, shuttering others, and putting up fresh new “coming eventually” pages at all of the URLs I own. I’ve been playing with Foundation by Zurb as a CSS framework, in preparation for working on a portfolio of my design work.

Electrasteph.com has fresh new face. It’s pretty bare bones and needs a little more style, but for now it looks better. I’ve never used it for much except listing out the various sites I own.

I’m struggling with making my fortune cookie site do what I want. I’d like to be more than a blog site, but the template I’ve chosen seems to want to fight with me. I’ll get it done eventually.

Continue ReadingOnline Housecleaning

Style Tiles

  • Post author:
  • Post category:Design

via Style Tiles.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Continue ReadingStyle Tiles

SxSW 2010 – Saturday Recap

Web Content Management Systems from a Designer’s Perspective

The Right Way to Wireframe, Part 1

4 different interaction designers took four different tools to prototype with. A number of things stood out for me:

1) Balsamiq is probably the wireframing tool we should be using.
2) They have a longer research/prototyping phase and peer reviews prior to showing work to clients.
3) There is a clear distinction between Interaction Design roles and visual/graphic design roles on all 4 of the teams involved – the two are separate people.

CSS Framework Shootout
The did an overview of four major CSS Frameworks. some of them we’ve already been playing with to consider possibilities of making our CSS cleaner and lighter. Lots of good information there. I need to explore OOCSS more closely because I think it may be the approach we take going forward.

CSS3 Design with HTML5
Lots of cool new stuff you can do with html 5 and CSS3 – doesn’t have complete cross-browser support, so we’d have to consider progressive enhancement and whether that would work for our clients.

CSS and Fonts: Fluid Web Typography
Jason Cranford Teague
My favorite panel so far. On Typography – the major change this year is that more browsers are starting to support embedding font types, so @font-face will work in more browsers. There are still EULA issues to think about, but this opens up new possibilities for us in terms of design.

Continue ReadingSxSW 2010 – Saturday Recap

SXsW 2010 – Friday Recap

Two panels that we were able to make it to after flying in today…

Getting Stoked about Web Typography
Samantha Warren
Went over a lot of stuff I knew already about finding inspiration in typography – but it was refreshing since we really back-burner our typography in our designs, partly because of the technology concerns. She covered more inspirational ideas than technical application. I like designing around typography and wish I could use more of it in our designs at work. She stepped through a bunch of URLs I captured – I’ll go back and take a look at them when I have more leisure time. She urged looking outside web design for inspiration on typography – she uses the skate and surf communities for inspiration.

She over-viewed several techniques for introducing fonts beyond the standard browser fonts but noted there were other panels diving into the more technical side. I still suspect there isn’t a great solution for our companies work yet – the cons seem to stack a bit to high for accessibility in some cases, and for dynamic content in others. We also have the hurdle of EULAs – taking a font license cost onto our sites could be a challenge. But it’s definitely an area I want to play around more with – I’ve done typekit work on my Naptown Argus site – I want to try out the @font-face solution.

Simple Steps to Great Web Design
Matthew Smith
He only got through a bit before the firebell rang –
Know your client
know their audience
know their content

All pretty obvious stuff. He may have been building towards a crescendo, but I would have had to climb three flights of stairs and squeeze into a crowded room to find out. 🙂

In General
Way more crowded than it was in previous years. Some panels you can’t even get into unless you arrive WAY early.

Lots of interesting marketing going – 3D barcodes everywhere on posters, badges, etc.

Continue ReadingSXsW 2010 – Friday Recap

SXSW 2010 Prep

I’m taking off on Friday for SXSW in Austin, Texas. I’ve been there a couple times in the past in 2007 and 2008. I’m having a bit of anxiety about the trip after the doozy of a time we had in 2008 (stuck on a plane on the tarmac for 6 hours in Dallas, then driving from Dallas to Austin) so I’m kinda keyed up. The weather forecast is much better this year, but then again, it was fine last time, too. 🙂

But I’m trying to stay optimistic about the trip; it couldn’t possibly go as bad as last time, right? I’m hoping to learn a lot and see a bunch of cool new stuff. I need to do a bunch more prep work; this time I’ll have a much better camera with me, and Austin is a really cool city.

Continue ReadingSXSW 2010 Prep