Making a better Lorem Ipsum
We are fans of Lorem Ipsum here at Collective Network.
HUGE fans like most of the people that use it. It is a great way to add some copy to quickly visualise a design during its initial stages.
The problem with Lorem Ipsum is that its value diminishes after those initial iterations when both client and designer have refined their work. What is actually required after this point is a better Lorem Ipsum.
A lorem ipsum generator that creates content, copy and design, based on a category. Wouldn’t it be nice if the tool would then generate a filtered list of content, helping the user’s focus during those crucial first steps?
And thus, this idea was born.
How it works
We have taken this idea and broke how to use such a tool in 3 simple steps:
- Select your category
- Generates the copy
- Add your design
As a user, you can then have a play around with your the results, by editing the copy, adding some more swag to the design, drag and dropping sections, adding / swapping / uploading your own images, adding icons and much more.
You can even save and download your work.
Let’s take a closer look.
Selecting a category
Use cases
The first challenge in designing a better Lorem Ipsum was its many uses. People use placeholder text to build just about any website, from travel to fitness, restaurants, photography, their own portfolios and multitude of others. A few will even use it as a play around when designing a section within their site, like their own blog.
The idea of adding a “category” to generate content specific to the category selected was then conceived.
Wouldn’t it be great if the tool was able to generate travel-specific content when the “travel” category, heading and/or paragraph was selected? Imagine the time and money it saves the user who might otherwise have to pay someone to write this all up.
Users
Making it easier for the user should always be the top priority when designing a new product.
And who exactly will be using this tool?
Everyone from a product guy, designer, developer, sales & marketing professional, or simply anyone that has come up with an idea. A user can iterate through an initial idea easily without having to hand it off to a designer.
A designer can use the tool to quickly, before launching into Sketch, Photoshop or their design tool of choice.
Generating Copy
After selecting the category, the user can then select a heading and description — and the tool will automatically generate an accompanying heading and description for that category.
All heading and description copy relating to Travel will be generated when selected by the user.
Similarly, all copy relating to Health/Wellbeing/Fitness would be generated with the selection of “Fitness” category, and so on. We, therefore, added a story card on the board to build that core feature.
Design considerations
Now in our head, copy wasn’t enough; we also wanted some design elements in our tool to contextualise what the user is building.
A person reading a travel site might expect the content to also include photos, which could be a key selling point in such a site.
Based on the category, we then added a card up to generate placeholder pictures specific to that category. The user would, therefore, have the ability to select an image which would generate random photos. Some of these will be generated through stock photos from Unsplash, and others will be taken from our group of talented photographers! [note: There are a fair few photographers here in Collected Network.]
We also added the ability to swap photos in case the user was not satisfied with the random photograph generated.
And as an added bonus, the user can also have the ability to upload their own images should they chose.
Design? Why bother?
And why even bother with adding design with a copy based tool? Context.
What better way to visualise your design than with real images (particularly with your own photos!)
But copy is STILL king
We have followed the universally accepted ‘Copy is King’ approach by presenting the block for copy prior to selecting any design elements. This approach ensures that copy is the key focus when the user starts to use the tool.
It is fairly obvious to the user that when they select images, before they select copy, that the output might look a bit odd — unless, of course, if that is the effect they’re going for.
Other bits of functionality
Drag and drop sections
To ensure flexibility, we will also allow users to move sections in different areas. In the scenario where a user creates the following content:
H1: Travel Australia
P: Australia is a country, and continent, surrounded by the Indian and Pacific oceans..
H2: Sydney
P: Sydney, capital of New South Wales and one of Australia’s largest cities, is best known for its harbourfront Opera House, with a distinctive sail-like design..
The user should be able to move the H1 (heading) and accompanying P (paragraph) below H2 if they so choose. The added functionality allows the user to have a quick play before settling on a final design.
People
We will create avatars of random people with an accompanying description if the user selects on the people icon. This will enable users to contextualise their site with real people.
The people and descriptions will also change depending on the category.
For example, the people generated for the Travel website will be travellers with some tall travel tales as description text; whereas if the user selects photography category, the people images generated will change to that of photographers (with accompanying text once again).
Blog
As you would’ve guessed, hitting the blog icon will generate a random blog specific to the category. A travel category will generate a travel blog (if selected) just like a fitness category will generate a blog related to fitness and wellbeing.
Contextualising the content is once again the key to creating a succinct experience for the user. There is simply no better way to design a concept in your head than providing you, the user, with tools in context, of what you have selected in the category. The aim of the game is to make the users thoughts concrete (as much as we possibly can).
Download
The output to all this is HTML for the copy and images will be exported via png files. We have also added a card for ‘copy to clipboard’ function.
The outputs from our Lorem Ipsum tool can then be used as inputs when the user builds their real website.
This is, in fact, the real benefit of the tool: It is the first step to mocking up a website (or simply a design), for creatives, product types, designers, developers, marketing pros and anyone else out there who intends to create a site.
We have even included the traditional Lorem Ipsum text if the user so chooses. The tool is meant to be the first step in the design process — which is one of the reasons why we decided to call it “Startup Ipsum”.
Where to from here?
We are working hard behind the scenes building all the good stuff that comes with the tool; there are a few other features and surprises we haven’t even mentioned.
We would love to give you updates and absolutely welcome any feedback that you may have through our sign-up form. We’ll also do the rounds with meet-and-greets, predominantly here in sunny Sydney as well as promote our initiative through social media.
You, the user, are the key to letting us know what you would like to see in this tool. Let’s think outside the box and shape our first few steps in the design process together.
Feel free to reach out to us at any time.
Them Collective Rascals
This fabulous initiative is brought to you by the following #CollectiveNetwork rascals, specifically:
The handles: Perry C, Mark B and Suraj D.
Drop a ‘hey there’ or follow us on Collective Networks and through our own handles. We appreciate that :)
