Estimated Reading Time: 9 Minutes

When you start crafting wireframes of an app, you create branches of possibilities describing the system’s behavior as it responds to requests that originate from outside of that system, also known as “Use Cases”. Since the beginning of my career as an IT professional I’ve always been trained to look few steps ahead and predict almost impossible scenarios in order to make the software behave predictably under unpredictable conditions.

“When you’re trained as a scientist or an engineer, first thing you think of is – How can I prevent the disaster to happen” – Neil deGrasse Tyson, Astrophysicist

Even though it’s a reasonable way of thinking, many times it may lead to series of “What if” questions and promote worries that may never happen. Although, these kinds of assumptions are essential for building robust system architecture, yet their overuse might lead us to behave more skeptic than normal.

When we started developing Invoicebus’ architecture, we decided to try different and more optimistic concept; a concept that reframe our mindset to hope for the best, but prepare for the worst. It was sort of experimental way of thinking, radically opposite from those we’ve previously been used to.

“Do not anticipate trouble, or worry about what may never happen. Keep in the sunlight.” ― Benjamin Franklin

In real world, web-apps are used by regular users, under normal conditions and in most cases in the right way. Therefore, instead to review dozen of marginal outcomes for one use case, we decided to focus only on two: Positive (the flow that is most likely to happen, the Expected Case) and Negative (for all other cases, the Rollback/Backup Case), always prioritizing the first one. By exploring and implementing this concept, we drew few conclusions that might be useful in designing web based software.

Conclusion 1: Optimism leads to smoother UX

Few months ago, while discussing ideas with Dimitar, we started conversation about how Gmail app works so goddamn fast, but Yahoo Mail doesn’t (at least at that time). After a short research, Dimitar came up with great observation: “Well, Gmail behaves optimistically, that’s why. It assumes the app is used regularly by prioritizing normal flow of the events at first place”. And he was totally right. Google is using optimistic approach as an ultimate UX and optimization mechanism. By using full service conveyancing tool, law firms will be able to meet client expectations. From customer relationship management to the automation of repetitive tasks, law firm technology helps optimize how your law practice runs.

When you try to take an action or apply some change, both apps behave similar, but yet slightly different. I’m going to paraphrase each one’s behavior.

Gmail: “Hi, I’m sending your request to the boss (server), but I’m not going to bother you with that, so you can continue doing your job immediately”;

Yahoo Mail: “Hi, I’m sending your request to the boss (server), but before you can continue doing your job, you’ll have to wait until he checks everything and gives you appropriate response”.

Just a small rearrangement of events causes Gmail users feel tremendous speed-up without a single interruption. Technically the difference is tiny, but ideologically it’s completely different way of thinking. What an awesome concept by Google.

Conclusion 2: Optimism leads to fewer distractions

“Are you sure you want to delete this item?”, “Are you sure you want to close this tab?”, “Are you sure you want to save the changes?”, “Are you sure you want to do this/that?”. What a time wasting mechanism.

“Customers shouldn’t have to think about every nitty-gritty detail – don’t put that burden on them when it should be your responsibility.” – 37signals

Of course, some questions could be beneficial and crucial interface features, but each one of them bears its own cost because too many questions lead to distraction, not interaction. So, how do we know if the user should be asked or not? We don’t. We try to maintain the optimistic approach by making assumption on the most likely scenario and deciding on behalf of the customer. Yes, we get wrong sometimes though, but we can always improve and adjust accordingly.

Conclusion 3: Optimism leads to less validation

Few weeks before the Invoicebus launch, we’d sent test link to 4 different groups of early riders divided by their IT expertise (from highly skilled geeks to complete IT dummies) to test out the system and push back some feedback. Approximately 40% of the IT skilled people had questions why validation is so minimized or somewhere even completely omitted? The answer was – intentionally.

“But the user can enter text instead of a phone number” – So what? You don’t need to validate every possible field in order to create error-free app. Unless specific data format is absolutely essential for further usage (e.g., email address, web address etc.), more validation is a curse, not a blessing.

