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.

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.