Home Authors Posts by webmaster

12 POSTS 0 COMMENTS

Wirify.com

What can wirify.com offer you?

  • Step back and see the big picture of a web page
  • Focus on page structure by hiding the content
  • Analyse page layout to aid learning and teaching
  • Wireframes look cool

Wirifying a web page

Once you have installed Wirify go to your favourite web page and click “Wirify by Volkside” in your bookmarks toolbar. The page will be wirified:

Wirifying a web page - Wirify user guide

Tips and tricks for better results:

  • Wait until the whole page is completely loaded before you attempt to wirify it. Wirifying complex pages will take some time so be patient.
  • Once displayed, click anywhere on the wireframe to return to the original page. Click the “Wirify by Volkside” bookmarklet to show (and hide) the wireframe again.
  • For best results adjust your browser to about 1,000 pixels wide. Many websites position hidden elements beside the main content area but these may still show up in the wireframe.
  • Modern web pages with proper semantic mark-up tend to give the best results.
  • Printing is not supported.

 

Go to the website

0 13497
pencilproject

Pencil Project

An open-source GUI prototyping tool that’s available for ALL platforms.

Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.

Overview

Pencil is an opensource GUI prototyping and sketching tools, developed by Evolus based on Mozilla technologies. This tools greatly help business analysts and GUI developers quickly draw GUI of applications to prepare proposal documents for clients to collect requirements, and for developer as a base document about GUI.

Pencil project is one of the effort Evolus to contribute back to the community. Therefore, Pencil is released under an opensource license (GPL) so everyone can have opportunities to use, access to source code for modification and upgrade.

Pencil is packaged as an add-on for Mozilla Firefox 3 or as a standalone application. Pencil is a multi-platform applications and can virtually run on every platforms supported by Mozilla Firefox 3.

Easy GUI Prototyping

Pencil provides various built-in shapes collection for drawing different types of user interface ranging from desktop to mobile platforms. Starting from 2.0.2, Pencil is shipped with Android and iOS UI stencils pre-installed. This makes it even easier to start protyping apps with a simple installation.

Popular drawing features are also implemented in Pencil to simplify the drawing operations.

Built-in Shape Collections

Starting from 2.0.2 Pencil has even more shape collections included by default. The list of built-in collections now includes general-purpose shapes, flowchart elements, desktop/web UI shapes, Android and iOS GUI shapes.

There are also many other collections created by the community and are distributed freely on the Internet. You can easily grab a collection and install it into Pencil with a simple drag-and-drop operation.

Some of the stencil collections that you can try are collected in the download archive.

Diagram Drawing Support

Pencil now supports connectors which can be used to “wire” shapes together in a diagram. A collection of flowchart shapes are also available for drawing diagrams.

Exporting to Different Output Formats

Pencil supports outputing the drawing document into different types of formats. You can have your drawing exported as a set of rasterized PNG files or as a web page that can be delivered to the viewers.

Pencil also supports exporting documents into popular formats including OpenOffice/LibreOffice text documents, Inkscape SVG and Adobe PDF.

Easily Find Cliparts from the Internet

Pencil has a clipart browser tool that integrates with OpenClipart.org to let users easily find cliparts by keywords and added them into the drawing by a simple drag-and-drop operation.

Clipart listed by the tool are in vector format and hence good for users in scaling to appropriate sizes.

Inter-page linking

Elements in a drawing can be linked to a specific page in the same document. This helps user define the UI flow when creating application or website mockups.

Linkings defined in a document are converted into HTML hyper-links when the document is exported into web format. This process creates an interactive version of the mockup in which viewers can see a simulated flow when clicking on the UI elements.

Homepage of pencil

if you would like to visit the homepage or the wikipage:

Visit the Homepage of Pencil Visit the Wikipage of Pencil

Google code page of pencil

If you would like to visit the google code page with extra downloads:

Visit the Google Code Homepage of Pencil

 

Visit the Google Code Download Stencil page of Pencil

 

Visit the Google Code Download Template page of Pencil

 

0 2418
UIstencils

UI Stencils makes tools to help design websites and applications. They are crafted and designed with care and made from durable materials. UI Stencils allow you to quickly generate ideas with a simple, yet comprehensive set of icons and symbols. They release new versions frequently to stay current with changes in OS and components.

Using a pencil and paper is often the best way to get ideas down. Revolutionary products have been conceived on a napkin before taking shape digitally. Their stencil kits pays homage to the fact that ideas flow naturally with pencil and paper. The kits are designed to quickly sketch user interface, user flows, and ideas for how your app might work.

UI Stencils offer in their shop various kinds of sketchpads and sticky notes to communicate with your team and with your client.

What they offer is extensive, from various kinds of rulers, to stencil kits and t-shirts, everything for the wireframing fan.

