GUI Mags

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download MP3 (to download, right-click and select Save Target As)
Length: 6 min.

GuiMags was a vendor booth at the STC Summit that caught my attention. I’m often running into people who want me to create WordPress templates to match their websites. Creating these templates is somewhat tedious for me, and it can take 1-2 days of work and haggling with CSS to get it to look right. These GuiMags guys gave me a glimpse at a simpler model.

GuiMags (graphical user interface magnets) provides a quick way to prototype software interfaces and websites without having to step into code. You can work with a customer to get the basic features and design using simple magnets on a grid board, making changes immediately in meetings with customers. After you settle on a design, you can then outsource the labor to international developers to create the templates cheaply. You don’t even have to touch a computer to create prototypes.

To learn more about the GuiMags, see GuiMags.com.

Picture of me and Efraim Meulenberg of GuiMags

This week I caught up with Debbie Campbell, a Colorado web designer and developer and the owner of Red Kite Creative, and asked her about the latest trends in web design. I’ve been following Debbie on Twitter for a while. This week she posted a few tweets about web design and WordPress, so I asked her to share a little more. Read the rest of this entry »

Since I’ve been reading The Non-Designers Design Book: Design and Typographic Principles for the Novice, I’ve started to see the importance of contrast everywhere. The author, Robin Williams, argues that contrast is one of the four pillars of design, and that most people don’t include enough of it. As a result, rather than contrast, they end up with conflict. Williams writes:

A design is in conflict when you set two or more typefaces on the same page that are similar — not really different and not really the same. I have seen countless students trying to match a typeface with one on the page, looking for a face that “looks similar.” Wrong. When you put two faces together that look too much alike without really being so, most of the time it looks like a mistake. The problem is in the similarities.

Read the rest of this entry »

Last weekend I was asked by someone to set up a WordPress blog that would integrate well with his existing site, familyinnewyork.com. I looked at the site and asked why he didn’t just migrate his existing content into a blog, one with a professional design? He said no — he wanted to keep his existing site.

When starting blogs, many people have the same dilemma. Typically, a person has crafted a traditional website with all the navigation buttons, colors, images, and other customizations they need. At some point they realize they want a blog too, but none of the blog themes look like their site. They can’t discard their original site without throwing away hundreds of hours of work. And in many cases, the original site does a good job at what it was designed to do. The owner is only looking to add a blog for search engine optimization and reader interaction. He or she wants the blog to closely resemble the original site, so the reader will have seamless navigation experience. Read the rest of this entry »

Download MP3
Duration: 15 min.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

In this podcast, Dr. Robert Glushko, a professor at UC Berkeley’s School of Information, explains the concept of Document Engineering — the process of developing document models to make information sharing, reuse, or syndication more efficient.

Glushko gives several examples of document engineering, such as creating a calendar event model that allows an event to by shared across numerous calendars. Or a syllabus document model, which allows students to pull specific data from syllabi across the university in unique ways. Read the rest of this entry »

When you begin modifying your blog’s stylesheet or designing your own blog, you may notice that some elements display differently in Internet Explorer (IE) than they do in Firefox. IE is usually the problematic browser, and it’s hard to say why there are so many CSS display quirks and bugs from Microsoft. But there is a quick, easy fix around the troubling display discrepancies.

In short, you create two stylesheets, one for IE and one for Firefox and other browsers. You then add a piece of code in your header that tells to the IE browser to read the IE style sheet. The other browsers will read the other stylesheet.

To create separate stylesheets for the different browsers:
Read the rest of this entry »

White Space is a principle of layout and design well known among graphic artists, but less known and practiced among some technical writers. I have a deep interest in Web design, and white space seems to be one of the first, fundamental principles of design for both on and offline content.

Paradox of White Space

White space also has an interesting paradox surrounding it: The absence of graphics and text plays a significant role in increasing comprehension of the text and of focusing attention on graphics. The absence of content is what draws the eye towards content. The negative, blank space (which possesses nothing) creates a sense of sophistication and elegance. The sense of simplicity and absence of graphics and text is what contributes toward a richer, deeper and more complex artistic expression.

Read the rest of this entry »

Lately I’ve had the urge to abandon my main desktop tools and use online tools instead. It’s not just that some online tools are more capable than desktop tools, but it just feels right to be online. When you’re online, you’re connected, integrated, at home. The world is at your fingertips. Because of the limitations of bandwidth, I can’t fully break free from my desktop, but for many applications, the potential is there. Here’s how I can change:
Read the rest of this entry »

WordPress is already a micro-CMS, but if you have a site that has a lot of pages, it can get a bit cluttered. By CMS, I mean a site where you have an abundance of static pages that you want to manage, rather than just an endless number of posts. You can use a Subpages plugin in your sidebar to make it easy for your users to find the pages. The context-sensitive Subpages sidebar can give your blog more of a CMS feel.

I just finished redesigning the Suncoast chapter site into a CMS/Blog. You can view it here: http://stc-suncoast.org. When you click a button on the top navigation bar, a list of subpages appear. That’s the CMS part.

The subpages are called automatically using Rob’s List Subpages plugin. Here’s the cool part: this plugin works in your sidebar, not just in a page template.

Using this plugin, you can have about 7-8 top-level pages that each have 10+ subpages, and you won’t overwhelm your users with long page menu showing 80 pages at once. In fact, the user doesn’t even have to scroll. The user only sees pages relevant to his or her selection.

(By the way, the original design was the YGO Lonely theme, but I modified it quite a bit. You can tweak any theme into a CMS.)
Read the rest of this entry »

This podcast from Tim and Tom’s Design Critique is a good introduction to Information Architecture. Information architecture involves making content findable, usually in reference to websites. How intuitive is it for users to locate what they’re trying to find or do?

The role of the information architect is to organize information such that the user has no trouble finding exactly what he or she desires, particularly in situations where there are hundreds of pages. The discipline’s roots began with library science and taxonomy, but the term “information architect” is relatively new — the podcast mentions the year 2000 as the time when the term (and professional designation) was introduced.

In the podcast, guest expert Chris Farnum talked about the different roles people play on teams. Some specialize in graphic design, others in usability, others in coding, others in information architecture, others in content, and so forth. Some are able to play several of these roles expertly, and a select few can do them all. Read the rest of this entry »