Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 20 2014

04:46

40 Placeholder Content Generators for Testing Project Layouts

Advertise here with BSA


Both websites and mobile projects often benefit from demoing content. But instead of spending your time slavishly copywriting, why not incorporate Lorem Ipsum as a method to generate filler text? Over the years many websites have popped up to offer variations on this filler content. Even static images can be embedded on-the-fly with these webapps.

I’ve scoured the Internet putting together a collection of 40 intriguing solutions for content generation. There are plenty of text-based solutions along with some image placeholders as well. Most people end up sticking with 2-3 they like the most. But it never hurts to keep a variety of resources in your designer toolbox.

Cupcake Ipsum

cupcake ipsum freebie generator website

Cheese Ipsum

cheese ipsum lorem generator website

Wikipsum

wiki ipsum yellow flashy website design

Ipsum.me

ipsum me webapp generator filler text

Metaphorpsum

metaphorpsum metaphors filler text ipsum

Lebowski Ipsum

big lebowski lorem ipsum generator

IT Crowd Ipsum

british tv show it crowd lorem ipsum generator

Bluth Ipsum

bluth ipsum arrested development generator

Coffee Ipsum

coffee ipsum website generator text

Legal Ipsum

legal policy text lorem ipsum generator

PokéIpsum

Pokémon lorem ipsum generator webapp

Designer Ipsum

designer terms filler text lorem ipsum

Cat Ipsum

cat ipsum feline text generator

Pirate Ipsum

lorem ipsum generator pirate speech terms

Hipster Ipsum

hipster ipsum terms lorem design generator

Fashion Ipsum

fashion ipsum lorem generator webapp

Startup Ipsum

startup text context design generator

HTML Ipsum

html ipsum design homepage writing ui inspiration

SEO Ipsum

seo ipsum lorem text generator webapp website

Space Ipsum

dark space ipsum text context generator

Hairy Lipsum

hairy lip mustache generator text lorem ipum

Corporate Ipsum

corporate ipsum design generator website

Lorizzle

lorem ipsum gangsta text generator webapp

Quote Ipsum

quotes ipsum webapp generator website

Robot Ipsum

robot ipsum generator webapp website

Samuel L. Ipsum

pulp fiction movie text generator lorem ipsum

Fillerati

fillerati faux latin website generator lorem ipum

Hacker Ipsum

hacker ipsum text generator website

Cambelt

cambelt placeholder image generator

Fake Images Please

fake images please website generator placeholder

Flickholdr

flickr holder flickholdr webapp generator images

Lorem Pixel

lorem pixel generator text images webapp

Placehold.it

placeholder quick simple filler image generator

Imageholdr

image holder images generator placeholder webapp

Nice Nice JPG

nice nice jpg generator images webapp

Dummy Image Generator

dummy text image generator webapp ui screenshot 2014

hhhhold

hhhhold image hhhold generator webapp filler content

FPOImg

fpo image generator content placeholder webapp

Placebox.es

placeboxes image generator simple webapp

Pipsum

text generator lorem ipsum webapp homepage


Advertise here with BSA

May 01 2012

13:00

The Power of Paper Prototyping (Includes a Giveaway)

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

When planning the structure of a website or an app, I often begin by capturing my ideas on paper in the form of wireframes. I quickly sketch several possible layouts to see which form fits best: Should I use a two or three-column layout? What kind of navigation structure will the site have? How can I integrate a search bar? For exploring basic questions like these, nothing beats throwing together some quick-and-dirty paper prototypes. It’s a great way to get the creativity flowing, and when a sketch doesn’t work it’s always fun to crumple it up and play office basketball with the garbage can.

Does that mean that prototyping on paper is superior to using a wireframing software tool? Each has its own strengths that are useful at different stages of a project. In the initial brainstorming stage, I prefer the paper-based approach for the following reasons:

  • It’s fast, low-tech and low-cost. All you need to get started is paper and a pencil.
  • You can do it anywhere: on the couch, in your garden, or even while lying in bed.
  • Paper frees you from adhering to a particular style or following a set of predefined rules.
  • It’s fun, playful, and helps unleash your creative juices.

Later on, after having dealt with the basic layout questions, I refine my ideas on screen and enjoy the benefits of digital wireframing:

  • A wireframing tool lets me choose from ready-to-use template elements.
  • Existing wireframes are painless to modify.
  • Files can be versioned and easily be exchanged among team members.

If you are in the market for a good wireframe software, I can recommend PowerMockup, a wireframing tool developed by our company. PowerMockup is an add-on for Microsoft PowerPoint that provides a handy library of stencils for quickly sketching a layout.

5 Paper Prototyping Kits Up For Grabs

To promote the idea of paper prototyping and get you started, we are giving away five paper prototyping kits, each containing:

  • 3 Sketch Pads
  • 4 Sharpie Markers

