Category Archives: Web Design

Prototyping with Axure

Prototyping with AxureRecently, I had a chance to try my hand at prototyping with Axure (read: ak shûr). Axure is a software tool used to create interactive HTML prototypes of your apps or websites.

I don’t think that I need to tell you how important and useful prototyping is. But to quickly sum it up, prototyping can be used to:

  • iron out UI, UX and IA design
  • reach an understanding between you and the client about what it is exactly that the software/website is supposed to do
  • exchange feedback between you and your client
  • user test at the early stages
  • estimate development costs
  • bring large teams together by providing a reference points

Of course all these benefits exist only if the prototype can be clear enough and can be built and updated quickly.  And here is where Axure comes in.

How Does Axure Work?

To start using Axure, download the software from their website and follow the installation instructions. You can start with 30 days trial version to familiarize yourself with the product.

Once installed, Axure presents an extended drag-and-drop interface.

Axure drag-and-drop interface

The left-side panel shows the website structure and the website elements/widgets that you can drag-and-drop to the right-side panel, the website’s or app’s body.

Once the widget is in the body panel you can manipulate it by rearranging, aligning, adding text. And because Axure allows you to create interactive prototypes, you can also add behaviors to elements. For example, you can create drop down lists, add list items and show or hide other elements depending on which list item is chosen. Buttons can link to other pages, menus can show sub-menus on hover etc. Very neat.

Once your website or application is ready you can “build it” which basically creates the html code behind the prototype. Now you can open the website in your browser or send the code to other people involved in the project.

Good Things About Prototyping with Axure

The 3 best things about prototyping with Axure are:

  1. Simple and intuitive interface makes it really easy to use the product
  2. You can build powerful and complex interfaces really fast
  3. If you ever need support, Axure offers comprehensive training on their website

Bad Things About Prototyping with Axure

The 3 worst things about working with Axure are…well it’s hard to find bad things really. I guess the interface is designed to speak best to web professionals and designers so if you are nether you might need some help from the training.

And the second drag for me is the price of the software. Most companies can easily afford it but if you are a freelancer you might be hard pressed to gain access to this great software.

Conclusion

Prototyping is an important part of building a digital product, be it a desktop application or a website. And prototyping with Axure is a fast, professional, and powerful way to build complex prototypes. Ergo, if you are a web professional or a programmer and you can afford it, Axure should be in your toolbox.

CSS Frameworks: Foundation

CSS Frameworks: Foundation 3 by Zurb

A couple of weeks ago I wrote this post about css frameworks pros and cons. After reading Dan Cederholm’s critical opinion about ready-to-use frameworks, I decided to check them out myself. This is the first of several blog entries on the topic of CSS frameworks planned for the next while. It describes my experiences with Foundation from Zurb.

General Information

Foundation is a CSS framework developed by Zurb, a product design agency with long years of experience on the web. It is described as

the fastest way to prototype responsively, and to take that code and go right to production.

It features responsive 12-column grid that allows for creating websites for all sorts of devices. Columns don’t have fixed width and scale depending on the resolution and viewport size. The grid allows for nesting down so it can be used to create quite complex layouts.

Foundation also contains styles for buttons, navigations, tabs, forms and even sliders. This means that very little extra css code is ever needed to complete a website. The framework is relatively complex and should be sufficient for any type of website. For more detailed information on available features, check the documentation page.

You can use one of three versions of the framework:

  1. Default CSS – minified CSS file used to build on top of it
  2. Customized CSS – you can customize the CSS you are going to download to change some colors and remove the elements you know you are not going to use
  3. SCSS – you can download and edit Foundation using Sass and Compass

You will also be lead by the hand through the installation (or downloading) process.

My Experience with the Framework

I used Foundation to build a relatively small portfolio website for a creative writer and project manager.

The first impression one get when starting with Foundation is that it is very easy to learn. Great documentation offered by Zurb explains step-by-step how the grid is built, how to use it, and how are the different elements styled. That is definitely a perk, especially for those who reach out to a framework to build quick prototypes.

This impression is further helped by clean, understandable and well-commented CSS code.

The layout was not designed based on any particular grid (which is always a bit of a disadvantage) but Foundation’s flexibility dealt with that issue with little problem.

