A simple video tutorial ~ How-to draw Org Charts with Creately!

We have a series of tutorial videos, but with the continuous developments and feature upgrades to Creately these tutorials look a tad bit outdated. So we thought of coming up with new tutorial videos to highlight some of the predominant updated features. Starting from this week, you can expect a series of video tutorials demonstrating how-to draw different kinds of diagrams with Creately.

Today, lets take a look at a simple 2-min how-to video on drawing professional Org Charts with Creately. With this, you will agree that creating Org Charts is seriously a simple affair.

We did this to help you understand some of the basic features. You can hit us back if you got any queries. We’re listening to you as always!

Posted via email from Creately | Comment »

3 ways to make your Org Charts better

We did speak quite a bit about Org Charts a few posts back, but in this post we thought of letting you all in on 3 simple points that can to help make your Org Charts more focused and clearer.

1. Know the difference between Vertical and Horizontal

A vertical organizational structure denotes a strict top down or bottom up structure. Typically, a rigid top down vertical organizational structure has been favored for businesses and other organization types. On the other hand, a horizontal organizational structure means a flat or semi- flat organizational structure, like a meritocracy. While many do design their Org Charts with their direct reports being positioned horizontally, the right thing to do is to be aware of what your company structure is all about, i.e. vertical or horizontal before actually attempting an Org Chart. A vertical Org Chart is shown below.

2. Name It and then Put a Face to It

Including images of staff in your Org Chart can help humanize your company intranet site, assist new employees get better acquainted, and help virtual teams that are not in close proximity to get a sense of who their co-workers are. But you really need not limit yourself to just staff pictures. If you do have an Org Chart that is rather mundane and abstract, you could infuse some liveliness and color to it but plugging in some images to highlight the type of operations as well. For instance, if you have a department called Division of Finance & Management, you could have a dollar sign image next to it. Check out how big a difference, having a picture and not having one makes below.

3. Go Unconventional with Org Charts

While Org Charts are conventionally used by HR to show the basic structure that is present in an organization, why not use such a diagram type to illustrate other types of information? For instance, you could use Color to showcase the gender balance or the different age groups present in an organization. Don’t stop there though, you could even use a colorful Org Chart to allocate staff members into different teams in the Sports Committee, to assess the number of Senior Executives present as opposed to Junior Executives or even. There really is no limit as to what you can do with organigrams, all it takes is some intuition and creativity.

Stick to these 3 tips to make your designs clear, sharp, clutter-free and offer more information. Try out these smart 3 tips on Creately for free and see how creating Org Charts is as easy as peanuts.

Posted via email from Creately | Comment »

The Art of Wireframing: A 10-step Guide

While our last post was all about highlighting some benefits and uses of wireframes, today’s post will focus on some tips that need to be taken into consideration when dealing with the process of wireframing. While some of them may not be focused directly on designing per se, there are certain elements like gathering feedback and adhering to a set objective, which are important to say the least.

As you may already know, a mockup is more inclined to show what a site will LOOK like; whereas a wireframe would be more focused on showing what a site DOES. This is a distinction that we do lose track of at times. The 10 steps shown below is an effective check list of what needs to be taken into account with regard to your wireframing project. These steps, if put into practice from your end, can help your client understand how exactly his site will function once it comes into fruition.

1. Set an achievable objective

A wireframe aims at solving all kind of problems. In addition to this, it will save you money and time since it is easier to change a paper wireframe or a prototype than to discover errors in many lines of code.

2. Functionality counts

Wireframes are about function, not form. That’s why they come before the actual design.

3. Who is in Charge?

 When doing a wireframe, remember that it’s vital to have someone in charge. This person should keep it current, manage feedback and relevant changes.

4. Is everyone involved?

 

It is imperative that you involve all staff in the process, from marketers to designers and developers and even users.

5. Put a deadline to the wireframe

If you want to keep a project moving, choose a deadline for your deliverables and make sure you stick to it.

6. Focused on users

 As mentioned in our little intro, a wireframe is all about showing what a site DOES, having said that you would also need to take into account the user experience. For instance, it is never a good idea to let a site be too detailed whereby a user is confused when it comes to navigating around. Always have the user in mind and see how you can make the whole website experience easy and convenient.

7. Consistency

 Consistency in your wireframe will assist users, developers and designers. When it comes to the repetition of groups of elements; remember that this can be useful to clarify things to users.

8. Does everyone understand your wireframe?

 Everyone from business men, to marketers and designers, should find the wireframe easy to follow. As a rule of thumb it is best that you ask someone not involved in the project to see whether it is easy to assimilate. Perhaps your mother?

9. Get feedback

 Ideally, an initial wireframe should gather feedback, a second one should show this feedback that was considered and the last one should be refined and polished.

10. The perfect tool

 Paper prototyping is an excellent way to get started. However, as the project evolves, it is best that you consider an app or wireframing software to bring your wireframe into fruition and to help you manage the many iterations and screens involved.

 

So there you have it, 10 easy but significant steps that you should stick to at all times when wireframing. We hope you enjoyed this particular blog post, stay tuned for posts on sitemaps during this week. We do encourage you to send us your thoughts or comments via our site. Till next time – keep those wireframes picture perfect!

Posted via email from Creately | Comment »

Why you should annotate Wireframes

As we all know, clarity is the main goal of any wireframe or UI mockup. What we seek to elucidate via this post is that when structuring a wireframe you need to ensure that you

  • focus on the client requirements
  • ensure that the design is clear and uncomplicated
  • and you concentrate on annotating the design.

Simple points but certainly potent points to ponder.

If you have experienced rejection at the hands of your clients, one too many times, you must remember that it may not actually be a fault of your design. Rather it could be all to do with the way you present your design to your client. While most designers are adept enough to get 1 and 2 sorted, then usually forget to do 3. And this is where it all goes horribly wrong.

Looking at a design from a client’s perspective, he/she would need to understand it before taking a decision on it. This is what annotating does. Consider this task as a step-by-step guide to the functionality of explaining what a wireframe design is all about. So at this stage, a client would be able to understand the whole concept and then, after much reflection, pass judgement on it.

Find below 4 best practices when it comes to annotating wireframes.

1. Short, simple and sweet

Think about it. How many clients do you know have oodles of time for meetings? You get the point. When annotating, make sure that you are clear and succinct in what you state. Be convincing, state the usefulness of whatever you annotate and keep it really short.

2. Annotate for the sake of usefulness

Your wireframe design is meant to solve a problem. Your client is only concerned about how useful your wireframe design is, so make sure that you annotate with “usefulness” being the main priority.

3. Order, please!

So your client has little or no time to spend meandering around a document figuring out how the wireframe design he is looking at is going to help him out. If you got the first two best practices sorted out, then all you need to do is to ensure that you arrange everything in numerical order. From the client’s perspective, this will lead to a natural flow whereby all information can be easily assimilated.

4. Get some space

You already probably know how the natural progression is to read from left to right. So it’s natural to have your design on the left while your annotations are on the right. An example using all these 4 best practices are shown right below.

 

If you do find this post useful, please do make a comment below. We’d be more than happy to field in any questions that you may have. If you got any suggestions for topics that you would like us to cover, you are more than welcome to let us know.

Posted via email from Creately | Comment »

Part 1 : 15 mistakes you would unintentionally make with flowcharts

We just finished with Part 1, Part 2 and Part 3 on the basics of UML diagramming. We now have a two-part series on Flowcharts. This is a very straightforward post, which you will find useful when it comes to getting your diagrams picture perfect. When it comes to flowcharts, one of the most significant things to consider is the element of clarity and attention to detail. Flowcharts, as we all know, can range from solving simple to complex problems. However, there is a list of common mistakes that are relevant to any flowchart, which you should be cautious of.

1. The use of appropriate symbols

Every symbol has a meaning. While it may seem convenient to use a process symbol for everything, this could end up confusing the reader. To get a better understanding of what symbols are relevant when, read up on what each object is all about.

2. Avoid flow direction that is inconsistent


The two most widely accepted flow directions are top to bottom or left to right. Having said that these two types of directions should not be mixed into the same flowchart. Consistency really does matter.

3. Excessive color schemes

Your flowchart is designed to give a solution to a problem. With this in mind, the last thing you want to do is to have your message lost in visual noise.

4. Symbol sizes should be consistent


Maintaining a flowchart that is well proportioned is vital when it comes to avoiding a visual mess. As a rule of thumb, ensure that the height and width are in proportion to each other and the rest of the symbols in the flowchart. This is not, however, applicable to objects that are meant to be intentionally small, like connectors.

5. The need for consistent branch direction

In a perfect world, a flowchart should be logical in all aspects. One of the areas that we do not pay much heed to is branch direction. The best example to illustrate this point is with Decision symbols. Ideally, TRUE conditions should flow out from the bottom while FALSE conditions should flow out from the right side.

6. Flowchart symbols and spacing

More often than not we choose to ignore this crucial point. To make your flowchart more professional you should maintain even spacing around symbols. The one exception to this rule would be Decision symbols, which require extra space to accommodate branch labels.

7. Remember to scale

One of the most basic facts that are overlooked is scaling. Too often a detailed flowchart is re-sized to fit just one page. This is never a good thing. It is better to have a flowchart span multiple pages than to be crammed into a small space, where all the details are unreadable. If you really aren’t happy to span your flowchart over several pages you might like to create a high level flowchart which incorporates several process steps in to one. Alternatively you can also group processes together and then collapse them to reduce the visual clutter of your flowchart.

8. Extended flowcharts

If your flowchart is connected to another flowchart, then instead of putting it in just one page, it is best that you connect it via a circular node to the flowchart on a different page.

Well that’s the first 8 done and tidied away. Keep this list handy and next time run through it at the end of your next flowcharting exercise. We’ll go through the remaining 7 mistakes in the next post. In the meantime if you have a common mistake you think others should avoid let us know in the comments and we’ll make sure it’s covered.

Posted via email from Creately | Comment »

Creately launches its Mini Site

The content we and the community are creating is all over the place, and we realized that our website visitors are getting lost in the maze of information. Thus, we’ve decided to start compiling the relevant resources into minisites (mini sites) focused on each diagram type. We believe this would help our website visitors engage with Creately better and faster than before.

We’ve launched our minisite on Flowcharts. Now, with this mini website you’ll find all the information typically relevant to flowcharts and their usage. Check out all the flowchart symbols, flowchart templates, usecases and more. While you check them out, we’ll work on getting the next minisite on Wireframes ready. So keep watching this space for more details.

And, don’t fail to let us know if you have any thoughts or questions on flowcharting. We’re here to help you around.

@Creately Team

Try Creately Now

 

via creately.com

Posted via email from Creately | Comment »

Adding Creately Diagrams to Google Code and Google Project Hosting

After a recent comment on the original Creately Diagram Viewer post I thought it would be a good idea to follow up with a full post to help all the other Creately users who also use Google Code and Google Project Hosting.

Google Code projects allow you to add Google Gadgets to the Wiki for the project. This means that you can add your Creately diagrams of the design, features and UI mockups for your project to the Wiki for all the project members to see and work with.

Creately Diagram Embed Code Google Code Projects

Due to the way that gadgets work in the Google Code Wiki there is an intermediary handler which means that the document ID that you want to display gets lost during the rendering if you use the regular variable names. In order to fix this it is possible to use the wiki markup similar to this:

<wiki:gadget url="http://creately.com/player/gadget/createlyplayer.xml" height="500" width="500" border="0" up_d up_dlogo="true" up_dtitle="Embedding in Google Code" up_bgcolor="#EEEEEE" />

The variables of interest are:

  • up_did – The Creately diagram ID that you would like to see rendered in the wiki page.
  • up_dlogo – Display the Creately logo, either “true” or “false” – leaving it true gives us some promotion ;-)
  • up_dtitle – Sets the title for the diagram – you don’t need to worry about this for the Google Code wiki as it won’t be seen.
  • up_bgcolor – The background colour behind the diagram being shown in the player. The default is: “#EEEEEE” and looks pretty good.

The size of the player in the wiki can be changed using the “width” and “height” variables – they set the size in pixels.

You can see a working example of the viewer in a project wiki here.

Thanks to Niels for posting the original comment which led to this post – you can see his Google Code project here.

@nick_foster

Try Creately Now

via creately.com

Posted via email from Creately | Comment »

Mind Maps for Effective Business Thinking

Every project kicks off with a basic idea; and ideas evolve into viable projects only after intense brainstorming. There’s a gap between the initial idea and project execution, and this gap is filled typically by brainstorming. Brainstorming can take various forms, some of you might have the practice of writing down ideas; while others might use Mind Mapsto visually arrange their ideas.

Mind mapping is a fun exercise which helps you capture and visualize ideas to gain insights of the business project. Mind Maps are proven to be the most effective productivity tool used widely today, and this has a significant impact on the performance of businesses! Mind Mapping is quite an easy task, some people choose to just draw them by hand on paper, while some people prefer to use whiteboards! But, ever wondered about the risks of losing the scrap of paper or erasing the whiteboard accidentally? Hours of hard work and ideas being lost? This is why its best to use a Mind Mapping software to get the job done!

Creately is a great app for Mind Mapping. We have two smart KObject shapes for Mind Maps – Topic and Idea. Mind Maps start with an idea in mind, and from this central idea many related topics branch out creating interconnections. Here are a collection of five best Mind Maps! With Creately’s 1-Click connectors we’ve created all of them effortlessly.

1) Performance of Projects

imageA quick mind map to illustrate the various reasons affecting the successful completion of projects.

2) Promotional Campaign

image

When planning a promotional campaign a number of stages will be followed. This Mind Map presents six stages which will get your campaign off to the right start.

3) Website Design

image

Mind Maps are of great visual aids to help web devleopers and designers to brainstorm on website layout. This is a simple Mind Map with the layout for a Software Consultancy company.

4) Pricing Model

image

