User experience (UX) is how a user feels when interacting with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).

Rapid Prototyping Tool: Axure

Creates Responsive Interactive Wireframes And Prototypes: UxPin

(more…)

BLOKK is a free font for mockups and wireframes. It helps you create good looking mock-ups and wireframes, where layout is more important than latin words.

When designing websites, you may not have the images you need at first. But you already know the sizes and inserting some placeholders can help you better seeing the layout. Don’t waste your time making dummy placeholder images for your mockup or wireframe.

Fakeimg.pl is a little tool that generates dummy placeholder images with an URL. Choose the size, the colors, even the text.

You just have to put your image size after our URL. Only the first parameter is mandatory. There are options too, you can pass a text, or change some colors. Colors must be hexadecimal, the first one is the background color. The text can be passed with the text GET variable.

Here are some examples you can look at:

img src="http://fakeimg.pl/250x100/" alt=""

img src="http://fakeimg.pl/350x200/?text=World&font=lobster" alt=""

Moqups is a free HTML5 wireframing application for creating wireframes, mockups or UI concepts, prototypes depending on how you like to call them.

Prototyping is supposed to be fast and painless, moqups is a simple to use app that sits in the browser, loads instantaneously, has a distraction-free user interface and produces crisp wireframes that we can immediately share with our peers.

Major Features

• 60+ handcrafted, crisp-looking SVG stencils
• Export to PDF and PNG
• Smart guides
• Snap to objects/grid when manipulating objects
• Locking & Grouping of objects
• Linking to other pages (itemized linking coming soon)
• Icon library covering the majority of use cases
• Markdown support for various stencils

ResponsiveAeon is a HTML5/CSS3 responsive web grid system for creating responsive website designs. The whole framework has only three basic classes: 1-Container, 2-Content and Col, you can create mockups/wireframes and final websites quickly.

This framework has a grid of 12 columns with a width of 1104px, using mediaqueries and packed with PSD, AI, PNG grid templates and sublime text snippets, everything to makes your job easy.

Mobjectify simplifies the task of getting up a quick mockup of your mobile website or webapp.

Use the bundled widgets, to generate a prototype for your site in just a few minutes. Which means you can experiment with actually running designs rather than paper layouts or wireframes.

No knowledge of coding in HTML or Javascript is required, but all your designs are styled using jQuery Mobile which means you can always build up to complex feature rich applications.

If you are going to design a considerably large website, portal or application (large does not mean 18 pages ), you need clear visibility of what is going to be developed and how it is going to be fit in the big picture. You cannot just start designing the wireframe without knowing the actual depth and breadth of the system.

CSSsitemap System (well, not actually a real sitemap system) allows you to design sitemap-like visual structure of the system. It helps you understand the workflow and division of resources all across the system. Based on pure CSS, CSSsitemap System is fast, efficient and clutter-free.

The system is intended for documenting pages in a website in a visual and functional way. It’s very straight forward: pages are presented in a branched format using unordered lists. URL information can be added to any item in the tree for quickly navigating complex sites.

Why on earth would one need monochrome icons? Any idea?

Yes, there are many; there are many reasons to have monochrome icons in your collection. Not just to be used in your wireframe or prototypes, monochrome icons can be used in any regular or experimental design where you do not want colors to dominate your canvas. JustVector Social Icons is a collection of 100 monochrome vector social icons that are designed with simplicity in mind.

Provided in vector format, they are fully editable and scale smoothly so you can give vent to your creativity and modify these icons to fit your requirements. Of course, you can add colors as well.

JustVector Social Icons include a wide range for icons (all social platforms, major web apps, portals etc.) They are completely free, even for commercial use, redistribution or remixing.

Each icon is presented on its own artboard (for more convenient export) – the artboards and paths are all named. The icons are (by default) 90px*90px on 100px*100px artboards (5px margins).

A Wireframe is an important visualization technique for presenting proposed functions, structure and content of a web page.

A wireframe separates the graphic elements of a web page from the functional elements, to visualize and explain how users will interact with the web page.

Wirify is a bookmarklet that lets you convert any web page into a wireframe in one click. It converts all of the elements on a web page to gray boxes, so you can visualize the page as a schematic without content.

Today we bring you, a transcript of our rendezvous with a design mogul from Minneapolis, with a decade’s worth of experience, Ryan Scherf.

Ryan Scherf is a designer, developer, entrepreneur and husband from Minneapolis, MN, USA. He has been a freelance designer for over 10 years under his personal brand: http://ryanscherf.net.

When he is not slaving away at night to his clients, he is pouring his heart and soul into his new health care startup Bloom Health. Somewhere in the middle of all of that, you can also find me on Twitter at: @ryanscherf.

What is your design philosophy?

I try to keep my designs as clean as possible. Whenever I think I have enough white space, I double it, just to make sure there is good separation of elements. Whenever I can, I try to stray away from any of the current trends; you can’t push the envelope by designing the way everyone else is.

Please tell us how you got into web design. What did you study in college and how did you learn to design?

(more…)