Software Engineering For Web Applications : Outline - Make some wireframes for your software
As developers, once we have an idea, we generally love to start cranking out code. However, this is almost always a bad idea. Whenever I have done this, I have realised that I would have done better, had I started with some basic wireframing and design.
Just the act of thinking about how our product should look, forces us to think of how our users will interact with the product. It also forces us to slow down and rethink what we want to acheive. Sometimes you will realize that something you had not even tought of might be critical for a user, and at times you might realize that the prized feature you have been thinking of, is really not all that great. Such insights are very important, and you would rather have them early than late.
A wireframe also gives you a point of communication with either your customers or peers. I am a firm believer in early feedback, and a wireframe is the earliest feedback you can get on what you are trying to build, even before you start building it.
In this section, you will make wireframes of the web application you want to build. Remember, you are not making a detailed design of what you are building. You are simply making a rough design of the most important screens, the elements, they will contain and the flow a user will go through as they navigate through your application.
Try not to get too much caught up in details right now. Use wierframing as a tool to get usability and design insights into what you intend to build, and a blueprint to guide you as you go about developing your software.
I have listed a few articles about creating wireframes and mockups. Different people like to use different tools for creating mockups. However, the simples tool is a paper and pencil. You can simply draw the screens that you want to make. You can scan and upload your drawings if you want to share them with others. Having said that, there are indeed some tools which will make your life easier. Some are free, whereas some are paid. For your convinience I have also listed a few tools which you may choose to use.
Articles describing best practices for creating mockups:
Tools for creating mockups
Activity 1 : Share your mockups
If you would like share your mockups for peer review, make an album and upload them to a photo sharing service. Then post a link to the album below. Alternately, you might want to write a blog post explaining your designs and embed the url of your album in the blog post. In this case, you should submit a link to the blog post below.
You might want to check out one of these, just in case you are not aware of a good web based photo sharing service.