Here are a few examples of mighty handy tools:

UI iPad Sketchpad

UI iPad Sketchpad

Go to Sketchpad

UI Pixel Ruler

UI Pixel Ruler

Go to Pixel Ruler

Wireframe Shirt

Wireframe Shirt

Go to T-Shirt

Browser Stencil Kit

Browser Stencil Kit

Go to Stencil Kit

If you would like to visit their shop for yourself:

Go to the UI Stencil shop!

0 1260
concept7

Concept7 is a dutch webdesign company, with a focus on human centered design. They offer their own sketching paper with their own idea’s about design. They have a beautiful blog with lot’s of different articles. Too bad they are only available in dutch.

Visual ideas are better to grasp and they stick better in the human mind. Besides that, they are easer to retreive and for the recepient easy to digest. And everyone can do it. You don’t even have to draw like a real artist.

en beter hangen. Bovendien kun je ze makkelijker terug vinden en zijn ze voor de ontvanger eenvoudiger te verwerken. En iedereen kan het. Je hoeft er niet eens mooi voor te kunnen tekenen.

Look, sketchpaper for everyone

This is the official sketchpaper which is daily used at Concept7.

All Concept7 sketching paper

We think by nature in images

By nature, everyone thinks visually, but you are tought differently at school, because you have to write documents. That’s how you develop to learn more in sentences than in images. Some people become so good at it that they still create everything is words in stead of pictures.

Thinking by doing

If you pay close attention to your clients, you will see that the understanding of your ideas is easier by imaging. Your clients will react on them, alter them or adjust them quickly. This is a huge benefit for the creating process. This is what concept7 calls ‘thinking by doing’. In stead of sending an document, which must be read by your customers, the images are light and easy to grasp.

Just Begin

Why don’t you just start with is. For example, just sketch some thing you already made. Don’t pay attention to the beauty of the design, just draw. A square, a circle, a dotted line and don’t be discouraged. And make sure that you are doing this all the time! Give yourself an assignment to get you started. Draw your ideal startpage, or searchbutton. By making your ideals reality, you know where you are working towards.

Sketching from 4 angles

Besides the normal sketchpaper, the company uses also MBTI sketching paper. MBTI reflects the preferences of people. Thanks to this sketchingpaper, you don’t make any descisions on your grounds, but you will think from four different types of people and four different angles. Now you are discovering!

Visual Brainstorming

During brainstorming, the clients and employees have to sketch their ideas. Later in the process you can eventually use this information. It will cast you some time, but the result is a much effective prototype.
Learn more on the website of concept7

0 3663
3flab

3flab is a japanese company for design. They have a website with a blog and different tooling. For the wireframe service they have two different kinds of templates. An iPhone and an iPad sketching template. It consists out of a few templates with 8, 4, 2 and 1 iPad or iPhone sketches on an A4 paper. They call it idea-sheets.

Download templates

the templates are downloadable from their site.

iPhone idea sheet iPad idea sheet

is that all?

Yup! that’s all folks. Not much but just enough to do the trick.

0 1199
paperbrowser

Raincreativelab provides not only beautiful wireframe tools. They also can deliver these templates in a beautiful bundled book.

The goal was simple – to create a wireframe tool that would enable designers to have that perspective. Providing you an actual viewing resolution of your potential user. Looking your site on what the user sees.

Paper Browser doesn’t only provide you with that perspective but adapt on how you work. Enabling you to focus on what you do best.-Design

Quick Sketch

Before coming up with the best possible design, Raincreativelab usualy go through a lot of revisions and design cycle. The Quick Sketch tool answer that need to help you capture those ideas on paper – fast. This tool provides you that great working canvas to work on those designs.

Each box is proportionally scaled to 1024 x 768 screen resolution to put you right into perspective. Each screen are subdivided into width sections (800, 960, 1024) to give you sense of approximations. A great tool to get you started with those creative concepts.

BEST FOR:

  • Quick design iteration
  • Screen flow design
  • Creative Exploration
  • Brainstorming Sessions
4 Panel Landscape 2 Panel with Notes Landscape 2 Panel with Notes Portrait

Detailed Sketch

If you have used Paper Browser before you know what to do next. This tool provides you an approximation tool to guide you translate those quick sketches into a design-ready format.

Your design canvas is 1024 x 768 minus the height of the browser toolbar and status bar. The size has been properly measured to simulate the actual design estate you can work on. Each grid is 3232 in dimension. You can use this data to map out directly into Photoshop during production.

BEST FOR:

  • Detailed Sketching
  • Design-ready wireframes
1 Panel with notes Landscape 1 Panel with Notes Portrait

Paperbrowser

You can buy also the notebook browser in a book-format. To do so, visit the paperbrowser website.

Click here to go to the website!

