Angeles, Michael

Thought it was time for a new art project. I'm calling this one the Weekly Notebook. The idea behind this project is to create a notebook a week. I'm going to use recycled papers for the covers, and various papers for the text block.

This is the first one in progress. It's got a page recycled from the Lomo book. It hasn't been bound yet, but I'm going to bind it with Wire-O double rings.

I'm pleased to announce the first of a series of products that I'm producing for creatives involved in design for the screen. The first 2 products are graph paper notepads formatted for user interface design and design of time-related sequences.

The Wireframe Graph Paper Notepad is made for visual designers, interaction designers, and information architects designing for the screen. The notepad has 50 sheets at 8 1/2 x 11 inches on white 70# paper, glued on the left side. The ink is a non-photo blue (cyan) so that the grid lines and any sketch lines made in non-photo blue pencil can be knocked out when scanned and processed in graphics software.

The Storyboard Notepad is made for creatives who think about interactions over time, whether doing user interface or interaction design or planning video, film, and animation sequences. The notepad has 50 sheets at 8 1/2×11 inches on white 70# paper, glued on the left side. The ink is a non-photo blue (cyan).

You can find out more about these products at http://konigi.com/store. Due to several large advanced orders supplies are limited.

I welcome your feedback!

I spend a lot of time sketching interface ideas on paper. Typically I sketch wireframes and storyboards on graph paper, then redo the final documents in OmniGraffle. But lately, I've been using paper for more than just sketching. Now, after spending time sketching ideas and working out design issues, I start to do higher fidelity drawings on paper, scan them, post them to our system. We discuss and iterate, and the process repeats until we're happy, and I spend less time pushing pixels around.

As a result of this method of working, I've been wanting my graph paper to be more suitable to the way I work and the kinds of drawings I do. So I've come up with the different types of graph paper. You see here. You'll find styles for wireframing user interfaces, story boarding interaction, and plotting values based on simple criteria using a two by two grid. We throw in a basic grid got anything else that might come up.

These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are photo-safe, so they won't show up when you scan them into your computer. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.

So if you're interested, find out more about Konigi Graph Paper or download these for your self.

Victor Lombardi of Smart Experience and I begin DAKISSA, a podcast that looks at innovations in interface design. You can view the podcast on Konigi or at dakissa.blip.tv where you can subscribe via your RSS reader or iTunes.

This week I'll be starting another new stage in my career, as I take on the role of Director of User Experience at Traction Software, Inc, marking my return to the subjects you've read me blogging about in the past: design of information retrieval and content management systems, knowledge management, and social networking and social software for the enterprise.

It's with great pleasure that I return to work on the application I used as a client, and to the team that I contributed some interface design work to over a year ago as a consultant. You'll be reading me return to blogging about the topics I mentioned above, but this time from the design and product development end of the conversation. Previously I wrote mainly about grassroots needs for social software and km and how blog/wiki tools meet these needs. In addition, I expect to show details of the application and its use for various forms of personal and enterprise knowledge management. I've used this tool in the past on a range of needs, including serving as a tracking system for usability testing issues, documenting project information (wiki style), and simply for logging my own projects and todo lists (personal km style wiki).

There will be more to come. I look forward to sharing with you.

I updated the OmniGraffle Web Design Template.

This web design template for OmniGraffle Professional provides the basic layout for a design deliverable including the following master canvases: document title, section title, wireframe (portrait and landscape), storyboard, and blank. The wireframes were created at 950px wide with guides following the Blueprint CSS Grid system. Wireframes also have 2 small hairline marks around the 600px point to mark the approximate fold. Go grab it here.

After about a 4 year break from blogging about information architecture on iaslash (my last post there was 11/2003) I've decided to return to blogging on a wider range of user experience topics. The new blog is called Konigi. Here's a snapshot of how it looks today:

The word Konigi means "to make known." Before I started on this project I wanted to find a way to focus on doing some sort of personal knowledge management related to web design, and somehow I ended up doing this site. I can't tell you how happy I am to have finally found a way to combine my interest in KM, Design and UX, and Blogging into one project.

