How to plan and build a web application
Author: Justin Munro
Here at Bluelinemedia we're known for our user friendly web development but from time to time we need to be creative and get stuck into Adobe Photoshop/Fireworks.
We currently use an internal web app that allows us to track sales and time spent on individual projects. This gives us a better idea of how much to quote, as well as a handy way of keeping everyone on the same page.
Over the next few months we plan to revamp this software and as part of that I decided a new design was in order. I have played around with web design as a hobby for few years now but had never designed a web app.
Layout
Designing the initial framework of a web app is tricky. You often have a large amount of information to display, information which may change on a daily/weekly basis. Putting together a layout that not only looks good but is practical is something that can take quite a few attempts.
I always recommend keeping things simple and minimalistic. Don't crowd the user with lots of buttons, menus and text, just display the necessities. A good way of displaying additional information is on a mouse action, such as on hover, or click. This way additional content is readily available but hidden initially.
Planning ahead
As you click away in your preferred design application try to keep in mind how you're actually going to code your design up. HTML/CSS obviously has its limitations, so is everything going to work when you turn your layered image into the finished website.
Remember content will probably have to be dynamic which limits you on images, fonts and gradients you can use.
Conclusion
You should always have a good idea of what you're designing before you go ahead and design it. Bolting on additional features after you have your design can make it look cluttered.
Don't expect your first go to work out perfectly it make take a number of attempts until you get what you're looking for. You will often find yourself saving a design as a "maybe" and starting again from scratch.
Use plenty of inspiration but don't copy. There are plenty of web design showcases out there, find a few designs you like and get some ideas.