Design

Why You Need To Make Canva Your #1 Image Tool

September 18, 2015 by David Jones

Canva has been around for some years now but I only discovered it a few months ago and since then it has quickly become my go-to image and graphics tool and has saved me a lot of time asking our in-house designer to knock me up custom images for blog and social media posts.

What is Canva?

Canva is a web and iOS app that lets you create custom images using templates based on standard image sizes that we use everyday such as for Instagram, Facebook, blog posts, Pinterest and so on. It also has templates for offline printing such as A4, letterheads and resumes, the best part though is the drag and drop functionality along with the hundreds of free images, graphics and illustrations that can be used.

Even though it is very simple to use you can still make some very powerful and eye catching images and they have hundreds of free photos, graphics and illustrations that you can use or you can upload your own images and if you have some budget to spend then there is also n extensive library of premium images and illustrations all for only $1 each!

canva1 — Vibrant images for your content are very easy to make with the Canva illustrations library

Even though Canva has ben around for a few years now but it has seen a large portion of its growth surge in the last 2 years with a 65% traffic surge early this year. $3 million in venture capital funding was raised in early 2013 from Matrix Partners, InterWest Partners, Bill Tai, Lars Rassmusen and Ken Goldman, then in spring of 2014 Guy Kawasaki joined the company as chief evangelist and then had this to say about why he joined and how important he sees Canva:

“Macintosh democratized computers; Google democratized information; and eBay democratized commerce. In the same way, Canva democratizes design,”

Just last month Canva also launched a premium version for businesses called Canva for Work which will allow teams and contributors to edit and upload design images in a shared space within the cloud.

5 Free Photo Editors For Viral Image Creation

May 24, 2013 by Kelsey

Thanks to the exploding popularity of sites like Pinterest and Wanelo have shown that creating visual interpretations of content (like infographic creation), as well as substituting images for the written word itself, can have a big impact. As the web gets larger and larger, it seems like its users are looking toward a more beautifully-design Internet that both inspires and educates them.

Photo manipulation has grown from correction to more of an art form, allowing anyone with an iPhone and the Instagram app to create edited photos with filters applied, easily and in a matter of seconds. This has created a demand for more photo apps that have greater features that are easy to use but can make a photo look how a user wants it.

If part of your social media strategy includes quotes or sharing images of projects or products, then the following free photo editors can certainly help. Each has its own benefits and set of unique tools that can make any image posted on your social media accounts, websites, or blogs stand out better than ever.

Pixlr

Pixlr is a popular and easy to use app because it mimics the major tools of Adobe Photoshop, but it is free and online. This means that you can access Pixlr from any internet browser without having to download (or pay for) any software. Pixlr is great for basic image correction and editing, including resizing, color correction, and cropping. It is easy to save images and the process is fast. Pixlr also has an app for iOS.

PicMonkey

PicMonkey is what most Insatgrammers probably envisioned a great photo editor should be. The controls and options have fun references (e.g. you save file sizes as Roger (Federer? Ebert?), Pierce (Brosnan), or Sean (Penn)) and there are so many creative and fun features: cool fonts, seasonal clip art add-ons you can lay on top of your photos, custom filters that can be applied to only certain parts of the image, beauty filters like wrinkle remover and blemish fix, and so much more.

There are certain fonts and features that are only accessible with a paid membership, which is $4.99/month or $33 per year.

QuotesCover

QuotesCover is an image editor that was created to put words on patterns or images, with a typographic, artistic emphasis. There are hundreds of quotes you can already choose from on the site, as well as color combinations to create the perfect background. You can also upload your own words or images for the background. When you have chosen your words, you chose from 5 different image types: Facebook Cover, New Google Plus Cover, Viral Images (these are square), computer wallpaper maker, and for art prints.

Once you have chosen your image size, it then takes you to a creation tool where you can choose from pre-designed font and color combinations. You can also add your image background.

Once you are ready to download your image, click Download Picture. When saving, do not change the file name until the image is downloaded. Otherwise it won’t download (for reasons unclear).

Using the viral image size is also a great option for creating unique Pinterest pins that can help get your Pinterest account more traffic.

FotoFlexer

This free image editor is online as well. It has a robust set of features and lets you upload a photo from your computer as well as get your photos from a variety of online sources, including Facebook, Flickr, and SmugMug. Once you have chosen your photo, you can begin to make edits, which include the ability to fix red eye, smooth wrinkles, add glitter text and stickers, or even a border. There are also a wide selection of effects (or filters, to the Instagrammers) to add to the photo.

There is even a Geek section, which allows you to use Smart Resize, Smart Recolor, and the Morph feature. Because of its fun stickers and actual photo editing features, FotoFlexer is a great choice for creating viral images with text or just retouching a few images that need help with coloration or red-eye.

GIMP

GIMP is the only downloadable program on this list, and it is most similar to Photoshop. For that reason, it is useful to have some Photoshop experience before using it. GIMP is completely free and has a variety of features, including a customizable interface, photo enhancement, and the ability to open several different kinds of photo formats, including .PSD, the default Photoshop format. GIMP is a great alternative to Photoshop and while it cannot do everything that Photoshop can, it is a great alternative, especially because it is free!

While these are just some of the copious amounts of free image editors online today, these 5 will give you a great start toward creating viral images that could help you get more traffic and views online.

Cheap and Easy Ways to Give Your Restaurant a Facelift

November 13, 2012 by Amanda DiSilvestro

Out with the old and in with the new is a common phrase people use when re-decorating. But what can you do with few materials and a small budget? Turns out, quite a lot. Give your restaurant a quick and cheap makeover can freshen the look of the area and make it more inviting to guests.

Responsive Web, One Web, it’s the Web

August 30, 2012 by Sophia Lucero

Responsive Web Design, like the word “HTML5”, has entered buzzword territory even beyond the web development scene. The advantage, of course, is awareness and appreciation: more people want to know what works best in getting their message out there, not only for the desktop web browser, but also in mobile devices such as tablets, cellphones, and other gadgets that can access the world wide web.

But the disadvantage is hype: people jumping on the bandwagon just because it’s popular, just because they heard from someone who heard from another one that it’s the in thing right now, or at least it’s what they just have to do, without actually understanding what it means.

One myth is that Responsive Web Design consists merely of refitting your current site layout for different window widths. It may be one of the definitive technical features of the term, but RWD speaks of a broader philosophy, one that’s overlooked when it’s mentioned in passing by people who are not in the business of putting it to practice.

From Ethan Marcotte’s A List Apart article, in which he coins the term:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

So RWD is also about becoming aware of context: do your customers access your site on a device with less-than-ideal internet browsing speeds or a cramped screen that prohibit navigating through large chunks of information and imagery? Would they be looking for the same information on your website on a device they whip out when they’re on the road versus when plunk down in front of a notebook or a desktop computer, or should you not presume this for them? Becoming aware of Responsive Web Design—hopefully mobile web design in general—should encourage you to ask these questions and plan accordingly.

But this frame of mind is just the beginning, as RWD opens up to the conversation about the One Web, the idea where all content must be accessible to the user regardless of the device or browser capabilities. That it’s okay to optimize and emphasize what you’re serving up on a smaller, less powerful screen, as long as they have a way of accessing the rest.

This, in turn, represents what the Web is all about (particularly relevant in the native mobile app vs. mobile web debate right now): it’s not about having a Blackberry or an iPhone, or running Linux or Windows. You shouldn’t need to have to download an app to access content, which is often limited at that.

But what does this all mean for me?

The next time you decide on how you’re going to build your website, consider your choices beyond the metrics of profit and popularity. Understand what it actually means to build responsively, openly, and on the Web. Put yourself in your users’ shoes and paying attention to the content you create.

Would you win in the Dark Patterns Awards? Avoid these sneaky, black hat techniques in user experience

June 30, 2012 by Sophia Lucero

User Experience Designer Harry Brignull recently opened submissions for an event called the Dark Patterns Awards, with the goal of shining the spotlight of shame on companies and organizations that resort to shady techniques in doing business with customers. The steps are simple enough: take screenshots and photos of the offending product, email them in, and all will undergo a voting process and an awards ceremony on the Dark Patterns website.

What is a Dark Pattern?

But let’s go back and examine this phenomenon a bit more closely. Dark Patterns aren’t mere background images that tile, but the opposite of what designers call a “pattern”. The term “pattern” is used in interface design to denote a familiar, widely-used technique in presenting information and handling interactions in a certain way.

Yahoo!, for example, has its own Design Pattern Library you can browse for reference, where you’ll see interfaces like photo galleries, tag clouds, navigations, and so on. Other pattern sites include UI Patterns, Interaction Design Patterns on Welie.com, and Mobile UI Patterns.

Patterns are created to address a particular situation and address goals and obstacles a user may encounter in that instance. Patterns are models other designers can follow so they don’t have to reinvent the wheel. Following a certain pattern also benefits users because it keeps the environment they’re interacting with at a comfortable level. It lets them avoid having to learn the interface from scratch and saves both parties time and effort, leading to more successful, satisfying transactions.

Now “dark patterns” are what you might expect to be the opposite of that. Instead of using psychology to make user experience better, “dark patterns” exist to confuse customers to make decisions they wouldn’t make outright. This is often done to make more money from a transaction, or perhaps to extract more sensitive information from them. The worst trait of a dark pattern is that it’s intentional in its sneaky and malicious nature.

