Jan 18 2011
Designing websites is fun. It starts with an idea. From there you describe in words what the site is supposed to do. Once you have the basic concept fleshed out it’s time to begin with design mockups. These take many forms, the most rudimentary of which is good old fashion pen and paper. Figuring out where to put various frames and how consoles should be laid out are the first steps to bringing your website idea to fruition.
There are many tools to help with this. Amongst the most robust is drawing them from scratch with Adobe Photoshop. Perhaps more feasible alternatives are Adobe Fireworks, or any products from their Creative Suite. These solutions are not only expensive but also have fairly substantial learning curves. In the early stages all you really want is a mockup- a rough design of what will go where.
Frame Box is a new way to create mockups. They provide a simple set of tools to bring your fledgling website idea through its first design iteration. It allows you to create mockup designs in minutes with a minimal amount of effort.
The tools that Frame Box comes with are as follows: Box, Text, Text Header, Text Box, Text link, Button, Text Input, Text Area, Radio Input, Checkbox, Select, Horizontal Line, and Vertical Line. That’s it! Now, I’m sure someone is thinking it sounds a bit limiting. To that I answer- Yes, and that’s intentional. When it comes to designing a site it’s much preferred to sort out the functional design prior to adding the colors and graphics. Frame Box is designed for the early stage mockups. Thus, it doesn’t let you accidentally get distracted thinking about whether something should be blue or gray, large text or small text, Helvetica, or (gasp), Comic font. It’s a thoughtful set of tools for a much needed and often skipped step in the design process.
The process of using Frame Box is easy. Just drag and drop objects onto the grid. They can be resized or moved around as needed. You can enter text into those objects that are designed for text. You can copy and paste similar objects to save time. Frames have two views- Edit mode and Preview. The preview mode is neat since the drop down boxes work, radio buttons can be selected and check boxes checked. Here you can get a feel for exactly how your site would work.
Frame Box comes with one feature that we always welcome. It can be used as a registered user or by anyone who wishes. Frames can be saved and are then given a permanent link. These can be emailed to others who can then make edits or provide their feedback. By registering you can keep all your mockups organized within your account. These can be assigned to a project, for instance, The Magic Button Project, (pictured at the top). For security you can toggle whether the frame can be edited or not.
Getting feedback from others early in the design process can save lots of time, effort, and money. The sooner you vet out trouble spots and see what the basic design should be, the better. Once the coders begin working the cost of redesign goes up immensely. Frame Box allows for this critical step of creating mockups to explore various design ideas. After all, there are only so many different basic design options when it comes to websites. Frame Box gives you the tools to explore them in a simple, easy, fashion.