Wireframing for Web, UI, UX design

I see a lot of questions in forums on, “to wireframe or not to wireframe?”; which wireframing tool to use? etc. While things can be different based on the nature of your work, your needs, projects etc., here’s something that worked for me, which I shared recently with my colleagues at West Virginia University. It can work for you, even if you are not in higher-ed.

A wonderful tool called Balsamiq (no, it's not a typo)!
Here is my review of the desktop version of their product called 'balsamiq mockups' that I am using, the other versions have similar functionality. They provide a multi-user, monthly, cloud based option and other plugin options too.
It is free for non-profits and educators, but not for staff in higher-ed, although you may qualify in some ways.

What is Balsamiq?

Balsamiq is a lo-fi (only in looks) but highly functional wireframing tool that lets you create wireframes/lo-fi mock-ups using many readymade UI components, quicker than sketching or in photoshop (yes, even with ready psd UI components), and the best part… make them clickable (ooh!), link them to each other, even without the cloud based model (aah!).

Why Wireframe?

• Let’s look at a scenario: You present the clients (internal or external), a sitemap/site architecture with all the sections, connectors, flow diagrams and what not; perhaps some sketches; a bunch of photoshop mock-ups; explain everything and I bet you still see some confusion during review, content posting (CMS), testing, about which content goes where, why we did this, etc.
• I think, when clients see fragmented pieces of a website/UI model, they may have a hard time putting it together after a while, as they aren’t always working on these as we designer-developers are.
• With linked wireframes, clients can focus on key elements of webpages, functionality, user needs, goals, interface, user-flow w/out getting bogged down with colors, design etc. (you are there to take care of those!). They like the “clickable” aspect, as they can see a quick working model of the key areas/features of the website/app.
• The responsive workflow: We all love photoshop, but as much as we may hate to admit it, the regular photoshop mock-up workflow isn’t cutting it these days with responsive web design. Many of us are probably already trying different things, without even being aware of it ourselves. eg. http://www.wsol.com/a-more-flexible-workflow/ I will soon post a link to my recent experiment on a modified workflow here.
• Wireframing, Styletiles, and now even interactive styletiles, CSS frameworks etc. are getting to be a big help to many of us with the new workflow/process. They are helping me and perhaps many others even "design in the browser" (yes, it isn’t really as shocking as it sounds), more so when you have a specific set of style-guides, color, branding and custom styles/rules for your University or Corporation.
• It is quick and efficient! chop chop and you are done!
  

What do I like about Balsamiq?

1. The lo-fi sketched look but hi-fi functionality which is very conducive for quick and good feedback.
2. Simplicity and ease of use. Just like Photoshop… All the familiar shortcuts and tools you are familiar in photoshop: Zoom-in and out, ctrl-tab to move between docs, group, ungroup, lock, align, distribute centers, smart guides, grid and more, so you don’t have to learn one more new thing, when you have so much new to learn already!
3. Here are some of the key features that I liked in balsamiq:
   
   
   • Great UI library, made even easier by 'quick add'. Start typing browser or button or navigation or icon etc. in 'quick add' input box and it will 'read your mind' and show all options! Just hit enter and customize.
   • Icon library.
   • Datagrid.
   • Mobile UI components.
   • Just start typing 'Lorem' and it will do the rest! Well of course, you can type in more descriptive content when needed.
   • 'Mock-ups to go': Sharing components, controls and GUI elements. You can make additional components and share or use the ones that others have created and shared (think symbol library).
4. Great user-centered customer service from a conscientious company; a ton of resources and support forums.
5. Best part… You can link between mock ups and even bundle/package the whole project into a single pdf with a group of interlinked files and send it over to clients or share it on dropbox etc.
6. By the way, they have gotten rid of Comic Sans in the wireframe and use 'architect' font instead now, so breathe easy!

They (I mean the balsamiq folks, on their blog) even help you figure out what’s for dinner (not cook, though). Unfortunately no help with your taxes yet!!
Here is a link to some wireframes I have created using balsamiq (note that the linking between wireframes only works with the linked pdf document). http://www.behance.net/gallery/WVU-Research-Redesign-UIUX-%28wireframes%29-Screenshots/9527457

Some websites in higher-ed that I admire for their usability, design aesthetic and use of technology

My Design Sensibilities

My design sensibilities and ideology can be best summed up in the words of these great designers. As many of us, I may not have completely achieved these in the past, but my goal is to embody these in my current and future work and I find it refreshing that the current trends (and I don’t mean “flat design”) in web design seem to be on a similar path as well.
Minimalism is not a lack of something. It’s simply the perfect amount of something.
— Nicholas Burroughs
Simplicity is not the goal. It is the by-product of a good idea and modest expectations.
— Paul Rand
We don’t get hired to make pretty things or win design awards. We get hired to solve business problems.
— James Bradley
The problem contains the solution. — Michael Beirut

I think of good presentation/design as not something that just looks pretty/fancy or flashy but one that is aesthetically pleasing with good use of white space, typography, hierarchy, while conforming to web usability, accessibility (especially important in edu sites) and to new knowledge and developments in the field. These websites offer creative solutions to challenging issues particularly encountered in mobile and desktop.
NOTE: I am not the designer, developer of these websites, just an admirer and a learner.
As you may notice most/all of these are responsive websites, optimized to various screen sizes: desktop, tablets and smart-phones.

Carnegie Admissions website

http://admission.enrollment.cmu.edu/

• Highlights their main features without the use of a huge auto-forwarding carousel (which are known to have several usability and performance issues based on latest data). Also the previous and next buttons for features are clearly shown to explore more, although they could be a bit more prominent.  
• Great use of space in back pages with prominent and clearly defined headers embedded within great visuals serving two purposes, conserving space and to define the feel of campus with relevant graphics.
• Responsive website; Scales well on all screens; Search is prominent and clearly defined to chose CMU or admissions site. FAQ, status and contact are easily available on top.
• I like the ‘tag it’ feature to bookmark pages while browsing and to go back to them for review.
• Social media shares are always available while scrolling. I wish there was an Apply now button included in the same way, available right when needed.
• Good contrast and buttons nicely optimized areas for touch targets. The font-size in the copy could be larger esp. important for mobile.

Information Services at MIT

http://ist.mit.edu/start

• As we know, IT websites have the challenge of having to handle a huge amount of content and information to varied groups of users and this website does a great job of presenting such a scenario in a clear and non-confusing way, delineating by color, typography, icons and even gives an option of audience based navigation in the footer. It also handles the dropdown menus very well in the desktop site, narrowing down the options right within content area in the mobile screens.
  

Boston University Today (their news website)

http://www.bu.edu/today/

• I love it when websites that handle large amounts and varied types of content do a great job in making the website look simple and uncluttered.
• A great balance of visuals and copy.
• Great typography and hierarchy and use of white-space which hits the sweet spot to make each section stand out very well.
• I like that the main image is not a carousel/slideshow and doesn’t take up humongous amount of space but offers to view more of those.
• A beautiful understated, minimal and very well done design and layout! The light colored theme helps maintain the minimalistic feel and clarity.
• Didn’t Like: Light blue in links is not a good color for readability (Jared Spool on usability) and it is better to use a much darker blue for links.
  
  

Stanford’s Do Research Website

https://doresearch.stanford.edu/

• Having worked in the research office, I love how the website has consolidated the most common administrative and financial aspects encountered by researchers and presents a large amount of content in a non-overwhelming way with well defined and clear areas to expand content… Progressive disclosure in the right context is good (users get overwhelmed by too many choices presented all together).
• Love how the most important, funding and contact area is clearly visible with good white space and separation as are the tabs with How to etc. items
• Good use of breadcrumbs on the back-page and I like how it shows check boxes to show relevant content for the user in context.
• Didn’t Like: I am dinging points for low contrast in the top-nav which is not good for accessibility (although it becomes clearer on hover) and the pop-up image-content light box is not fully readable on tablet. I can suggest a better responsive lightbox.
  

Great content and digital publishing

Engaging Content

http://research.duke.edu/

The Duke research website, is one of my old favorites for great engaging content on a website providing a variety of options in multi-media content for the user… videos, slideshows, blogs, features and even faculty blog-rolls for the users to explore. Although it can improve upon its design, I love it for its variety and engagement.

Digital Publishing

https://itunes.apple.com/us/app/ormagazine/id497535480?mt=8

With the future of print magazines questionable, Journalism Students at University of Oregon have shown to be early adopters by making the plunge to Digital Publishing (starting several years ago) and have created a digital magazine of their own with engaging digital multi-media content (not pdfs embedded on web) by collaborative effort of senior students working together as their class project. I had an interesting discussion with their professor and learnt more about their process. This is created as an interactive ipad app with a collection of a set of magazines created by the students each year/semester and is done completely in the Digital Publishing Suite (DPS) of Adobe Indesign.
https://itunes.apple.com/us/app/ormagazine/id497535480?mt=8

Boston Research Magazine

http://www.bu.edu/research/magazine/2011/

Boston Research Magazine has another take on making the magazine responsive and web based v/s the ipad app approach of University of Oregon.

• Note: I specifically prefer the 2011 magazine layout v/s the 2012 as there are several accessibility issues (low contrast) in the 2012 version: The main image in that issue being a bit overwhelming, taking up a lot of real-estate on the desktop version of the home page.
• A great desktop and mobile solution combined into one good responsive website. Great use of typography, hierarchy and color for delineating their content. Good graphics.
• Scales well on mobile.
• I like how the navigation is at the bottom which is known to be ideal for mobile and also works great on desktop making it quicker to get to.
• Good clear hints for side-ward exploration of more articles (arrows).
• Didn’t Like: Copy needs to be bigger for accessibility reasons and on mobile.