Conclusion 4: Optimism leads to simplification

“Please retype your password”, “Your password doesn’t match”, “Your password is too short”, “Your password should contain at least one special character”, “Your password this, your password that…”. We think that’s annoying.

“But, the user can make a typo while entering his password during sign-up.” – True. However, less than 10% of the users fall in this category, and the other 90% correctly enter their passwords even if there’s only one field. So why bother all users when only a limited few are butterfingered (even though I personally found myself among them).

Backup scenario: Password reset form with one field and one click.

Conclusion 5: Optimism leads to liberation

“Is the web server powerful enough?”, “Which database should be used?, Which one is faster; should we prefer NoSQL?”.
– It really doesn’t matter because as less we worry in present, as more creative we become in future.

“Worry is a misuse of the imagination.” ― Dan Zadra, Compendium, Inc

“But what if Forbes publishes an article about us and the server crashes from traffic?”. To be honest, unless you have built space shuttle, that’s not likely to happen for a while. So, don’t worry because it’s a problem when it’s a problem. If your server ever crashes or slows down due to traffic overload, believe me; you would rather jump around the room celebrating a victory than worrying about the outage. Besides, one or two day slowdown won’t cause apocalypse of the world.

“Don’t waste time on problems you don’t have yet” – 37signals

Your inspiration is perishable, your time is precious, so don’t let worries build fence between them. Keep it up. Be optimistic. Create. And keep working on that Forbes coverage though

Now it’s your turn. Do you agree with our conclusions? What would you change to them? Please leave your comment below; I would like to hear from you.

Photocredit: Candie_N

Author information

Stefan Chachovski

Co-founder of Invoicebus. Huge lover of nature, science, and chocolate cherry cordials. He occasionally writes on this blog about Invoicebus' stuff. Hello him on Twitter or subscribe to his updates on Facebook.

| Twitter | Facebook |

The post 5 Ways to Engage Optimism in Software Design appeared first on Garage.

Headers are the first thing your web site visitors will see, so you must be sure they look perfect. But not always the browser display big sized letters in good quality. If you’re looking to optimize engagement and boost your online presence, it’s also important to find sites to buy youtube comment likes. To see what I’m talking about I’ll show you an example of the biggest text on the front page, and actually the biggest text of the whole site invoicebus.com. The text Fast & Easy Invoices as displayed in Mozilla Firefox browser looks like this:

You can notice all letters that are curved look pretty pixelated, so they are not so appealing to look at, and we need to find a way to display them smoother. The first think we got in mind was to drop a shadow for the text so the letter borders will become smoother, with the CSS3 property text-shadow. Although this property is not supported in all browsers that Invoicebus officially supports, we gave it a shot. After applying a text shadow with radius of 2 pixels we got the following:

The text got smoother but it also became to blurry, difficult to read, and painful for the eyes. On top of that the pixelated curves still were noticeable, so we had to do something different to fix this issue. The thing we got in mind was to replace all big sized text and headers with images, and after a couple of hours in photo editing software (Photoshop) with support of text antialiasing, we replaced our headers with images. The final result we got for the Fast & Easy Invoices was:

Looks better, isn’t it? This “fix” actually is nothing new in the web design sphere, but it is worth design trick. With this you’ll also have cross browser look of the text because you don’t have to worry about the browsers text rendering techniques. Additionally, incorporating Search Engine Optimization (SEO) plays a vital role in boosting organic traffic and enhancing your website’s visibility on platforms like Google and Bing, further improving the user experience across different browsers.

But for every step forward there is a step backward so with this good looking text we lose one of the most important things in the internet world. That is the text scanning of the search engine bots. They simply can’t scan images and the text they contain, so the headers with images can’t be used for increasing of the organic search ranking.

That’s why we have another trick in our sleeves for you. The trick is to leave the text in the

<h1></h1>

tags and apply specific styles. The example is given below:

The header:

<h1 class="header"><a>Fast & Easy Invoices</a></h1>