The sketch pads contain a simple browser frame and come with 50 sheets of nice thick (100gms) A4 paper.

Instead of pencils or thin ballpoint pens, we include a package of Sharpie markers. The reason is simple: Due to its thickness, a Sharpie forces you to focus on the basic building blocks of your layout and minimizes the risk of getting lost in design details that will probably change later anyway. Sharpies encourage you to concentrate on the concept, which is why they are the perfect choice for early brainstorming sessions.

How to Enter the Giveaway

For a chance to win one of five paper prototyping kits, simply tweet about this post using the hashtag #protokit. The competition will run for the next seven days, ending May 8th, 2012. The winners will be picked randomly from all tweets received and contacted for shipping information (shipping will be done via DHL International to almost any location in the world).

There will be a small consolation prize for those not among the five lucky winners: a free paper browser PDF template for download so you can print your own sketching paper. Have fun with it!

April 27 2012

21:00

Beginner’s Guide to Wireframes and Tools to Create Them

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Wireframing, or prototyping, while designing, costs almost nothing, but can give back so much. While many designers start with a sketch in their mind and then just put it into Photoshop or even code it right away, some others start on paper. Yes, paper, that (most of the time) white thing we write on with our hands. Sounds very 2000-ish, but even today the best designers out there use this technique to their advantage. Web prototyping saves lots of frustrations later on during the project development phase, as it makes sure there are no things to undo or redesign. If you prototype correctly, you can be sure about the fact that redesigning will never be something you will have to think of.

What wireframing basically means is putting your design ideas on paper – for each of the multiple pages of a website. All pages will probably share some elements, therefore the first one will be a bit more challenging to do, whereas the rest of them will be a bit less difficult as you already have a basic idea over the general design patterns.

Keep in mind that these common elements are a must for any design. When switching between pages the user will have to immediately recognize the fact that he is on the same site and not somewhere else. Always keep the navigation and the important sections (content, sidebar, footer) in the same place. But this tends to become a novice guide to web design, so let’s move on.

General – the wireframe

In order to be able to use a wireframe, you need to know how it actually works. What this does is simple – it illustrates the layout of a website and its main components on paper. You can use different shapes, such as boxes and ovals to draw content, navigation and other functional elements. You might ask yourself why do we use shapes? The answer is simple: because it allows us to focus more on the design and forget about coding, cross-browser compatibility, images and so on. It’s pure and basic design.

Image by Zach Hoeken.

Wireframing or Photoshop design?

The alternative to paper web prototyping is creating the visual design in Photoshop first. While it has advantages to some extent, creating the layout in Photoshop is not as effective because it does not allow you to focus on the basic design elements. If you start designing in Photoshop you will probably also start thinking about colors, images and fonts. There is no need for this if done on paper. And the process is way faster on paper as well, so why not go for it? You can obviously start designing in Photoshop at a later stage, but I wouldn’t recommend doing it before you have a clear idea of what you want to get out of the project. The only way to achieve this is to start on paper.

You can call a wireframe a sketch if you want to. As a matter of fact, a wireframe is a basic, simplified sketch of a website. It communicates some ideas to the client which he can accept or not. If he doesn’t, it is quite easy for you to take another sheet of paper and draw other ideas from the top. The main reason behind a wireframe is to let you focus on what is really important on a website: how each page looks, where the most important elements go and how to achieve the overall positive balance you need.

After you get the idea to the client and he accepts it, you are welcome to evolve the basic sketch into something more detailed. Now it is maybe time to start thinking of fonts, colors and images.

Image by Denkbeelhouwer.

The Prototyping Stage

It is crucially important for designers and clients to work together during this stage of the project. While a client doesn’t have too much to say during the coding phase, this is where he usually gives a lot of input you should consider. Remember that once he accepted the design, he will gladly give into your further ideas – at this point in time he already believes in you and your skills. It will be a tough and long project if you don’t get the acceptance on the basic wireframe from him.

If you are a client remember not to stress a lot about the lack of colors, images, fonts and other styles. The job of a designer for now is to give you a basic idea of what he thinks is good for you. If you ask for more detailed wireframes from him and reject them three or four times, it will cost you lots of money. On the other side, if you ask for basic wireframes and reject them, it won’t cost you as much, because they are easier to draw and think of.

Tools for web prototyping

Here is a list of some tools I recently tested in order to see how much designers can trust them in building wireframes. If paper is not good enough for you then, in any given order, here are the other possible solutions:

1. iPlotz

This tool allows you to create wireframes which you can click on and navigate through. This helps creating the experience of a real website. While you can get a free account on iPlotz, I recommend one of the premium ones if you are serious about starting with web prototypes from now on.

2. Balsamiq

