The planning and discovery phase of project development lights the path to a successful launch. It is the process through which foundational decisions are made and the project begins to take shape, if in no other way, than by pencil and paper. Luckily pencil and paper have gone the way of scan-trons and now we can use programs to plan programs.
Here are 3 great resources, all completely free, to aid you as you plan out your next project.
IA – Wire Framing
There are a plethora of wire framing tools available out there. One good option from this list is Lumzy. Lumzy is a completely free flash-based application used to generate wireframes and prototypes.
http://lumzy.com/
Lumzy has all of the basic features you would expect to have including:
- Exporting and sharing
- Strong visual design stage with drag-and-drop, z-index control and multiple select.
- A decent library of content elements categorized for easy finding
The thing I really like about Lumzy is the Theming option. Once you have placed all of your content elements on the stage as you would like you can theme the wire frames including
- Hand drawn
- Macintosh
- PC
Once a theme is selected all elements that would normally be styled by the browser (input fields, buttons, browser windows) take the visual representation of the theme selected.
Color Palette
Ever wondered what a good complementary color would be for the color olive? Enter the Color Scheme Designer.
http://colorschemedesigner.com/
This site takes color and makes matching colors as simple as math. It couldn’t be easier or more intuitive. This web-based color matching tool makes finding a palette easy and, dare I say, fun! Start with a hexadecimal color value as your base and start tooling around on the site.
This site brings a lot of great features to the table including:
- The ability to save and export in multiple formats including HTML and CSS or even a Photoshop palette file!
- Light and dark ‘page previews’
- Hue, saturation and contrast customization
Lorem Ipsum – Mock up content
Generating dummy HTML content for mock-ups can be a tedious process. Up until yesterday it involved going to a Lorem Ipsum generator site and manually placing it into HTML tags.
http://www.blindtextgenerator.com/snippets
I am exhilarated to report that is no longer the case. Featured this month in webdsignerdepot.com’s What’s new for web designers article is a great looking lorem ipsum generator called Blind Text Generator – snippets. This site is slick with its drag and drop capabilities and click to copy. With the pre-built HTML elements and the ability to build out a custom page by dragging into the ‘kitchen sink’ is so simple and so smart.
There are a couple of ways I can see this site improving including more HTML elements such as ‘div’ and allowing the end user to add their own elements for specific-common use. That aside the mock-up code will definitely get you going down the right road and make generating mock up faster and easier.