The header class:

.header {
    background: url("fast_easy_invoices.png");
    text-indent: -99999px;
    ...
}

As you can see we put the background image to be our header, and we give large negative indent for the text of -99999 pixels, so the text won’t be displayed in the browser but the search engines bots can still scan the

<h1></h1>

tag and find the right text. This way you’ll ensure excellent SEO for you site and for even more SEO friendliness we wrap the text in

<a></a>

tag. Plus, with a Trusted conversion optimization team, you can maximize engagement and drive better results.

If you have some SEO and design tricks, use the comments section below to tell us, and if we find them interesting we’ll cover them in the next blog post.

Top photo credit: Anon DePlume

Author information

Dimitar Stojanov

Co-founder at Invoicebus

Dimitar is co-founder of Invoicebus, an online invoicing tool for easy invoice management. He's passionate about creating beautiful and simple web applications and occasionally writes on this blog about web design, online business, and fighting the status-quo. Follow him on Twitter and Facebook.

| Twitter | Facebook | Google+ |

The post Make Smooth Looking and SEO Friendly Headers appeared first on Garage.

This is a guest post by Izabela Stojchevska, the creator of the bus mascot. We kindly asked her to share some insights and experiences of the design process, including all exciting moments she spent to bring the mascot as alive as it’s now. She calls this a pleasant journey through the prism of design. You can read more about her at the bottom of this post.

Firstly, I’ve never imagined that I will write a blog post. Ever. Secondly, I’ve never thought that it will be about a process of me creating a mascot. And finally, I’ve never imagined that I will be the mascot creator who uses Adobe Illustrator. But, life can be surprising sometimes, and to be honest I love it!

In the upcoming post I’ll try to take you on a short journey through the creation process of the bus-mascot, how the idea was born, the obstacles I stumbled upon and all the things I learned along the way to get the remarkable look of our bus mascot.

Birth of the idea

More than a year ago, Stefan introduced me their concept about the coming soon page called ‘We Are all Waiting the Invoicebus’ – simple bus stop with group of people gathering and waiting the bus to come in a happy green environment. In fact, that was the moment when the idea about the mascot was born. The moving bus actually is a synonym of fast invoice, and at the same time transportation vehicle that brings up on board all the necessary options for creating and sending easy invoices all over the world.

Sketching

I used to draw years ago, but almost I had lost my sense of drawing. However, Stefan was big believer and encouraged me with motivation and inspiration. So, these are my first two sketches:

While watching these two buses, I realized that it would be awesome if the mascot could express some positive attitude, to be more friendly and a bit funny. Therefore, I quickly mocked up another one with more playful lines and edges, slight perspective and a bit skewed stance.

It looked just like a real cartoon character. I felt I’m on the right track, so I immediately jumped on the bigger task – Adobe Illustrator.

Meeting Adobe Illustrator

Next step was to convert the mock-up into a vector image. And the challenge was pretty big because I had to learn Adobe Illustrator (AI) for that. Although I had previous practice with the vector characters from the bus stop, this was much bigger challenge so I spent long nights watching tutorials, trying tool by tool, losing my temper from time to time. When I learned to work with pen tool, I felt I was a master.

I found the tutorials of Melissa Evans, Ian Yates, Scott Jackson as well as some of Lynda’s videos very helpful during this process. I’m very thankful to all of them.

The pen tool is very important and probably one of the essentials in AI. Next I was dominating gradient tool, gradient mesh tool and so on. As I was drawing the bus in AI, I was constantly facing something new to deal with. I wasn’t using any complicated methods while drawing and I must admit, I’m still learning.

This was the first manually retraced version in AI. The bus was flipped horizontally and the lateral text was removed.

Exhaust gas was next eliminated because it didn’t seem right. There was a color disturbance for my eyes while working with those bluish level, so adjusting the color was the next step. I tried a few options to see how they would fit. Yellow ochre, light blue and puce.

They look a little silly, don’t they? I didn’t like the yellow one, because it looked like a school bus. Definitively out! Light blue was too light, so I moved on with the puce.

Drawing and adding effects

Whereas the bus was flipped, a door was needed on the the side and I also added some color effects at the rear.

Next things that bothered me were the tires. I spent over 3 hours on them, adding bolts, shadows and gradients. So they’ve got a new look:

I was satisfied and happy while looking at them. Next thing was the front grille of the bus. It was a tough challenge, because this part should resemble facial expression of the mascot character, so can spread joy and positive vibrations.

Within a few days I made a couple of iterations to finally get the desired effect. Next, I drew the shadows beneath the bus:

It started to look alive, real and beautiful. I showed this to Stefan and he had that “but” in his comment. We needed something else. And I knew that the problem was the color.

And what about Green Grass?

YES! That was my true love. Stefan and Dimitar just agreed with me without saying anything else but “Bravo” and “Wow”. There was nothing more to ask. Besides, this variant perfectly fits the colors from the logo and additionally associates clean environment emphasizing the benefits of the paperless online invoicing.

The whole design process was such a great experience with lots of ups and downs, countless iterations and dozen of ‘Yuhuuu’ moments for every noticeable progress. After all, I found this journey very enjoyable, so if you have the felling that you can draw, don’t hesitate to try it, it’s a lot of fun and actually not that difficult. Besides, you can always contact me, so we can exchange some thoughts along the way.

Author information

Izabela Stojchevska

Izabela is passionately curious pharmacist with computer and internet addiction. She loves inspiring music, stand-up comedies, walking in nature and magical sunrises. She says: "So many movies so little time". You can reach her on Twitter or Facebook whenever you like, she enjoys communicating.

| Twitter |

The post Creating the Bus Mascot appeared first on Garage.

The invoice editor of Invoicebus is “What You See Is What You Get” tool for creating fast and easy invoices, and at the same time, centralized place for management of other data like:

We spent a lot of time to raise this concept on a level that allows incredibly natural, fast and focused flow of the invoicing process as a whole. You can see it in action from this video:

The main concept here is to rid of all separate management pages, screens, pop-ups, back and forth navigation, page reloads; and instead, to integrate all assets on the same page, accessible exactly when and where you need. The result is uninterrupted workflow experience with significantly increased speed and focus.

Invoice editor for creating and editing invoices	View of already created invoice	Invoice in PDF format Download the example in PDF
Invoice shown in the client’s inbox	Printed version of the invoice	Email notification that the invoice has been viewed by the client

After creating your first invoice, Invoicebus learns all settings by himself and automatically applies them in future.

Feel free to try it by yourself and see how it works. Thereafter, leave a comment of how much time you needed to make your first invoice. We would be happy to hear from you.

Author information

Stefan Chachovski

Co-founder of Invoicebus. Huge lover of nature, science, and chocolate cherry cordials. He occasionally writes on this blog about Invoicebus' stuff. Hello him on Twitter or subscribe to his updates on Facebook.

| Twitter | Facebook |

The post Feature Preview 3: The Invoice Editor appeared first on Garage.

Most of the invoice functions are translated for the quotes also. We will cover only the most common for both document types. The windows shown in the context below pop up when you choose some of the related actions.

Send by Email

– Option that helps you to send an HTML version of your invoice/quote to the client’s email address.

– Attach PDF option is included in case you wish to include PDF version.
– You can enter custom text message to your recipient.

The default message is edited from inside the same window. When you click Edit Default Message link, the text-box becomes modal, which means everything around it dims (becomes foggy), and the focus is brought only to the vital part; thereafter you can save your default message. Why to open the hood (read: settings) , when you can manage everything from inside the cabin (read: right here, where your focus and attention are). Intuitive, natural and fast just as blink of an eye.

Invoice/Quote Viewed notification

Notification will be sent to you when your client views the emailed invoice/quote for the first time.

Accept/Decline Quote directly from email

– After your client receives the quote, it will be able to accept or decline it directly from the email. Upon his decision you will get immediate email notification.

