Welcome back guys to another blog of mine. Today we will discuss a bit bout’ prototyping. Prototyping is basically designing the skeleton of what, later on, will become your application, website,brochure,etc. A prototype web design is really useful cause it can be sent to the customers so that they can see, in a visual way, the results of the meeting you might have had earlier, where a lot of ideas and information, in general, was shared to match exactly all the clients requests.
Personally, now i couldn’t live without it as it saves A LOT of time and if you design it really carefully it can show you if the media you wanna use later on are too big/small, clash on some other object/area, and so on.
Let me give you an example. I want you to check this sketch down here.
That’s how my design looked like before goin’ under a “beauty treatment”.
As you can see I’ve created a section at the top with some links on the top-right, a descriptive area on the middle and a footer that can contain company details for example.
Ok, that’s nothing special, very basic sketch as it was done on an A4 paper with a Pilot pen and a ruler.
But what if we wanted to use the wireframe above to create a webpage for a photography course, with a nice photo as banner, a transparent column on the right and a brushed-metal surface for the section where the content will be put?
Well, that’s what was my plan as i was the designer in charge for the course we launched last week: One Day Photography Course.
And this is how it looks now, after adding content, shapes, images,etc always using the same software package…
Pretty good i’ll say no?
The round icon were edited in PS with a subtile noise filter so that the surface doesn’t look supersmooth but like a brushed-metal one and the same process was applied on the background and then reimported inside the application i was using.
Basic editing that even an editing package like GIMP can’t do.
And now….the question of the day: what software I’ve used to sketch it and rework it it?
Make your choice between the well-known applications you see below for a prototype web design…
- Adobe Photoshop
- Adobe Illustrator
- Adobe Fireworks
- Adobe Indesign
- Balsamic Mockups
- Axure RP
- Wireframe Builder
- GoMockingbird.com website
- Flairbuilder
Got it? Sure you don’t wanna think bout’ it a little more?
Ok let’s see if you got it right….
[text-blocks id=”59315″]
The answer is…none of these!. IF u were expecting me to use Photoshop or Illustrator to design this one, well…probably the fact that they’re the two big names on the graphic market sidetracked you quite a bit.
As some of you might know, I’m a huge supporter of free/opensource software so I had to surprise you in some way by using an unconventional tool that probably you’ve heard of but never tried or never heard at all and you might be curious to test right after reading this post.
Therefore my dearests, today I wanna show you something that I think will stimulate your creativity and will redefine the aspect of wireframing a website, expecially when you’re in a hurry and don’t have your favorite software handy.
I’m talking bout’ Pencil which can be downloaded from here: http://pencil.evolus.vn/en-US/Home.aspx and it’s available for all the platforms and that means Pc, Mac, Linux and also as Firefox add-on.
Infact what I’ll show you today it’s a software that’s completely free, uses XULRunner backend (yes exactly, the same used by all the Mozilla products) and that will help you to create outstanding projects. I’ll show you how to set it up and how to add more stencils to its library (and of course you can create and add your own ones).
Pencil, other than saving in it’s own format, also includes the possibility to export your project as a PDF file, as separates PNG files, as an OpenOffice document and as an HTML project (html-css-whole image, no separate files yet).
One big advantage? All the images and files used for the project are embedded which is a good thing for two main reasons:
- saves you time when loading the project without having you goin’ through harddrives or pendrives to find a missing file
- all the projects can be easily sent to designers and they can start to work/edit them straight away
PROTOTYPE WEB DESIGN – IT’S SHOWTIME!
Let’s set up this little beast 🙂
1)- First step is to download the executable OR the .xpi file , depending the OS you’re on and then install it.
Only for PC users: I can offer you an alternative which is download the Portable version of Firefox and install Pencil on it, so that you can carry around Firefox with you on your pendrive wherever you go and run it on any laptop/desktop PC. Firstly, get Firefox here, install it where u prefer and then install the XPI file. The folder where Portable Firefox is installed now is completely unrelated with your OS, as all the information is saved in the ‘data’ folder and not on the registry or harddisk. So wherever you put it, it will run without problems. I will create a post bout’ Portable software later on as it’s very useful.
PROTOTYPE WEB DESIGN – THE INTERFACE
First thing, the navigation bar. Here you have a big orange button that contains all the menu sections, including the one that let you import new stencils and create new ones. There are also the shortcuts to save the project and export the document, to resize to 1:1 the view. Finally the section where you change font related properties and the alignment of text and objects.
On the left side there’s a section with 2 tabs, ‘Collections’ and ‘My Stuff’. The 1st one lists all the imported stencils while the 2nd one is where you keep your own creations. Nice way to keep things sorted and tidy. Each section can be “minized” so that it takes less space or just cause you don’t need a specific set of stencils for the design you’re working at. In my case I always keep the flags & touchscreen stencil off as I barely use them.
When you need a specific stencil, just click on it and drag it on the main area at the center. Once there, you can resize-rotate it and, by right clicking on it, you can change all its properties such as border/font colour, opacity and more. Some stencil have special features like the possibility to set all or some corners as rounded or to re-adapt the image that you embedded in it as part of the surface.
Finally, the section at the center also features tabs for each projet you’re working at and that’s where the fun happens. The cool thing is that, as happens in Adobe Fireworks or Indesign, you can create a page that will be your main one and link to it all the tabs that contain the others sections. And yes, once you save the project, these are also embedded so nothing gets lost. How cool is that?
PROTOTYPE WEB DESIGN – STENCILIZE YOURSELF!
Now we will import more stencils and templates in our library, so that you guys will have more stuff to develop with. It’s a very easy procedure and doesn’t take more than few minutes.
Download the stencils from the Download area on the main Pencil website and leave them as .ZIP files. This is very important as Pencil imports them as they are.
You can also download some more of these from the links below here, so that you’ll end up with a clone of my actual setup.
For the stencils, have a look here:
Main repository, you can find application and stencils here:
http://code.google.com/p/evoluspencil/downloads/list
Android Asset Studio and UI Prototyping Stencils:
http://code.google.com/p/android-ui-utils/
Stencils:
http://www.userfocus.co.uk/resources/getstencil.html
Layout Grids (960):
http://www.userfocus.co.uk/resources/axure_grids.html
You can also download the templates that you will use to export the document as HTML, OpenOffice and other formats.
They can be found at this link: http://pencil.evolus.vn/en-US/Downloads/Templates.aspx
Download them and install them from the menu section ‘Pencil (orange button)ToolsManage Export Template’
PROTOTYPE WEB DESIGN – ROCK N’ROLL!
The use is extremely simple, all you need is passion and time to experiment with the stencils. It’s really easy to build up a panel and literally make it look like glass by right clicking on it and modify all it’s settings. For the glass effect, just play with the opacity slider for example (i keep it around 75% cause i think it gives the best results).
Just to give you an idea, look at this screenshot.
The blue squarish shape at the top is on the top layer while below it there are other 2 squares, also set as transparent and a rectangle. Each of the shapes has a different gradation and you can still see the bottom one through them. Maybe it’s not that impressive but think at the kind of “see/no see” games you can create while wireframing with Pencil.
Before I’ve mentioned Balsamic, which is another prototype web design software which literally let you design your concept of website with a very pleasant sketchy look. The only downside is the price that a student can’t afford, not to mention a software like Axure RP which license price is set around $750.
Well, even Pencil let you create some nice sketchy designs with the help of the ‘Sketchy GUI’ library, which is part of the main package.
Have a look at how it would look the design above after I’ve redone it with the sketchy stencils:
Pencil also lets you drop images into the canvas and resize and crop them, so you could use it to create the whole design to see how all the single parts fits when put all together.
The transparency level is very good too and you can create some really nice visual effects by tweaking the opacity using the slider in the ‘properties’ section of each shape/object you’re goin’ to create.
On the image below you can clearly see the shape at the bottom through all the other ones that I’ve layered on the top (each of which has a different tone of color that fills it). Note also how the colors blend well together in the areas where the shapes overlap each other.
That’s how I’ve created the glass effect on the top part of the column on my prototype web design.
It’s just a matter of bein’ inspired and a little bit of creativity. No skills required, there more you play with it the more you learn new tricks and create new designs that you can save and use later on.
PROTOTYPE WEB DESIGN – HOW TO LINK PAGES
That’s another feature of Pencil: all the pages that you’re goin to create and that end up tabbed on the main document, can be linked to each other.
The procedure is really really simple.
Let’s say that our design features a main page and two tabs with other two designs that we named “Contact” and “Catalog”.
To link the ‘contact’ tab with the ‘contact’ button on our navigation bar just right click on the ‘contact’ button, move the mouse pointer on ‘link to’ and then choose ‘contact’.
Job done! You’ve created your prototype web design
Now if u wanna export your pages, you need to have the export templates installed (I’ve mentioned it before, scroll back if u skipped the note).
Then, choose ‘FileExport document’ and select ‘single web page’.
Export the whole document (all the pages) and then open it in your favorite browser.
The images are not sliced of course but if you test the links…hey hey! they work perfectly 🙂
So you see, even if you have to test a design structure, you can link multiple tabbed pages and bundle them in a single Pencil project will all the images that you’ve used.
Again, isn’t a Fireworks or a Dreamweaver replacement, but STILL…it let you create a lot of different wireframes and projects and export them in the most used formats.
I think that’s I’ve covered pretty much all the main features.
Now it’s all up to you guys, download it, install the additional files and experiment with it.
And if you like, please link to this article a screenshot of your creations, cause i’m really curious to see what you can came up with 🙂
Thanks for reading this and see ya soon with another blog post 🙂
Adobe Illustrator Course
If you are interested in learning more about Adobe Illustrator then please contact us for more information or click here for full Adobe Illustrator course details.
[text-blocks id=”59315″]