If you like drawing, then this tool will give you the feeling of it, only now it is digital. The elements can be tweaked and rearranged easily and the control over them is quite easy as well. The results are clean and one of its advantage is that everything can be reiterated in real-time.

3. Pencil Project

This tool can easily be used to make diagrams and GUI prototyping.

4. templatr

Although it will not allow you to draw anything, this tool lets you create individual designs for your website on the go. You don’t need to know any HTML and you can download the template in the end with a single click.

5. Flair Builder

This is a tool capable of creating interactive wireframes very fast. It is quite easy to use and comes with a palette of functional components which will ease the process of creating prototypes. Flair Builder is also interactive and will improve your experience a lot.

Image by Michael Lancaster.

Bottom line

Wireframes, or web prototyping, is a process known to many designers, although just a handful of them use it. While it might seem that it takes a lot of time, on long-term it will help you a lot. If you know how to properly communicate and closely work with the client during prototyping, the rest of the project will go smoother than expected. I totally encourage you to prototype your designs before actually starting to code or to create the whole visual design in Photoshop. It will make the process easier for you and will spare you frustrations down the road.

Until next time, let’s spark some discussion here for my 50th article on 1WD. How often do you prototype your designs? How effective has it been for you? If you don’t do it, why is that?

June 08 2010

04:26

11 UI Kits for iPhone and iPad Development

Last week we posted a collection of printable wireframing templates which included some for iPhone and iPad app design. These are great for communicating early mockups and ideas, but when it’s time for those ideas to make the jump from paper to the computer screen, it’s helpful to have a library of UI elements at your disposal. Since we love saving you time, we’ve found some for you. Here are 11 UI Kits for iPhone and iPad Development.

iPad GUI Kit in PSD Format

iphone and ipad ui

iPhone GUI PSD 3.0

iphone and ipad ui

Free iPhone Toolbar Icons

iphone and ipad ui

Ultimate iPhone Stencil for Omnigraffle

iphone and ipad ui

iPhone UI Vector Elements

iphone and ipad ui

Free iPhone Toolbar Icons

iphone and ipad ui

Yahoo! Design Stencil Kit

iphone and ipad ui

iPad GUI PSD

iphone and ipad ui

iPad Vector GUI Elements

iphone and ipad ui

iPad Stencil for Omnigraffle

iphone and ipad ui

iPhone PSD Vector Kit

iphone and ipad ui

June 04 2010

05:00

10 Free Printable Web Design Wireframing Templates

A couple of weeks ago we posted a showcase of sketched UI wireframes. It illustrated how starting out on paper can be an effective way to begin the design process. It allows you to quickly mockup ideas and get the creative juices flowing. When creating these sketches, it’s good to have a guide or starting point. Here we’ve rounded up 10 free printable templates that will help you get started with your own wireframe sketches.

Paper Browser

printable wireframing templates

iPhone Application Sketch Template v1.3

printable wireframing templates

Six Page Template

printable wireframing templates

Wireframe template

printable wireframing templates

iPad Application Sketch Template v1

printable wireframing templates

iPhone Wireframe Templates for Sketching

printable wireframing templates

iPhone App Wireframe Template

printable wireframing templates

Concept7 Sketching Grid Paper

printable wireframing templates

Paper wireframe templates

printable wireframing templates

960 grid template

printable wireframing templates
960 Grid System

May 20 2010

04:53

18 Great Examples of Sketched UI Wireframes and Mockups

Whether you’re designing a user interface for a website or an iPhone app, it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. There are a number of wireframing applications out there, but a lot of user interface designers like to start out on paper with sketches of what things might look like. With so many tools available to quickly create digital wireframes, some may argue that this is an unnecessary step in the design process. But I think the free flowing style of a sketched wireframe or mockup can be refreshing. Besides, there’s nothing like good ole pencil and paper to get the creative juices flowing.

For this post, I’ve collected 18 great examples of sketched UI wireframes and mockups. A lot of these look so good that you may be inspired to start your next project with a sketch.

NationWide / NASCAR

sketched wireframes

5 Years of Firefox

sketched wireframes

Links

sketched wireframes

GEOINT2009 (Microsite)

sketched wireframes

Coastal Capital Partners

sketched wireframes

New Local

sketched wireframes

Vimeo Profile Page Idea

sketched wireframes

Layout for BPgraphics

sketched wireframes

Vimeo Clip Page Top Nav

sketched wireframes

Cartoonity.com UI Sketch

sketched wireframes

CommLogix Wireframe

sketched wireframes

Early Ember Sketches

sketched wireframes

Wirethumbs

sketched wireframes

More Ember Sketches

sketched wireframes

iPad App Sketch

sketched wireframes

Web Layout Sketches

sketched wireframes

Librespeak interface sketch

sketched wireframes

Original Twitter Concept

sketched wireframes

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl