Mercadotecnia, Publicidad y Diseño: Design Cool Step-By-Step Illustrations For Your Business Ideas on October 30, 2012 / by Sabina Idler / No Comments Next post »« Previous post Most websites out there were designed with three central goals in mind: (1) to attract a certain group of people, (2) to inform them about a certain product or service, and (3) to convince them to take a certain action. The way you present your business idea on your website is essential for the success of all of these three goals. In order to attract, inform, and convince your visitors, you need to be clear about what it is you have to offer. A while back, we looked at different product pages and what it takes to convert visitors into customers. This already gave us some ideas of what makes a product page sucessful. Now, let’s go into more detail and take a look at how to effectively present your business idea with simple step-by-step illustrations. Numeric steps Step-by-step illustrations can either be numeric or semantic. Let’s look at some more common, numeric examples first. Numeric steps means that different steps follow each other in a chronological way, describing a process or different actions that follow each other. Explanations Numeric steps are very popular for explaining processes that involve different actions that follow each other sequentially. Use clear numbers to illustrate sequential processes. (Source) For example, ShopLocket break down their service into three simple steps. Besides a more or less concrete visual and a textual description, every step also has a number. The numbers 1 — 3 indicate that the steps are not only linked, but that they also follow each other in time. Don’t be too serious. A little humor is human. (Source) The App Zero also uses three sequential steps to describe the extreme simplicity of the app. Step 3 does not even involve the app (“Get on with your life”), which indicates even more how easy it is to use it. Besides visuals, text, and numbers, they also use arrows to indicate the sequential relationship between the different steps. Animations A great way to draw special attention to your core business idea is by using subtle animations. Animations, especially those that we are able to control, such as parallax scrolling, are engaging ways to get people to see your content. Engage your visitors with parallax scrolling effects. (Source) For example, Osmek gives a very simplistic overview of their service; a new way to publish content to your website or app. When scrolling down the page, the different boxes fill with simple illustrations. It becomes clear that these steps follow each other over time, even though there is no numeric listing. Use animations to show how events relate to each other over time. (Source) Another engaging example is Wishbone. The illustrations of the different steps build up from left to right. The numbers 1 — 4 are supported by this animation and it becomes clear that the steps follow each other in time. Storylines Numeric steps can also be used to tell stories and to make sure people get through the story on the right path. Of course stories can also be told without numbers and there are different ways to keep people on track, but numbers are certainly an easy and effective way to do so. Use numeric steps to tell your story and engage visitors on your site. (Source) For example, Tourist Eye explain their business idea in three main steps. These steps are illustrated with visuals and text. Besides the numbers that guide the visitor through the story, there is also a dashed line that links the elements within the different steps. The content spans over the entire page and engages visitors to scroll in order to see the “full” story. Guide your visitors’ line of sight to make sure they get the whole story. (Source) The online gift service Chummee also tells a story about their service, using different steps. Instead of showing the image first like we saw it in the previous examples, they start with a brief textual description. Then, they show simple illustrations to make each step more clear. Only when reading the entire story, so the text and the visual, it becomes clear what exactly they do. Semantic steps Now, let’s look at some semantic examples. Semantic steps means that someone’s expertise, a product, or a business idea is explained by different steps that don’t necessarily follow each other chronologically. Steps can be seen as key aspects that communicate a message most effectively. Details Semantic illustrations can be quite detailed, combining visual elements with text. These visual elements can either be specific and meaningful by themselves, or abstract and depending on the accompanying text. Either way, the combination of image and text helps us to grasp the essence of a message faster and also to remember it more easily. Abstract visuals become relevant through textual descriptions. (Source) For example, the web and graphic artist Jonathan Graf uses abstract icons to introduce himself in a visual and clear way. No need to read through long junks of text. Everything that’s relevant to know about Jonathan, at least for a business relationship, can be found in one of the three categories: (1) Who I am, (2) What I do, and (3) Where I do it. Detailed images allow people to choose between image and text. (Source) Evernote on the other hand uses much more detailed images and even collages of multiple images to illustrate how their product works. The images are even so clear that the subheadings and textual descriptions become redundant. This way, people can choose whether they prefer to look at the images, or read text, or do both. Visuals only Next to very detailed descriptions, you can also use visuals only to make your point. Visuals can be very powerful for two reasons. First of all, they attract more attention than pure text. Second, images can be much easier to grasp, understand and remember. A while back we discussed infographics and why people prefer visual over textual content. Show relationships between different aspects using visual elements, such as arrows. (Source) For example, the open source framework PhoneGap shows in three easy steps how it wraps different web code together to be deployed to different mobile devices. The steps are very simple and as such clear and easy to follow. No extensive text, or more details needed. Use visuals to create simple, yet clear content. (Source) On our own site, we also use visuals to demonstrate the different steps of our Live product. People give feedback, we provide instant and actionable results, helping our clients to improve their conversion rates. The illustrations are abstract, but detailed and help people understand how our product works. Your thoughts? There you have it. 10 examples of how step-by-step illustrations can help you explain your business goals. Let us know what you think! And if you have more examples, please feel free to share them. business idea presentationdesign inspirationsstep-by-step illustrations Sabina Idler Sabina is community manager, technical writer & UXer @ Usabilla. She is interested in Usability, User Experience, Design, and everything that makes the Web a better place. Follow Sabina on Twitter. Related Posts

lunes, 5 de noviembre de 2012

Design Cool Step-By-Step Illustrations For Your Business Ideas on October 30, 2012 / by Sabina Idler / No Comments Next post »« Previous post Most websites out there were designed with three central goals in mind: (1) to attract a certain group of people, (2) to inform them about a certain product or service, and (3) to convince them to take a certain action. The way you present your business idea on your website is essential for the success of all of these three goals. In order to attract, inform, and convince your visitors, you need to be clear about what it is you have to offer. A while back, we looked at different product pages and what it takes to convert visitors into customers. This already gave us some ideas of what makes a product page sucessful. Now, let’s go into more detail and take a look at how to effectively present your business idea with simple step-by-step illustrations. Numeric steps Step-by-step illustrations can either be numeric or semantic. Let’s look at some more common, numeric examples first. Numeric steps means that different steps follow each other in a chronological way, describing a process or different actions that follow each other. Explanations Numeric steps are very popular for explaining processes that involve different actions that follow each other sequentially. Use clear numbers to illustrate sequential processes. (Source) For example, ShopLocket break down their service into three simple steps. Besides a more or less concrete visual and a textual description, every step also has a number. The numbers 1 — 3 indicate that the steps are not only linked, but that they also follow each other in time. Don’t be too serious. A little humor is human. (Source) The App Zero also uses three sequential steps to describe the extreme simplicity of the app. Step 3 does not even involve the app (“Get on with your life”), which indicates even more how easy it is to use it. Besides visuals, text, and numbers, they also use arrows to indicate the sequential relationship between the different steps. Animations A great way to draw special attention to your core business idea is by using subtle animations. Animations, especially those that we are able to control, such as parallax scrolling, are engaging ways to get people to see your content. Engage your visitors with parallax scrolling effects. (Source) For example, Osmek gives a very simplistic overview of their service; a new way to publish content to your website or app. When scrolling down the page, the different boxes fill with simple illustrations. It becomes clear that these steps follow each other over time, even though there is no numeric listing. Use animations to show how events relate to each other over time. (Source) Another engaging example is Wishbone. The illustrations of the different steps build up from left to right. The numbers 1 — 4 are supported by this animation and it becomes clear that the steps follow each other in time. Storylines Numeric steps can also be used to tell stories and to make sure people get through the story on the right path. Of course stories can also be told without numbers and there are different ways to keep people on track, but numbers are certainly an easy and effective way to do so. Use numeric steps to tell your story and engage visitors on your site. (Source) For example, Tourist Eye explain their business idea in three main steps. These steps are illustrated with visuals and text. Besides the numbers that guide the visitor through the story, there is also a dashed line that links the elements within the different steps. The content spans over the entire page and engages visitors to scroll in order to see the “full” story. Guide your visitors’ line of sight to make sure they get the whole story. (Source) The online gift service Chummee also tells a story about their service, using different steps. Instead of showing the image first like we saw it in the previous examples, they start with a brief textual description. Then, they show simple illustrations to make each step more clear. Only when reading the entire story, so the text and the visual, it becomes clear what exactly they do. Semantic steps Now, let’s look at some semantic examples. Semantic steps means that someone’s expertise, a product, or a business idea is explained by different steps that don’t necessarily follow each other chronologically. Steps can be seen as key aspects that communicate a message most effectively. Details Semantic illustrations can be quite detailed, combining visual elements with text. These visual elements can either be specific and meaningful by themselves, or abstract and depending on the accompanying text. Either way, the combination of image and text helps us to grasp the essence of a message faster and also to remember it more easily. Abstract visuals become relevant through textual descriptions. (Source) For example, the web and graphic artist Jonathan Graf uses abstract icons to introduce himself in a visual and clear way. No need to read through long junks of text. Everything that’s relevant to know about Jonathan, at least for a business relationship, can be found in one of the three categories: (1) Who I am, (2) What I do, and (3) Where I do it. Detailed images allow people to choose between image and text. (Source) Evernote on the other hand uses much more detailed images and even collages of multiple images to illustrate how their product works. The images are even so clear that the subheadings and textual descriptions become redundant. This way, people can choose whether they prefer to look at the images, or read text, or do both. Visuals only Next to very detailed descriptions, you can also use visuals only to make your point. Visuals can be very powerful for two reasons. First of all, they attract more attention than pure text. Second, images can be much easier to grasp, understand and remember. A while back we discussed infographics and why people prefer visual over textual content. Show relationships between different aspects using visual elements, such as arrows. (Source) For example, the open source framework PhoneGap shows in three easy steps how it wraps different web code together to be deployed to different mobile devices. The steps are very simple and as such clear and easy to follow. No extensive text, or more details needed. Use visuals to create simple, yet clear content. (Source) On our own site, we also use visuals to demonstrate the different steps of our Live product. People give feedback, we provide instant and actionable results, helping our clients to improve their conversion rates. The illustrations are abstract, but detailed and help people understand how our product works. Your thoughts? There you have it. 10 examples of how step-by-step illustrations can help you explain your business goals. Let us know what you think! And if you have more examples, please feel free to share them. business idea presentationdesign inspirationsstep-by-step illustrations Sabina Idler Sabina is community manager, technical writer & UXer @ Usabilla. She is interested in Usability, User Experience, Design, and everything that makes the Web a better place. Follow Sabina on Twitter. Related Posts