However, it’s also possible for you to be doing this in your own ventures unknowingly, perhaps because someone else thought it was a legit idea, or you were using a plugin or service that did. Well now there’s no reason to be ignorant.

Avoid these Dark Patterns!

The slideshow embedded above goes through some of the most popular examples of dark patterns that exist on not just real websites, but well-known and trusted ones at that. Even products targeted at children!

Extra purchases: If you sell products on your website, do you automatically sneak in extra products to a customer’s shopping cart under the guise of an “added value” except they don’t actually come free?

Vague or misleading copy: Does the start of your landing pages and campaigns say one thing in the first paragraph, but actually withhold information that is revealed only in the next paragraphs or fineprint? Here’s an example, as mentioned in this A List Apart article:

Don’t worry your card will NOT be charged for membership during its 30 day trial and there is no obligation to continue with the service after the trial period.

If you choose to stay as a member after your free 30 day trial period your card will be charged a monthly membership fee of ￡14.99.

The first paragraph gives you the idea that you will not be locked in to the service after 30 days. However, the second paragraph implies that signing up will, by default, charge your credit card monthly unless you remember to opt out after that 30-day trial period.

Convoluted settings: Do you make it a challenge for your customers to find the preferences they need and bank on their confusion and frustration to just leave the default ones on?

The likes of Ryan Air and GoDaddy have very intimidating checkout pages that it may just lead users to make purchases they didn’t want in the first place. These days, the poster child for this dark pattern has to be Facebook and its privacy settings.

Here’s a great TED Talk by Dan Ariely on the same topic, containing both user interface examples and real-world examples: Are we in control of our own decisions?

It’s a great question on its own. But are you contributing to that confusion as well?

Getting a sense of good typography with these web and iPhone games

May 17, 2012 by Sophia Lucero

Typography is quite the intimidating universe to get into, but even if you’re not a designer it’s worth understanding even just a fraction of its principles. Your end game, after all, is to create a genuine connection with your audience, and at the heart of your campaign, be it a website, banner, or book, is your message. One that has to be presented in the clearest, most effective way possible.

I first recommend dipping your toes into these resources:

Depending on your interest and goals you probably won’t need to devour every word and concept in there but it’s great to be exposed to possibilities and limitations of the medium. Ideally it would be great for you to understand why blank space (whitespace) is a good thing, when large or small type is appropriate, or why you shouldn’t use the likes of Comic Sans and Papyrus.

But it’s not so easy figuring those things out by simply absorbing material, so some exercises are also worth checking out. Here are some games, both web-based and iOS-based, that will test your typographic sensibilities:

Shoot the Serif

One of the first lessons you’ll learn in typography is figuring out the difference between serif and sans-serif fonts, and more importantly, what qualities each one have. Shoot the Serif, as the name implies, is a shooting game that challenges you to weed out as many serif fonts as possible in a given time.

Kern Type

Even with advanced design tools and typefaces, kerning—the proper spacing between glyphs—should not be overlooked. Kern Type lets you arrange letters to achieve their optimum spacing and appearance. See which typefaces are in use and improve your spatial recognition in this iPad-friendly web app.

Shape Type

From the same folks behind Kern Type, Shape Type lets you edit various letterforms until you arrive at their correct shape. This is pretty advanced stuff for type newbies, but again it’s a great exercise in concepts such as proportion and give you a better sense of how fonts are designed.

Type Connection

Type Connection helps you learn how to pair typefaces in a “dating game” fashion, giving each font family a persona based on the look and feel they exude. Pick a matching strategy, a second font, and see if their “date” prove successful. At the end you’ll get an explanation why or why not the pair works.

Want more?

If you can’t get enough of the typographic goodness, see also The Font Game for iPhone & iPod touch, Typography* Star, and The Rather Difficult Font Game.

A rationale for current design trends: an eye for detail, quality, and good taste

March 21, 2012 by Sophia Lucero

In the recent Smashing Magazine feature, Symptoms Of An Epidemic: Web Design Trends, Mr. Brunborg lists the popular design techniques and elements that has hit the community these past few years as the replacement the glossy, glassy gradients of the “Web 2.0 look”. It’s realism and skeumorphism meets textured and traditional. Get your bingo cards ready and check these bad boys off:

Stitching
Zigzag borders
Forked ribbons
Textures
Letterpress
19th century illustration
Muted tones
Justified or centered typography
Skeumorphic features

Taking pride in good design

Buck Turgidson Cocktail Recipe Cards by Alex Rinker — Vintage type treatments on modern products (by Alex Rinker)

I think the perspective missing in that article is that there’s a large sense of pride in creating graphical elements that imitate real life, since those things stir something in casual, non-designy people the same way they like other forms of eyecandy, or candy in general. There’s also a certain rush, a unique treat in the experience of gazing upon and using such interfaces as you are transported to a slightly different era, yet at the same time enjoy all the affordances that current technology has achieved. It’s like the appeal of Steampunk, which is an amusing marriage between the aesthetics found during the steam engine era combined with the bells and whistles of the modern world.