Herw's what you find on the site for now:

• Interface: A gallery of user interface and interaction examples that are both conventional and accepted solution as well as innovative examples that push the use of medium.
• Design: A gallery of sites that can be described as influential, innovative, and effective at representing their brand and purpose. Visitors may submit designs for inclusion. The submissions that get the most votes will be included among the featured sites.
• Notebook: This is the more traditional blog, pointing to UX resources. For now I'm going to keep the writing lean and succinct. This is also the place where I'll be posting the Collages (Command-Shift-5) I play with occassionally and post to Flickr.
• Function: This is a competitive analysis section that I'm working on and hope to release very soon. Hopefully these pages will start appearing in the Spring.

When I started this project a few months ago, I thought I'd simply be starting a blog or wiki, but somehow it evolved into a more focussed portal of sorts with lots of screenshots. I got my hands on Skitch and started posting screenshots to Flickr. I started a new job last year and found myself taking screenshots a lot more and write a lot less on urlgreyhot. All the little experiments using Skitch on Flickr forced me to organize things and separate these screens from those Ipost to urlgreyhot. This is where Konigi comes in. Hopefully it will keep this stream of screenshots in order so they're findable and reusable by others in the UX community who may be interested in them.

I'd love to hear your feedback.

I made some minor modifications to the wireframe stencil/palette adding some new label markers, cursors including a hand pointer with tool tip, an AJAX spinner, a drop-down/selection menu with options showing, and a sizable window element.

Download the new version from the Wireframe page.

The previous grid article dealt with how to come up with a CSS strategy when you're working with another visual designer's comps. Now I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template.

Creating the design grid

I recently redesigned this site because I wanted a layout that provided larger areas for my content. I needed a system that provided me the flexibility to get creative with the layout, but I also wanted to be sure not to lose control of the order and balance of page elements. While the spare layout of my previous design worked well, the new design would be a little more information dense.

For the new layout I used a grid with a simple division of thirds at a fixed width of 801 px. To get to this width, I played around with different sizes that could be centered within a 1024px x 768px browser window with ample white space on the sides. I targetted my maximum width around 800px.

I started by dividing up 800px into thirds and had an approximate width of 267px per third to play with. I borrowed the idea from the MIG design of using a 3 pixel border to separate each division. This odd-sized gutter makes room for 1px vertical border lines with 1px of padding at each side if I need it. I kept sub-dividing the thirds and after a bit of tweaking came up with the grid below. Each little pink box is 1/12 the width of the page (64px wide). 4 of these side to side make up a third of the width, which I would use for normal column of text. 2 or 3 of these side to side would be nice for a narrow column.

Screen shot of the grid (shrunken to fit)

So now I have a grid that could easily be divided into the thirds I needed to make a multi-column layout. This gives me a very simple grid to work with and I don't think I'd need to have smaller grid divisions for blog themes. Next step is to start looking at layout sketches I had in mind and think about how to turn them into XHTML & CSS. The visual design I'm basing this demo on is an old theme I once used on my blog, with a little modification of the graphics and color palette. You can see a screenshot of the old theme (it's the one in the upper left hand corner).

Turning boxes into content areas

To get started, I think about the page elements I want to use. I want the page to have these parts:

• header
  • logo
  • graphic element
• body
  • weblog content
    • blog entry
      • entry metadata
      • comments
  • local navigation
  • advertisements
• footer

I have some hierarchy of elements established in this list. You probably won't need to jot down a list of elements like this to do a weblog layout, but it helps to show where we're going.

Using the list as a starting point, I start to think about where I want these elements to go on the grid. You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.

Wireframe of content areas

Above, I took each of the page elements and blocked them out. We're going to take the wireframe and create the visual design elements for the page and design the layout of the content blocks.

Visual design comprehensive sketch over grid

As I'm doing this design, I realize that I don't actually need 3 grid blocks for the ads, so I use 2 instead. The layout is looking good to me so far, so now I start thinking about how to turn the blocks into CSS.

Turning content areas into CSS elements