Pricing is an important strategic issue because it is related to product positioning. Thus, it’s essential to have the right pricing model for your business! This is an excellent Mind Map example depicting the various aspects of a Pricing Model.

5) Risk Management

image

The goal of project risk management can be viewed as minimizing potential risks while maximizing potential opportunities. This is a Mind Map with the different processes involved in Risk Management, and the various techniques adopted for minimizing risks.

Can brainstorming and business thinking get any easier? Watch this space for Venn Diagrams next week, and if you missed on the Ten Best Flowchart Ideas last week,  go check them out now!

Try Creately Now

 

via creately.com

Posted via email from Creately | Comment »

Tips on Drawing Flowcharts

Flowcharts are fairly simple things. Before I wrote this, I almost thought “Hey, who’d ever need a tutorial on how to draw a flowchart? It’s too simple and it’ll probably need one line to explain.” Well… not really. There’s more to flowcharts than simple shapes and arrows connecting them if you want to get the idea across. Some tips below to help you create better flowcharts that get the message across:

Identify why you are drawing the Flowchart(s)

You may be drawing it to explain a process to someone, to understand a process, to find loopholes in a flow and so on. It is important to identify the objective on why you want a flowchart for this.

process1

Are there many ‘actors’ involved?

If there are different responsible parties (or things) involved in each step, you might want to convey that information clearly with a Swimlane flowchart. They help clarify who / what is responsible for each step quite easily.

If you have many actors (say more than 6), it might be better to generalize them if possible. Ex. rather than having two columns for Sally or Rob at HR department, just group them into the HR department. Again, it all depends on who the audience is.

swimlane

On Swimlanes, Creately has some neat tricks that automatically glues shapes to swimlanes so you don’t miss them when resizing etc.

Decide on the start and end points of the flowchart

As trivial as it may sound, a flow with random endings is more confusing than it helps. So choose the objectives and keep it simple.

start_end

Break it down into multiple flows

Very long flowcharts can cause the reader to overlook the details that you are actually trying to convey. It is best to break down a flowchart into sub-flows. Use the connector and inbuilt link feature to create automatically linked documents with sub-flows in Creately.

breakdown

Get your team on-board

Documenting processes or planning steps requires careful review and thinking. You can use Creately’s inbuilt collaboration features to help kick this process off easily.

collaboration

Use colors meaningfully

You can color code your flowchart objects to convey things like Risk involved, Who’s responsible, Process state (Draft/Final), basically anything you want. But always remember to include a legend on the corner so everyone knows how to read the chart.

legend1

@chandika

Try Creately Now

via creately.com

Posted via email from Creately | Comment »

Creately Blog - How to decide on using a 3rd party component

posted26/07/10

How to decide on using a 3rd party component

decision, Development, flowchart, lesson, partners, tips

When you are building a software solution to solve a particular problem, you would be very focused on solving the problem and solving it well. However, from time to time you need supporting components in your solution that are not directly related to the problem you are solving. These are components that are required to complete your solution.

Maybe its a payment system for your online greeting card service, or a spell checker component for your realtime note editor, you would rather look for something that’s already built and working well rather than building it yourself from scratch. This way you can focus on your “core competency”.

This is generally how everyone thinks. So did we. Here at Creately, we chose to use a third party solution to complete a product that we were working on. In the rush and excitement of getting the product out we signed up with the 3rd party service not considering some important factors that we should have. Even though the intention was to avoid reinventing the wheel and save time and effort, the out come was us spending double the time and effort to get the solution to work. Lesson learnt the hard way.

So I thought I would put together a simple flowchart to help us evaluate such situations in the future when such a need arises again. This flow chart explains the basic thinking, and the factors involved in making the decision can be found below.


How to decide on choosing a 3rd party solution.

Picking the most suitable solution
  • How well is my requirement met? Does the solution meet all the feature and functionality requirements I have? Does the solution meet the integration requirements I have?
  • Is the component build for me? Even if the solution meets all my functionality and feature requirements, one thing I have to watch out for is, if it does more than what I need. Will it complicate my product? or my users experience? or my integration process?
  • Is the integration and setup process straight forward? Time and effort required to setup and integrate?
  • What is the financial commitment?
  • Considering all factors above, compare the time, effort and cost involved in building the ideal solution against using the selected solution.
Assessing if the solution can be used to solve the problem
  • Can I use the existing features in the solution to make it do what I want it to do?
  • Can the solution be customized to fit my requirements?
  • What is the time and effort involved in customizing the solution for my need?
  • What is the financial cost involved in customizing the solution for my need?
  • Considering all factors above in A and B, compare the time, effort and cost involved in building the ideal solution against using the selected solution.

@Hiraash

Try Creately Now

via creately.com

Posted via email from Creately | Comment »