Cool Step-By-Step Illustrations For Your Business Ideas

on October 30, 2012 / by Sabina Idler / No Comments

Most websites out there were designed with three central goals in mind: (1) to attract a certain group of people, (2) to inform them about a certain product or service, and (3) to convince them to take a certain action. The way you present your business idea on your website is essential for the success of all of these three goals.

In order to attract, inform, and convince your visitors, you need to be clear about what it is you have to offer. A while back, we looked at different product pages and what it takes to convert visitors into customers. This already gave us some ideas of what makes a product page sucessful.

Now, let’s go into more detail and take a look at how to effectively present your business idea with simple step-by-step illustrations.

Numeric steps

Step-by-step illustrations can either be numeric or semantic. Let’s look at some more common, numeric examples first. Numeric steps means that different steps follow each other in a chronological way, describing a process or different actions that follow each other.

Explanations

Numeric steps are very popular for explaining processes that involve different actions that follow each other sequentially.

Use clear numbers to illustrate sequential processes. (Source)

For example, ShopLocket break down their service into three simple steps. Besides a more or less concrete visual and a textual description, every step also has a number. The numbers 1 — 3 indicate that the steps are not only linked, but that they also follow each other in time.

Don’t be too serious. A little humor is human. (Source)

The App Zero also uses three sequential steps to describe the extreme simplicity of the app. Step 3 does not even involve the app (“Get on with your life”), which indicates even more how easy it is to use it. Besides visuals, text, and numbers, they also use arrows to indicate the sequential relationship between the different steps.