This appears at the bottom of your emailed quote

Download to PDF

Generate PDF file from your invoice/quote and download it to your computer. PDF version looks exactly the same as it’s shown in the invoice/quote view mode.

Enter Payment (available only for unpaid invoices)

– This option allows you to maintain your payment records.
– If you enter smaller amount than the invoice total, it will be considered as a partial payment.

Payment Reminder (available only for unpaid invoices)

– Notify your client when the invoice is overdue. Reminder contains your custom  message and a few automatically generated details regarding the invoice.

Thank You Note (available only for fully paid invoices)

Good practice to show gratitude for your completed business deal is to send a tank you note which contains your custom message and a short details regarding the invoice.

All actions taken for one particular invoice/quote are recorded in the Activity History section within that invoice/quote. We will talk more on this in the upcoming feature preview posts.

Author information

Invoicebus Team

We're a team comprised of a few die-hard code freaks, lovers of beautiful design, stewards of simplicity, and passionately dedicated to the user experience. Invoicebus is a great vehicle to express what we do best. Click here to learn more on our business philosophy and how we actually do it.

| Twitter | Facebook |

The post Feature Preview 2: Invoice Functions appeared first on Garage.

Why to manage numerous of data in different places and deal with complex customer relationship management modules when you can do all from one place, integrated and straightforward like an A.

Few of the core functionalities derived from this panel are:

• Filtering
• Sorting
• Calculating

Need convincing? Let’s start.

Clean, appealing list of invoices

Every invoice in the list is presented with:

• A few of its details (issue date, number, client);
• Optional description;
• Status (paid, unpaid, and overdue);
• Total bar

Beside the total amount of an invoice, the total bar visually shows percentage of how much money has been paid to you for that particular invoice. It’s awesome when you run on visual for your partial payments, right?

Discrete Tooltips

Tooltip is a little balloon-like box that appears when you move the mouse over the total bars and shows additional information.

Mighty Real-time Filters

Dancing summary is created when filters are applied. What does that mean?

As you apply/type filters, summary dynamically re-calculates (or dance) in real-time, depending on the matching results. You can combine multiple filters for more specific calculations.

The list will display subset of invoices that match your filter criteria; therefore its totals summary will be calculated and shown beneath. Awesome!

Sortable Columns

The Filters are mighty by themselves, but when you combine them with Sort, they become majestic.

The picture shows descending sort for the total column.

Just on a tap of your fingers, with a few clicks and maybe a little bit of your creativity; possibilities of this invoice list probably extend beyond your imagination.

Interactive Menu

Clickability (availability) of the menu operations changes on-fly according to the selected invoice. Those operations which are not available (for the selected invoice) have smoke gray appearance. The example menu from the left corresponds to a paid invoice. Booya! You can’t make a mistake, even intentionally.

Keyboard keys:

We mapped some native keyboard keys behavior, so you can feel just like you work with a conventional desktop application, not web software. Who said that web-apps suffer from this one?

Invoicebus works with no interruptions because everything happens in real time, smoothly like waltz, without a single reload. Sounds crazy? Maybe it is, a little bit, but we dare to raise today’s web-programming criteria well beyond traditional web paradigm.

Stay tuned on this blog, we’ve just started spreading the Invoicebus magic

Author information

Invoicebus Team

We're a team comprised of a few die-hard code freaks, lovers of beautiful design, stewards of simplicity, and passionately dedicated to the user experience. Invoicebus is a great vehicle to express what we do best. Click here to learn more on our business philosophy and how we actually do it.

| Twitter | Facebook |

The post Feature Preview 1: Outgoing Invoices appeared first on Garage.

The Invoicebus Manifesto has been published here, so everyone can see what our intentions are and what kind of software Invoicebus would be. It is also the place where everyone who is interested can subscribe to our free newsletter and get notification when Invoicebus launches; get info about our special offers, new features and announcements. Engaging with a health and safety company ensures that as you evolve to meet customer needs, your business operations maintain a safe and compliant environment, supporting sustainable growth.