It may be easy to create the amateurish version of these elements these days, but the truly dedicated designer will spend hours on end perfecting every pixel. If it’s a rushed, half-assed job, it will reflect on the design, and will tell everyone you were just trying to jump on the bandwagon the same way you wanted a “Web 2.0” site, without even caring to figure out what that meant. If it’s a carefully crafted design, the quality will shine through.

Utmost attention to detail in icon design (by Román Jusdado)

I could even dare say that this trend is an on-going challenge among designers. An unspoken contest where one is able to say “I can pull that off” using these familiar objects as the common ground. Of course a more worthy challenge would be to use every form of inspiration in the universe and not be restricted to these elements, but that’s another context.

On a less cynical or narcissistic note, I like to think that designers, especially those for the web, consider themselves artisans and craftsmen that are very particular if not attached to their creations. When they use these current design trends, they tend to evoke those same qualities: authentic, vintage, nostalgic, imperfect, unrushed, simple, imperfectly polished, organic.

What does this mean for you?

Are you succumbing to the trends just because it's in, or because you believe it's a good fit for your brand? Hipster Branding is a blog that mocks the current "hipster" aesthetic craze by redesigning popular logos into that look.

What does this mean for non-designers, clients, and the like? It means this list of trends is getting to a point where you have to ask: where do you draw the line between being “hip” by adapting such an aesthetic, and being a “fashion victim” by slapping on too many of these styles at a time?

The other, more important question of course: do these design elements fit the message that your company, product, or service is trying to promote? Or are you just blindly following the bandwagon because you feel like it, or your designer feels like it?

Design matters.

February 22, 2012 by Sophia Lucero

Last Sunday, John Naughton published an article on The Guardian proclaiming “Graphic designers are ruining the web”, blaming highly aesthetic websites as the sole cause of slow and bloated webpages. If you’re like me and have at least an elementary working knowledge of SEO and linkbuilding, you know this tactic falls right under the term linkbait, and I mean that in the most negative sense of the word. A sensationalist, generalizing headline that’s more interested in gaining hits and hate than a worthwhile discourse.

You’re also probably familiar with one of Google’s newer factors in its search ranking algorithms and that is page load speed and performance so you’ll now this is a noteworthy issue, and are probably curious how design affects that.

Now if you’re not like me in that you’re not too familiar with how websites are designed, built, and delivered, or what design actually entails, then you need to know why the same headline jumps to conclusions all too hastily and why design matters.

Design is not just aesthetics

Graphic design is just one ingredient in creating a website, and there are a lot of types of websites out there. The common denominator may be that they all exist to serve information to patrons from all over the world, but the more specific objectives vary, from the artistic and entertaining to straightforward and utilitarian. Design—not just graphic design, but web design, user interface design, user experience design, interaction design—all exist to understand a company or client’s objectives and build a site that meets them.

Design is understanding that there will be a variety of demographics in a client’s target audience, and that the website must be able to serve those people’s needs satisfactorily, from how fast that page loads, to how easy it is to navigate that site and access the information they need, whether it’s from a desktop, a laptop, a tablet, or a smartphone.

Design is figuring out the most effective way for these people to understand the information being presented to them in terms of content format (blog? slideshow? graphs? infographic?) and other elements of design. Whether that means placing focus on only a few chunks of data at a time, or putting it all in one place at once.

Website bloat is not only due to design

As you can see, there are other factors to prioritize than just performance, and I haven’t even mentioned cost, probably the biggest issue of all. Aside from that, designers and developers rarely have the final say in what goes into a website; clients and project managers usually decide these things beforehand.

Sometimes it’s just the nature of the site to have a ton of content in it, such as news or products, although that’s not really an excuse for things to look unattractive, cramped, and chaotic. Designers and developers need to find a way to balance all of these considerations in a way that pleases everyone, but inevitably, trade-offs in performance happen.

Why design matters

Now that you’ve gotten a glimpse into the role of design in a website beyond “making it pretty”, consider the even bigger value it can make and the lessons that can be learned if you dive deeper. The world’s biggest companies that value design have become hugely successful because their design choices simply aren’t about being easy on the eyes (although that certainly helps), but make an impact on the lives of their customers and makes doing things easier and better, and even more enjoyable. Design is the conduit for that. As Enrique Allen in Fast Company’s Co.Design writes:

Designer founders have unique skills (not just visual) to understand human needs and discover unarticulated opportunities.

Design is a tool, not an obstacle, and if it’s producing negative effects on your product, then you need to reevaluate. The solution is never to toss it aside.

Skip links