Monthly Archives: September 2012

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.

Beginning with ASP.NET MVC 3

ASP.NET MVC 3 logo

If you’re like me and constantly try to learn something new, you surely realized by now that the best way to learn a new, complicated topic is by explaining it to someone else.

For the last couple of weeks I’ve been reading up and trying my hand in C# and ASP.NET MVC. It’s going ok but there are still some things that feel a bit shaky in my mind. This is why I’m writing this post. This is a beginner’s understanding of  ASP.NET MVC.

What is ASP.NET MVC?

What is .NET Framework and ASP.NET?

In short .NET Framework is a collection of technologies designed to help developers build a variety of applications such as rich Windows applications, command line tools or web applications. ASP.NET is one part of .NET Framework used to build web applications. It is an engine that hosts said web applications and a high-level development platform designed as a server-side technology, which means that all code executes on the server.

What is MVC?

MVC is a design (aka. architecture) pattern which can be used to design applications with any programming language. It is based on a principle of separation of concerns. This means that the business logic of the application is separate from the input logic (or interaction) and the presentation logic (or the UI).

Before MVC was introduced as the leading design pattern for ASP.NET applications, it used Web Forms. While Web Forms are still supported MVC is the future of ASP.NET-based applications. The two main advantages of MVC over Web Forms are:

  1. Web Forms use View State and postbacks to create the effect of statefulness. While this make some coding faster (and easier to learn) it also means that every time a page is requested all input field states are send to the server and back. This can result in slow applications (even if they are rather small).
  2. Thanks to the way it is built, MVC gives the developer more control over the code (including the final html markup) and the application’s behavior.
If you want to read more on the topic of differences between the two patterns have a look at the official Microsoft ASP.NET website.

The abbreviation MVC stands for Model, View and Controller.

M is for Model

Model, or domain model, is the heart of the application. Domain is the real-world entities, operations and rules that exist in the industry, company or activity that the application will support. The domain model is the software representation of the domain.  In practice that means that the model part of the application contains domain objects (classes) and methods that store and operate on data.

C is for Controllers

Controllers have .cs extension and their job is to receive and handle incoming http requests, manipulate data in the model and choose the view in which this data should be rendered to the user.  Public methods in controllers are called action methods and these methods can be invoked from the browser through an URL. In MVC URLs do not correspond to physical files. Each action method has its own URL. This means that when user opens /, /Home, or /Home/Index, the Index() action method from HomeController.cs is called.

Controllers also return views by calling the View() method (return View(); – returns default view) which results in creating ViewResult object. This object instructs the application which view should be used to render the data.

V is for View

Views are files with the .cshtml extension. They are used to render html. Views are associated with action methods by naming conventions. Index action method will by default point to index view in the folder named after the controller file in which Index action method is placed.