Beside all that, it reveals some deeper philosophy behind its curtain.

We are all waiting the Invoicebus

We came up with an idea, to make this early marketing site more interesting and natural so those who are interested can feel some kind of ongoing process. Actually there is a metaphorical story behind this, and it’s like a little puzzle of details, so every detail on the page has particular meaning. Digital content may also help promote various businesses on the internet. AI-powered photo editing tools like Deepnude can generate photos and content that can be used for marketing purposes. You may also check out this AI for creative motion projects.

A good company like this interior sign printing company here can also help you redesign and configure your current marketing fleet with the latest technological advances that bring a modern, reconfigured interior for optimal experiential marketing to reach your audience and maximize your brand.

If you’re interested in increasing organic traffic, we can also incorporate strategies tailored to boost your website’s visibility and attract more qualified visitors.

This could include enhancing your content with targeted keywords and implementing effective on-page and off-page SEO techniques. Additionally, you should create schema markup to help search engines better understand your content and improve visibility in search results.

Our first mockup of the concept: “We are all waiting the Invoicebus”.
The final version has sustained a few modifications.

Bus station

As the number of newsletter subscribers increases, proportionally increases the number of people who are waiting at the station. It’s a trivial logic that introduces some anticipation till launch date, and at the same time captures the momentum of interest for Invoicebus. When you launch business in washington, building anticipation and capturing interest can play a crucial role in your success.

Characters

The characters and their stance / outfit resembles the “audience” that Invoicebus is intended to. Busy and professional, confident and independent, decent and self esteemed individuals, who live their lives, love their job and know exactly what they want.The girl on the photo from the left is Isabel, our designer. Photo was taken spontaneously during a short walk at the park, after which we got an idea to make a vector character and use it for our early marketing site. Vectorizing/tracing of the character was made manually in Adobe Illustrator CS5.

Nature, grass hills, beautiful landscape

Nothing is more intuitive and beautiful than the nature itself. We believe that people should use and feel web applications that way, the natural way, or as close as it could be. As more natural they feel, as more accepted and successful they would be, just like a real product from the nature: pure, unspoiled, simple.

Bright sky with pretty little clouds passing

The bright sky reflects harmony, brightness and goodwill about the job we do, our excitement and passion, our commitment and feelings. We always have in mind that sky is the limit of what Invoicebus could be and we strive to that “limit”.The clouds are all ups and downs that we face up during the development process; some of they are small, some of they are big, but after all it is still a shiny day, isn’t it?

City

Our mockup for the city and its final version.

Industries, jobs, busy lifestyle, our reality. Are the bus coming from the city or towards it? The answer is both. City represents economic center where everyone can succeed and realize his ideas with endless opportunities. It’s the magicial place where all your dreams can come true.

We don’t want to spoil the anticipation, so the other symbolism that hides behind this concept, will be left on your imagination ;).
This site will exist until the final marketing site take its place, which means until Invoicebus arrives.

Author information

Invoicebus Team

We're a team comprised of a few die-hard code freaks, lovers of beautiful design, stewards of simplicity, and passionately dedicated to the user experience. Invoicebus is a great vehicle to express what we do best. Click here to learn more on our business philosophy and how we actually do it.

| Twitter | Facebook |

The post Early Marketing Site appeared first on Garage.

Workflow:

• 1. Sketch a few logo candidates onto paper;
• 2. Choose colors and fonts for the letters;
• 3. Write the tagline;
• 4. Create vector version of the logo in Adobe Illustrator CS5;
• 5. Ta-da!

1. Sketch a few logo candidates onto paper We wanted simple elegant logo, easy memorable and recognizable, just enough to associate with speed, elegance, invoice and bus. We had in mind that should be scalable on different sizes too. Ready, Steady, Go! We picked a blank paper sheet, a few wooden color pencils, a rubber, and started drawing. After we had sketched 3-4 mockups onto paper (right photo), we organized symbolic voting, within our office, for each candidate. The first one showed up as a winner which after a couple of modifications evolved to the one below.