Due to the variety of styles for different elements that Foundation offers the CSS code is pretty long:

  • lines of CSS code to begin with (including comments and breaks , formated as by Zurb and coming from the customized version): 908
  • lines of css deleted: 377
  • lines of CSS added (including styling for Jquery plugins): 139

Advantages

  • Easy to use and learn
  • Great documentation
  • Exhaustive styling
  • Valid, good quality code
  • Responsive
  • Designed with both speed and user experience in mind

Disadvantages

  • Not useful for small pages due to too much overhead code
  • Lack of comments in the html part of the framework
  • You can build very complex layouts and very different style than the one offered by Foundation with Foundation. But then it is probably easier to start from scratch then with the framework.

Who is it for?

I think that Foundation is great for putting together quick prototypes. It is also a good tool to learn how to build responsive websites that scale gracefully depending on the device. It is also very useful for large but “boring” or template-happy designs like company sites or webshops.

I would however not recommend it for small websites because of the complexity and robustness of the code. Also more alternative websites with unconventional layouts will probably profit from being built from scratch rather then being based on Foundation.

Summary

In short, Foundation is a great and robust tool for building responsive, user-friendly websites. However, it is not for everybody. It is my first CSS framework I worked with so I cannot draw any comparisons but based on my own, personal experience I would probably give it 4 out of 5 stars.

HTML/CSS Frameworks: pro and cons

Recently I’ve been thinking about the way I build websites and I realized that I could get much more effective if I developed some sort of process or method. So, naturally, I turned to css frameworks. But what I found, was a whole lot of discussion and contracting views. It seems that with frameworks, like with…well pretty much everything else on the web, you either love it or hate it.

Proponents of frameworks point out that frameworks organize and speed up your coding. They save time and make you a better web professional. They are also designed to keep the website looking the same in all modern browsers and even deal with the pesky ones (we all know who I’m talking about).

The opposition on the other hand argues that these frameworks are bloated and you will always end up stripping half of the code anyway. Another argument mentions the use of un-semantic and presentational class names.

Being a do-it-yourself kind of girl, I am not super excited about using a ready-made code. After all we all consider Dreamweaver to be the evil incarnated so aren’t frameworks a step in the wrong direction? And can a one-size-framework really fit all? Isn’t it better to spend a little bit more time and treating every website individually?

Dan Cederholm in Handcrafted CSS argues for writing one’s own framework. He gives an example of a very simple, bare-bone code for index.html, master.css and reset.css. He writes that ready-made frameworks are great for learning and quick and dirty prototyping. They can teach you some good code skills and challenge your coding habits. However, for the reasons mentioned above, he does not recommend them for actual development.

It seems that frameworks work for some people and for some types of websites but not for everyone and not always. It all depends on the context and maybe it’s good to have both options to work with. To really have an informed opinion,  I will try (and write about) several of the most popular frameworks. The next post will be about 960 grid system, but I will also look at blueprint and probably one or two others. Unless, during the trial period, any of the frameworks manages to completely change my worldview, I hope to finish this series with a home-made, bare-bone framework. It will be based on Dan Cederholm’s suggestion and what I’ve learned from the other frameworks.

So stay tuned for more on frameworks in the coming weeks.

Coming Soon Pages

I am currently working on updating the look and feel of my portfolio. Because it happened so that in the last few weeks I was asked for my portfolio address and I am really not happy with the old design, I started thinking about using a “coming soon” page.

What makes a successful “coming soon” page? Let’s see:

  1. It needs to be branded/designed to look like the coming page
  2. It needs to explain who you are and what is this website going to be about
  3. It needs to provide either
    • a way to contact you (email/phone/skype)
    • or a way to find you elsewhere online (social networks/portfolio galleries etc.)
    • or an option to sign up for updates
    • or at least a counter showing when is the website going to be ready
And most of all, it needs to be memorable enough for the visitor to want to go back and check it out again.

Below 4 outstanding inspirations I found this week:

Moses Mehraban

Moses Mehraban's coming soon page

http://www.mosesmehraban.com/

Designatr

Designatr coming soon page

http://designatr.com/

Five Second Projects

Five second projects coming soon page

http://fivesecondprojects.com/

Birdbox

BirdBox coming soon page

http://birdboxx.com/

And at the end a bit of resources. A really good check-list-style article from Smashing Magazine on the topic of building “coming soon” pages.