0 4248
960-grid-system

The 960-grid system is designed to make website in grids.

Download the wireframes

What is it exactly?

960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites. The idea came when designing a website for a student organization where they worked with several designers that handed their lay outs and designs in Photoshop format with a similar grid built-in. After a while they noticed how hard it became to make sure everything looked exactly how they intended it, especially in the different browsers.

960 Gridder is cross-browser compliant and works well in Internet Explorer 6/7/8, Firefox 2/3 and Chrome. Safari 4 Beta and Opera 9 is also working as expected and it should work in Safari 2.x-3.x also.

According to browsershots, all A-grade browsers now display the grid perfectly (version 1.3.1).

How does it work?

960 Gridder is built upon the very famous JavaScript framework jQuery. 960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it. However, 960 Gridder isn’t affiliated with the jQuery authors at all. It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.

By default, it is set to work with 12 columns, 60 pixel wide columns with a 10 pixel spacer left and right of the column, making it a 20 pixel wide gutter (which actually is the ones this gridder renders).Since version 1.3, you can now use shortcut commands to manipulate the grid. Use CTRL + ALT and Z for toggling gutters, X for toggling paragraphs and C for toggling both. UseA to toggle invertion of the grid.

You can see and read about the “960 standard” at http://960.gs.

Where do I use it?

960 Gridder is mainly developed with focus on initial lay out or fine tuning of a website. Therefore, to be really effective it should be integrated into your lay-out. If you however are curious about how different websites did their layout, you can use the bookmarklet.

You can try the bookmarklet for example at Facebookflickr or why don’t you just check out one of their favorite websites,elementiks awesome list of web tools and resources? (Almost) all good things are 960 pixels in width!

To “remove” the grid, once activated, use CTRL + ALT + C or just refresh the page.

Development

The development version is heavily worked on from time to time, which makes it pretty unstable. If you are thinking about implementing 960 Gridder, you are better of with the stable releases. This is however the version you would want to try if you want to see new functionality that is being implemented. The 960 Gridder (dev) version is also available as a bookmarklet, just drag the link to your bookmark field in your browser.
Source code, development version and older versions can be found here.

You can find everything about the 960 system here!

Go to the 960 Grid system!

0 8414
adaptive-path

The sketchboard is invented to communicate quickly with your customers, without a very specific and precise (detailed) level. It can be very handy to confront your customers with your sketch idea’s to reach consensus. After agreement, you can easely work your sketches out to a more sufficient level.

Download the different sketchboards

 

The sketchboard is a low-fi technique that makes it possible for designers to explore and evaluate a range of interaction concepts while involving both business and technology partners. Unlike the process that results from wireframe-based design, the sketchboard quickly performs iterations on many possible solutions and then singles out the best user experience to document and build upon.

Designers love the “breakthrough moments” in a working relationship. Those times when you suddenly reveal a picture of a solution that really nails the problem and gives everyone on the team a reason to cheer. Such moments bring together many of the most valuable capabilities of a designer, as follows:

  • The ability to convey a solution pictorially
    Showing a solution is more vivid and far less abstract than talking or writing about it; pictures are both louder and more clear than words.
  • The ability to presuppose new solutions
    Despite incomplete information about the problem, designers make instinctual leaps to offer potential solutions that would not have been arrived at through deductive logic alone. Designers push the boundaries beyond the obvious alternatives.
  • The ability to fuse together a solution from competing constraints
    Design constraints solved one by one can create an unwieldy solution. Great designers arrange components of a solution into a whole that is more elegant than the sum of its parts.

The trouble is that these moments are all too rare on normal design and development projects. After a designer sinks time into communication, requirements gathering, and documentation, there is precious little time to create amazing results.

Where wireframes fear to tread

The wireframe—default design tool of most UX professionals—is a significant part of this problem. While wireframes are often necessary at the end of a process to clearly document and communicate the design, using wireframes earlier in the design process focuses time and attention on all the wrong details and activities.

Adaptive Path often find UX designers working to define and arrange elements on a page when the real issue to confront may be much broader in scope, such as “Does the page need to exist at all?” or “How best can these series of interactions flow together?” Wireframes force your design solutions into a certain level of granularity that can’t match the big juicy problems you face. A design process starts with struggles against scope, flow and gestalt. Yet wireframes arm you with mere dropdown fields and “lorem ipsum.”

Wireframes constrain your creativity. Given the time it takes to generate a wireframe, they find that most designers can only create one wireframe per page. Then they slowly revise and compromise. Adaptive Path calls this “the inch-by-inch trial-and-fail method,” where a designer slowly adapts his or her first idea for the page until it eventual meets all the criteria thrown at it, but slowly falls apart in the process. Such a process eliminates the opportunity to explore and choose amongst the myriad of possible forms an interaction could take, nor allows you to evaluate which approach might best adapt to the comprehensive set of criteria.