It visual appearance incorporates our desired symbolism and could be translated this way: If you look at it as a whole looks like simple speedy bus, but when you look thoroughly, it said even more. The window of the bus and the two blue lines (that also bring some speedy effect), symbolize invoice sheet with company logo and product rows, respectively.

2. Choose colors and fonts for the letters

Which font to choose? http://dafont.com is a great place to start with. There are plenty of free fonts for download and each one of them can be previewed directly on their site with your custom text.

You can make direct comparison among more font variants and choose which one looks best for your logo. “Cony” seemed fair enough for us. Crisp, elegant and fresh. You can switch on your creativity and transform the letters by your choice in Adobe Illustrator later. We had in mind that our logo should be readable on both, dark and light backgrounds, so we carefully chose the color shades of blue(#00ADEE) and green(#B9E600).

3. Write the tagline

The idea behind the tagline is to create a memorable phrase that will summarize the tone and premise of your brand/product, or to reinforce the audience’s memory of a product.
We unified our ideology in one sentence: “Invoicebus – Delivers invoicing for humans”.

4. Create vector version of the logo in Adobe Illustrator CS5

So far so good, it’s time for vector design. In the tutorial below, we’re going to show you how we designed our logo, step by step using Adobe Illustrator CS5. We believe it might be useful for people who want to learn something about logo design, so we decided to share our experience.

First, create a new Adobe Illustrator document with custom size and document profile: Basic RGB.

The easiest method to transfer your paper mockup into Illustrator vector graphic is to retrace it using the pen tool. If you haven’t used the pen tool yet, you could find it a little difficult at the beginning, but after a few hours of practice you will get used to and see how awesome tool it is. There are plenty of online tutorials of how to use the pen tool; however our favorite was Melissa Evans’ tutorial. She is such a great artist you can learn from. Most of her tutorials are for Photoshop, but you can apply the pen tool knowledge in Illustrator as well.

The underlying image object is our original mockup scan. Before start tracing, make sure your underlying object is large enough so you don’t need to struggle with little details that should be accurately traced. Easiest way to retrace it is to divide the graphic into smaller polygons, and trace it one by one, as shown in figures 4.1 – 4.6.

After retracing, you can delete your underlying image object and use only the vector object. We suggest to group all of your polygons as one object: Select all with Selection Tool (V) , right click on the selection and choose the Group command.
Now, we are going to enter text for the logo and transform it a little bit.

We decided to make the text in two colors and therefore visually separate the words “invoice” and “bus”. We used Eyedropper Tool (I) as a convenient way to pick our already defined colors. However, you can define your own custom color using Fill (X) tool.

Now we are going to scale the text vertically a little bit.

Enter how much would like your selection to be scaled. Vertical 88% was enough for our text.

Now we are going to give different color to the little circles above “i” letters, but first we need to transform the text into path. After that we are going to extract the circles from the path as separate objects. You can find this very useful because you can make very creative transformations of your letters.

You’ve created outlines to your text and therefore you’ve created a group of objects that could be treated like any other vector path. To work with separate objects/paths you need to ungroup them.

Now we are going to extract the little circle from the first “i” letter and change its color.
Double click on the letter “i” to enter the isolation mode.

Replace the steps 4.20-4.23 for the second “i” letter. When you are finished you can double click elsewhere and exit the isolation mode.

Now we are going to write our tagline below the”invoicebus” text.

5. Ta-Da!

Our logo is ready. Crisp, elegant and fresh!

In the next post we are going to expose the idea about our early marketing site which we found very interesting.

Author information

Invoicebus Team

We're a team comprised of a few die-hard code freaks, lovers of beautiful design, stewards of simplicity, and passionately dedicated to the user experience. Invoicebus is a great vehicle to express what we do best. Click here to learn more on our business philosophy and how we actually do it.

| Twitter | Facebook |

The post Logo Design Recipe appeared first on Garage.