I’ve just been reading an article from Jeff Veen on a font-embedding technology coming up shortly. We’re going to be in a situation soon where every major browser is about to support the ability to link to a font hosted on a web server, which is downloaded and used by the browser to render text. Although the technology is almost there, legal and copyright issues will take a lot longer to catch up. It looks like this could provide an interim solution, definately worth keeping an eye on.
Archive for the Design category
-
Supporting native browser rendering of custom fonts
-
Deep Zoom in Silverlight
I think this is the most impressive application of Silverlight I’ve seen so far. Also check out the blog post from Scott Hanselman breaking down how it was produced.
-
Wearing body armour to buy milk
There’s been quite a lot of talk in the web development community recently (and a couple of books) about bulletproof techniques / design. The basic idea is to adopt techniques that are as robust as possible and cater for a wide variety of situations without breaking down.
After reading a recent post, I was thinking about Image Replacement techniques in CSS and to what degree you need to take this approach – specifically in response to a technique where you add an additional empty inline element, size it to width: 100% and height: 100%, then set the background image on this element. The thinking is that with CSS on and Images disabled, you still get the text.
That’s where I start to get edgy. CSS is about the visual presentation of content. I think it’s perfectly acceptable for a design to have dependencies on images applied via CSS to work well. Images applied via the CSS background-image are all about visual presentation of content. I can’t quite figure out who would surf now, want the visual presentation of content (i.e. CSS) but not want the images. I don’t think many people are constrained on bandwidth, and they always have the option of disabling CSS to get the raw content and nothing else.
I think attempting to get the hybrid, crippled version of a design to work well is flawed. People have the option to get just the raw content, or the content with a visual design applied. Asking for a visual design without images?? Then adding extra markup to cater for it?? Sorry, don’t get it.
-
Agile Planning
Our team has been using the agile planning process as described in Extreme Programming since the start of the project, and I’m currently thinking quite a lot about how this has been going, and how it should integrate with slightly more formal methods.
The basic idea is probably familiar to most people. New work is measured in terms of User Stories, which are tangible scenarios for the end user. This sets the main focus to be deliverables that make sense to a consumer, rather than the tasks required to implement them. Cards are scored in terms of relative complexity to each other. There are different approaches to scoring cards, but we’ve been working with the simple model – 1 represents the smallest piece of work possible, 2 is twice as complex etc.
Work is carried out in 2 week iterations. At the start of each iteration, there is a budget available that can be spend on new story cards based on the amount of work completed the previous iteration (velocity). The focus about which cards to work on is based on what is most important to the business / consumer. The main thing is that planning work is purely based on the speed at which the team has been delivering.
All story cards are put up and organised on a large whiteboard. One side has a ‘menu’ for new stories that can be picked, organised by category. The other side has the next 2 or 3 iterations, and the story cards that we are planning to work on.
Each card is intended to be a placeholder / memory jog for all of the discussions and thought that has already exists around the team about the designs issues and details of what is required.
This is the basic method we’ve been working with. I’m out of time, so will discuss some of the issues in another post…
I just listened to a NOFX song that made Monday morning seem like a nice, happy thing, just like it should be.
-
Error “…user name, organization, or serial number is missing or invalid…” running Creative Suite
Adobe Creative Suite has a very misleading bug when installing onto 64 bit versions of windows. The details are described here, but manifest as a popup error on running any of the applications saying “User name, organization, or serial number is missing or invalid”. The error is nothing to do with the serial number, but actually about the install path. Beware, and check out the support article if you see the symptoms.
-
New browser
I was just reading a post and someone mentioned offhand a browser that I hadn’t heard of, so I thought I’d share. Shiira is a new open-source product for the Mac based on the Safari rendering engine – details here.
I can only assume that Jon Hicks was involved in the design – look at the logo below, then think about Firefox. I’m not complaining at all – love the fishy logo.
-
Practicals of grid-based design
I just looked through a slide deck from Khoi Vinh from a recent SXSW presentation, and found it really interesting reading even without the verbal commentary. It walks through the approach to a complex portal design, and how to use a grid to achieve balance and order when presenting so much information in a single interface.
I freely admit my own background and personal preference is totally based around complete simplicity, with each interface helping you with a single task. I find it fascinating how to approach putting together a coherent design for a much more multi-task interface. I suspect my own bias is partly based in the fact that I haven’t been educated in grid-based design, so should have a go at something similar to the site that is used for illustration.
-
Pitching ideas
I’ve been thinking quite a lot about the best way to bring an idea to life, in such a way that it can be pitched or easily communicated to a cold audience. Previously I think I’ve worked with the assumption that you either provide a static visual design, or an interactive demo.
A static visual mockup can communicate a lot about the brand, tone, exactly what is important about the service, and generally provide an intuitive reaction about whether you are hitting the right spot.
An interactive demo can generally go much further in demonstrating how a user might go about a typical scenario that your product would be used for. This can really help to communicate the concept behind the product, and how easy or difficult the important processes are.
A data driven interactive demo can be put together quite fast, but you’re still really talking about 2 – 3 days work. In addition, making rapid last minute changes and redeploying to a demo laptop can be a little more involved than is ideal, and it’s quite easy to end up unduly stressed and flapping around.
I’ve had a little revelation about how to make this whole process much more efficient. It’s really much faster to work on a design in photoshop. If you have a scripted demo, then there is a linear path about what you click on, and where you end up. In terms of what you see during a demo, there is very little difference between a real interactive demo, and presenting a linear sequence of images in a browser, set up with anchor elements to allow click through to the next snapshot. This approach is much less work, and allows quicker turnaround and less stress.
The end result looks very similar to a typical person. They see a user clicking elements of a page, and progressing through a scenario. Generally it means that clicking anywhere on the interface will progress to the next page. If you require a little more control, you can add anchor elements, style them to have dimensions and absolute positioning to overlay the main image and provide hotspots. This can provide conditional branching in your demo – for example, clicking the logo to return to the start of the demo from any page.
It feels a little like cheating, but is actually much easier and allows you to focus more on the design, and the aspects of the service that you want to capture and present.
-
3D modelling from flat photos
I’ve just been nosing around quite an interesting site based around technology to extrapolate a 3D model from a flat photo. They work out which elements of an image are vertical, which relate to floor or ceiling, construct a simple 3D model, then texture map from the original image. It’s worth watching the intro video to get a feel for how it works.
-
Highly Original Charity
I just came across The Darfur Wall site and I’m really stunned how effective such a simple idea can be. There are 400,000 numbers, one for each person killed in the Darfur genocide. Each dollar donated lights up a random number. You can zoom in or out to get perspective, or view an animation of the lights coming on over time. Go and look.