Working with grids makes it easier to visualize a strategy for the CSS layout. I start by thinking of the hierarchy of divs that will make up my page wrapper and all of the child divs nested within it. I'll label those in the wireframe to show what I'm thinking.

As you can see, I'm going to enclose the entire page in div#wrapper. The rest is a bit like a sandwich. On the top, I put the #logo and #graphic in div#header. On the bottom, I have div#footer with my copyright info. And sandwiched in the middle is div#main which encloses the 3 column layout of #localnav, #content and #ads.

Next I go about measuring each content block and recording it's dimensions. I'm mainly looking for widths here except for the header, where I actually want the height as well. Heights will, of course, stretch vertically in the div#main. I measure the #header out to be 801px wide by 131px high. In the screenshot below, I show how I get the dimensions of #logo using the Info panel in Photoshop. I do this to each content area, getting fixed widths for all the areas.

Creating the style sheet for the layout

Constructing a shell

When I'm done gathering my measurements, I can start to construct the stylesheet. I start by creating a barebones shell that will look a bit like our wireframe. First I record the main divisions in my CSS file.

Then I put in all the dimensions and positioning. To test my sanity and the precision of my measurements, I put the grid into the div#wrapper as a background image. The core CSS for the layout is below.

Next I start putting the widths (and heights for the #header) I recorded into the style sheet, creating a shell for the site. To make the boxes lay out precisely, I use left floats for columns and the Position Is Everything easy clearing method. If you view a demo of the CSS shell you'll see that the boxes line up precisely against the background grid. Things are looking pretty good. Now we have to add the graphic elements from the comp.

Completing the wrapper

We're almost done now with the wrapper. To finish off the wrapper we have to cut up the background graphics and tweak the the widths just a little so that our border backgrounds fit around the grid. Take a look at the wrapper with header graphics and borders in place .

Final touches

It's looking nearly finished now. All that's left is to do the style elements for the HTML inside the major divs. I put in all of the HTML for the template areas. I create the site logo and drop that into div#logo. I add some padding to the columns inside div#main. Finally, I add color and sizes to the fonts. Now you can view the final HTML template .

Conclusion

Grids are very useful for doing even simple blog themes. They give you a solid system you can rely on to lay out your template and evolve it as needs require.

I showed you how I approach layout and site development for a weblog template and gave you an HTML prototype you can convert into a theme. You are free to use the template in this example, I'm releasing it under GPL. I hope this article helps Drupal developers in some way by giving them a process for approaching their theme designs. Have fun theming!

See also: Cutting and sewing grid-based design: Part 1, working with other people's comps

I'm ready to take a break for a few weeks. I've finally updated my portfolio, adding some Lucent work from the past 4 years, and removing some old work. You can see the new stuff by going to the services section and using the Featured Work links in the right sidebar. Was anxious to get that out of the way. I've also gotten some responses out for new project work and can now focus on actual work for a friend and a few personal projects.

The year has had good and tough times. Some things I can do without like constantly getting colds by taking my son out play with his friends every week. I discovered Airborne, but that damned sinusitis keeps finding me. Such is the life of a parent. The stupid car I use only once a week gave me all kinds of headaches. But otherwise, it's been cool. Time really flew by this year.

Some of the things I've been thankful for: finally feeling like I'm learning to paint, rediscovering cycling, rediscovering that I love to make stuff with my hands, getting better at doing site development, accepting that I can do a little freelance and enjoy it, being lucky enough to do work that I enjoy, finally starting to take my finances seriously, being lucky enough to see my friends occassionally, telecommuting, spending every day with my wife and son and living in a city full of wonders.

Upcoming for me hopefully (sort of a to do list for January on):

• hopefully a blog entry about cutting up comps and creating CSS for grids
• more skinning of this site and experimenting with making Drupal skins (some for you to use for free, some possibly for sale)
• getting physically ready for the spring bike season (seriously)
• selling my car so I can bike commute to NJ (who needs the MTA?)
• back to mixing with Traktor DJ Studio
• sewing classes at Make Workshop
• watching more movies
• learning to trackstand
• getting brown in Jamaica!!!

I need more hours in the day.