Animations

A great way to draw special attention to your core business idea is by using subtle animations. Animations, especially those that we are able to control, such as parallax scrolling, are engaging ways to get people to see your content.

Engage your visitors with parallax scrolling effects. (Source)

For example, Osmek gives a very simplistic overview of their service; a new way to publish content to your website or app. When scrolling down the page, the different boxes fill with simple illustrations. It becomes clear that these steps follow each other over time, even though there is no numeric listing.

Use animations to show how events relate to each other over time. (Source)

Another engaging example is Wishbone. The illustrations of the different steps build up from left to right. The numbers 1 — 4 are supported by this animation and it becomes clear that the steps follow each other in time.

Storylines

Numeric steps can also be used to tell stories and to make sure people get through the story on the right path. Of course stories can also be told without numbers and there are different ways to keep people on track, but numbers are certainly an easy and effective way to do so.

Use numeric steps to tell your story and engage visitors on your site. (Source)

For example, Tourist Eye explain their business idea in three main steps. These steps are illustrated with visuals and text. Besides the numbers that guide the visitor through the story, there is also a dashed line that links the elements within the different steps. The content spans over the entire page and engages visitors to scroll in order to see the “full” story.

Guide your visitors’ line of sight to make sure they get the whole story. (Source)

The online gift service Chummee also tells a story about their service, using different steps. Instead of showing the image first like we saw it in the previous examples, they start with a brief textual description. Then, they show simple illustrations to make each step more clear. Only when reading the entire story, so the text and the visual, it becomes clear what exactly they do.

Semantic steps

Now, let’s look at some semantic examples. Semantic steps means that someone’s expertise, a product, or a business idea is explained by different steps that don’t necessarily follow each other chronologically. Steps can be seen as key aspects that communicate a message most effectively.

Details

Semantic illustrations can be quite detailed, combining visual elements with text. These visual elements can either be specific and meaningful by themselves, or abstract and depending on the accompanying text. Either way, the combination of image and text helps us to grasp the essence of a message faster and also to remember it more easily.

Abstract visuals become relevant through textual descriptions. (Source)

For example, the web and graphic artist Jonathan Graf uses abstract icons to introduce himself in a visual and clear way. No need to read through long junks of text. Everything that’s relevant to know about Jonathan, at least for a business relationship, can be found in one of the three categories: (1) Who I am, (2) What I do, and (3) Where I do it.

Detailed images allow people to choose between image and text. (Source)

Evernote on the other hand uses much more detailed images and even collages of multiple images to illustrate how their product works. The images are even so clear that the subheadings and textual descriptions become redundant. This way, people can choose whether they prefer to look at the images, or read text, or do both.

Visuals only

Next to very detailed descriptions, you can also use visuals only to make your point. Visuals can be very powerful for two reasons. First of all, they attract more attention than pure text. Second, images can be much easier to grasp, understand and remember. A while back we discussed infographics and why people prefer visual over textual content.

Show relationships between different aspects using visual elements, such as arrows. (Source)

For example, the open source framework PhoneGap shows in three easy steps how it wraps different web code together to be deployed to different mobile devices. The steps are very simple and as such clear and easy to follow. No extensive text, or more details needed.

Use visuals to create simple, yet clear content. (Source)

On our own site, we also use visuals to demonstrate the different steps of our Live product. People give feedback, we provide instant and actionable results, helping our clients to improve their conversion rates. The illustrations are abstract, but detailed and help people understand how our product works.

Your thoughts?

There you have it. 10 examples of how step-by-step illustrations can help you explain your business goals. Let us know what you think! And if you have more examples, please feel free to share them.

Mercadotecnia, Publicidad y Diseño

lunes, 5 de noviembre de 2012

Cool Step-By-Step Illustrations For Your Business Ideas