Wireframes also take designers into a hole. Wireframe development typically results in a designer slaving over a screen at his or her desk, not interacting with others, in order to improve upon the work. As documents, wireframes enable team members not to have to interact, which often results in work just getting thrown over a wall.

Simply put, wireframes are too slow and detailed. They aren’t going to deliver many breakthrough moments for you and your team. Instead, designers need to focus the early stages of work on techniques that achieve the following:

  • Ways that focus the designer’s time and attention on the big problems that need solving before tackling the details
  • Ways that quickly explore many different possibilities to find the right solution
  • Ways that can involve others
  • …but yet can still do it all pictorially!

The sketchboard technique unleashes your right brain to find and convey great solutions pictorially. You get:

  • Faster, but higher-quality design iterations that encourage heavy collaboration
  • Exploration of many ideas before investing time in polishing one design
  • Sketching and collage activities that provide design the same speed and focus that agility gives to coding

From a solution point-of-view, the team’s walkthrough of the sketchboard brings us to place where they have got a pretty tight idea of what solutions they need to take forward into a detailed design. A well-reviewed sketchboard is a visual specification of the solution, with certain elements of specific sketches highlighted and circled, lots of notes, and several new sketches conveying the important details they’d made decisions about. Only at this point do we feel we’ve explored enough ideas, confronted the right problems, and received enough team input and perspectives to move forward into the detailed structure of a wireframe.

Originally, they started using sketchboards for the ability to quickly iterate on interaction design, but in the process, they found these additional benefits:

  • Their design solutions are dramatically improved because there are more iterations on the right issues and a lot more people participate in the process
  • They earn greater trust and win buy-in from stakeholders because everyone understands why the chosen solution is the best solution
  • They rapidly move from loose requirements to a clear understanding of what to wireframe and prototype, and consequently, they are able to quickly produce higher fidelity wireframes
  • The sketchboard adapts well to almost any type of design problem they come across, and works well within different types of processes

the whole website about Adaptive Path can be found here!

Go to Adaptive Path!

0 1021
alfonso-bozelli

Alfonso Bozzelli design a very simple, but effective wireframe-template. This template can also be used for sketchboarding. The template is minimal and can be used for communicating with your clients.

To download this template; use the button. Download the template

Is there more than this?

No, actually not. No information about templating, sketching or wireframing. The author is a freelance Web / iOS Designer & Developer. He has kindly shared his templates and that’s it!

you can also check out his website, but not much on this aswell.

Go to the website of Alfonso Bozzelli

0 3324
teehan+lax

Teehan+Lax is a company from Canada which have several tools developed to make wireframing for iOS and Android much easier. With their tools you can exactly make digital wireframes who look like stunning real apps.

Teehan+ Lax Tool directory

iPhone iOS7 GUI template

The PSD is a well organized, labeled and layered PSD full of editable shape layers. Most people find it useful for mocking up apps. Others use it to concept ideas or create custom interface elements that work harmoniously with those native to iOS. Whatever your use, we hope you enjoy it.

Before you get started, you’ll want to become acquainted with some of the support documentation that Apple has put together over at developer.apple.com (login required). PDFs like the iOS HIG, UI Transition Guide and UI Catalog will help you become familiar with how and when to use these elements.

Download the iOS7 iPhone GUI

iPad iOS5.1 GUI template

The iPad PSD is well organized, labeled and vector-based—Just like the iPhone version. Download it using the link above and go make something amazing.

In 2008 they released their first iOS PSD. Over the past four years they’ve been downloaded millions of times. They continue to do it, not only because they find useful, but because they think a lot of other designers do too. It’s become their little thank you to an industry that has given us so much.

New in this version
  • New iPad Retina sized to perfection
  • iOS 5.1 elements
  • Completely rebuilt for retina
  • Pixel-perfect snapping

They are developing a new version of the iPad template

Download the iOS 5.1 iPad GUI

android GUI template

This Photoshop template makes it easy to mockup pixel-accurate Android app designs. They stopped developing it, but you can still download the GUI kit.

Download the Android GUI

iPad Sketch Elements

Helpful for sharing or presenting interactive concepts without having to create polished mock-ups. They stopped developing this aswell, which is too bad, because these templates were very functional.

Download the iPad Sketch Elements

iPhone Sketch Elements

Helpful for sharing or presenting interactive concepts without having to create polished mock-ups. They stopped developing this aswell, which is too bad, because these templates were very functional.

Download the iPhone Sketch Elements

 

The company teehan+lax offers a lot of templates for the design and mockup for mobile development. Thanks to these kind of companies, the community can benefit of these stunning templates.

Visit the site of Teehan+Lax

STAY CONNECTED

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close