Archive | Graphic Design RSS feed for this section

20 Amazing Designs of Simple Mobile UI

One of the most overlooked idea in web design is simplicity. Some of the best web and mobile app designs have a very limited colour range. Take a look at Facebook or Twitter’s logo. Two or three colours can be more than enough. A restrained selection to colour works well, especially on simple interfaces. The use of colour in design is a bit like great music, where balance, contrast, restraint and dissonance all come into play.

In this post, you will find twenty examples of mobile interfaces that primarily focus on two or three colours, along with plenty of neutral space, and a lack of unnecessary clutter. In other words: simple and minimal design. Less is more. We’ll begin our list with:

1. Paratt

This is a very clean and content-focused mobile interface. It allows product imagery and logos to inject more colour into the overall look and feel.

2. Help Make It

This app uses a blend of black, white and peppermint, alongside with distinctive typography.

3. Anhanguera

Anhanguera’s brand colours are reflected throughout its mobile site. It regularly inverts these three core colours, to mix things up for the user.

4. Fashion Adviser

This app designer also knows that various shades of grey work a treat alongside hot pink.

5. Guide

This app uses its third colour as a kind of navigational anchor for the eye.

6. SnelTrein

One of the nicest train app in the world.

7. PrivatBank

Icons are proving increasingly popular. Big icons don’t require any labels, and are better still.

8. Bitcoin app

The interface design is surprisingly clean and strident typography. This is also a good example of reversing out colours.

9. Paywholla

Very clean and very flat color. A little bit dull, though.

10. The Corner

How’s this for minimal? The monochrome, type-driven approach may be too cold for some people. It looks fit for purpose.

11. Peek Calendar

This certainly appears to be a rather elegant way of expanding content on a mobile device. Not a new stuff.

12. DNB

This app design has three main colours to establish a compelling visual experience for users. This makes good use of limited screen estate, with clear navigation prompting the user into action.

13. Swing

Swing is a concept for a music app that has embraced flat design. No visual clutter. Lots of black, white and red, with images once again used to add colour.

14. Target

Target’s in-store mobile app relies on three main colours, and is very big on iconography, a trend in modern web design.

15. Fantasy League App

Really nice typography, plenty of space, and another example of trichromatic design.

16. Airwala

What a beautiful design for a travel app. Typography is design.

17. Outfit Of The Day

This fashion app is big on iconography and a subtle colour palette, allowing the high quality imagery to stand out.

18. MenuSpring

A good-looking app aimed at restaurants.

19. Coffee App

Skinny, lightly-coloured fonts against a dark background can provide poor contrast, but the full size screenshots look better.

20. Unvit

An easy-on-the-eye app for connecting up multiple social networks. Icons, plenty of space, and shades rather than mutliple colours.

5 Important Things We Forget Before Launching A Website

5 things To website developers, like us, launching an online presence is often not a big deal. We do it all the time for our clients. Sometimes, the act becomes so “automatic” that we forget how big of a deal it is for the client. From where clients stand, launching a website is, indeed, a very big deal. It is especially a big deal to those who are embarking their online presence for the very first time. To them, the act is not “automatic” but rather “ritualistic”. Think of this process as a young lady celebrating her sweet 16, with all the candles and the gowns. And we’re “catering” the affair. It may seem simple website creators but to the client, its a major step toward business development. We need to be reminded, from time to time, of the significance of the process. Not because it’ll affect our bottom line. This is more about being better at what we do–every single time a Web development project comes our way. So as you sit your cramped cubicle or living it up in your swanky studio space, consider how we are the so-called “caterers” of every sweet 16 party. Here are the five important things that slip our minds when launching a website.

1. The Browser Issue

Cross-browser testing can be a headache. Sometimes, most of us don’t bother doing it at all, content on the thought that nobody uses Internet Explorer anymore, or Netscape for that matter. That’s where most of us are wrong. We tend to overlook that some of the guests or maybe even the debutante herself, are vegetarians. Yes, in the real world, some users still use the old browsers. There are so many browsers in the Web and it is wrong to assume that we all use the same one. So make sure to test every site in all browsers.

2. Responsiveness

Gone are the days when people visit sites using their PCs and laptops. Today, most modern consumers own a smartphone and they surf the Web using these small but handy gadgets. Thus, these users demand a mobile-compatible site. One that doesn’t demand heavy sideways scrolling. There are lots of online sources that tests websites for mobile-compatibility and these services are often free of charge. Responsinator.com is one of these sources. Go check it out.

3. Meta Descriptions

In order to get the maximum possible hits for search engines, make sure to put proper meta descriptions on every article within the site. Think of it as directions to the event where the party is happening. What good is a birthday bash if nobody shows up because they don’t know its location? Meta descriptions will help Web crawlers and spiders track your site, page by page; thus, creating heavy traffic. Putting meta descriptions is not hard. Sometimes, all it takes is a proper page title for every page.

4. Favicon

A favicon is a 16 x 16 or 32 x 32 pixel icon, which is lodged up there in the address bar beside the page title. It is literally a small thing, but yes, it is very important because it adds identity to the site. And if it adds identity, then it is SEO-related. To some designers who fall short on the technical server-side of things, there are a lot of tutorial sites out there with step-by-step instructions on how to set-up a favicon.

5. The 404 Error Page

This is often overlooked. Basically, the error or 404 page takes care of the broken links in our sites. Two of the most popular blogs like Blogspot and WordPress have included the 404 setup in their platforms so there is no more excuse even for bloggers not to set-up the 404. Think of this as a way-finder signage for lost guests. We don’t want the guests wandering outside of the party perimeters, do we?

A Collection of Motivational Quotes for Designer’s Inspiration

Motivation and inspiration. They are the two most important things for any graphic designers. No matter how tough the graphic designers are, sometimes they need a little motivation and inspiration, which may come handy. Today, The Website Marketing Group a nice collection of sixty quotes from designers, artists and other people with their views on design. Check them out:

1. Good design is all about making other designers feel like idiots because that idea wasn’t theirs

– Frank Chimero

 

2. Design is easy. All you do is stare at the screen until drops of blood form on your forehead

– Marty Neumier

 

3. Practice safe design: Use a concept

– Petrula Vrontikis

 

4. I love the comment, “You must love designing for a living.” At that point I usually start to laugh or break into uncontrollable tears

– Andrew Lewis

 

5. It’s art if can’t be explained. It’s fashion if no one asks for an explanation. It’s design if it doesn’t need explanation

– Wouter Stokkel

 

6. Every child is an artist. The challenge is to remain an artist after you grow up

– Pablo Picasso

 

7. Beauty is the ultimate defense against complexity

– John Carmack

 

8. Good design keeps the user happy, the manufacturer in the black and the aesthete unoffended

– Raymond Loewy

 

9. In design man becomes what he is. Animals have language and perception as well, but they do not design

-Otl Aicher

 

10. Designers can create normalcy out of chaos; they can clearly communicate ideas through the organising and manipulating of words and pictures

– Jeffrey Veen

 

11. Design from the spine and you’ll be fine

– Carl Heaton

 

12. Everything is designed. Few things are designed well

– Brian Reed

 

13. The client may be king but he’s not the art director

– Von R. Glitschka

 

14. Graphic designers are idea embalmers. loving undertakers preserving bits of data like so many butterflies pinned to felt in a jewel box

– Paul Saffo

 

15. To create a memorable design you need to start with a thought that’s worth remembering

– Thomas Manss

 

16. Graphic designers are, by and large selfish and spoiled. They stubbornly control and individually design things that are generally smaller than them, perfecting to a level appreciated only by people like them. They don’t share and play well with others

– Wayne Hunt

 

17. A picture is worth a thousand words. An interface is worth a thousand pictures

– Ben Schneiderman

 

18. Good design is all about making other designers feel like idiots because that idea wasn’t theirs

– Frank Chimero

 

19. Remember it takes a lot of shit, to create a beautiful flower

– Jacob Cass

 

20. Design is a good idea

– Emigre

21. If you know how to use a pencil to draw, you could draw anything. Now apply that to everything in life

– Justin Durban

 

22. We aren’t designing photocopies of web pages, we’re designing web pages

– Andy Clarke

 

23. A computer without Photoshop is like a dog with no legs. Sure is fun, but you can’t really do anything with it

– Benjamin Cavanagh

 

24. A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools

– Douglas Adams

 

25. Everyone is an artist

– Joseph Beuys

 

26. Colour does not add a pleasant quality to design – it reinforces it

– Pierre Bonnard

 

27. Marketing without design is lifeless, and design without marketing is mute

– Von R. Glitschka

 

28. Without good design it is easy to miss the point

– Bjarni Wark

 

29. Design is not the narrow application of formal skills, it is a way of thinking

– Chris Pullman

 

30. The life of a designer is a life of fight: fight against the ugliness

– Massimo Vignelli

 

31. In the design process, my gut instinct is my best critic. I just wished I would always listen to it!

– Bryan Tamayo

 

32. Art is like masturbation. It is selfish and introverted and done for you and you alone. Design is like sex. There is someone else involved, their needs are just as important as your own, and if everything goes right, both parties are happy in the end

– Colin Wright

 

33. Design has become the cover for unnecessary consumption

– Peter Saville

 

34. Design is creativity with strategy

– Rob Curedale

 

35. Stop looking at yourself as a designer and start thinking of yourself as a deliverer of ideas

– Stle Melvr

 

36. No masterpiece was ever created by a lazy artist

– Salvador Dali

 

37. Good ideas turn into good designs fairly quickly. If you catch yourself fiddling too much with colors, borders and treatments to bring a design together, chances are the problem lies somewhere deeper

– Ryan Singer

 

38. We can’t just design an item that looks great. We also have to anticipate how it is boxed up, distributed, and shipped, as well as whether or not a seventeen-year-old kid with a summer job can stock it on the store shelf without ruining it

– Robin Perkins

 

39. Art has to move you and design does not, unless it’s a good design for a bus

– David Hockney

 

40. Good design goes to heaven; bad design goes everywhere

– Mieke Gerritzen

 

41. The difference between a Designer and Developer when it comes to design skills, is the difference between shooting a bullet and throwing it

– Scott Hanselman

 

42. People ignore design that ignores people

– Frank Chimero

 

43. Never re-invent the wheel, unless you’re sure the client needn’t go anywhere

– Russell Bishop

 

44. Making good design is easy. It’s polishing the half-assed stuff that takes time

– Stefan G. Bucher

 

45. You can have an art experience in front of a Rembrandt… or in front of a piece of graphic design

– Stefan Sagmeister

 

46. Whether we like it or not, our legacy as designers is ugly. We’re largely responsible for fueling a culture of consumption

– Eric Karjalouto

 

47. Graphic designers find themselves in a role of visual dishwashers for the information Architects’ chefs

– Gunnar Swanson

48. My rates are as follow: $50 per hour, $75 per hour if you watch, $100 per hour if you help

– Santiago Borray

 

49. Design is like a mom, nobody notices when she’s around, but everybody misses her when she’s not

– Santiago Borray

 

50. A designer who gives her art away, makes no pay, A designer who keeps her art to herself, makes no friends

– Amber Seree Allen

 

51. Good design means never having to say “Click Here.”

– Shawn Leslie

 

52. Being a graphic designer gets you used to rejection of your brilliance. So it’s good practice for dating

– Heather Phillips

 

53. Inspiration the seed. Design but the flower

– Michael Langham

 

54. Every designers’ dirty little secret is that they copy other designers’ work. They see work they like, and they imitate it. Rather cheekily, they call this inspiration

– Aaron Russell

 

55. Design should never say, “Look at me.” It should always say, “Look at this”

– David Craib

 

56. Design is intelligence made visible
– Alina Wheeler

 

57. Designers are meant to be loved, not to be understood

– Fabien Barral

 

58. You can’t do better design with a computer, but you can speed up your work enormously

– Wim Crouwal

 

59. Maths is easy; design is hard

– Jeffrey Veen

 

60. Graphic design will save the world right after rock and roll does

– David Carsong

 

Check Out These Add-To-Cart Buttons

Riddle me this: We all do the same thing; however, some of us do it better than others — this could be due to our attractiveness, efficiency or placement. But whatever it is, the aspects that make us successful also make us desirable amongst Internet shoppers. What are we? If you guessed “add to cart” buttons, you are correct. These buttons are among the most important design elements on an e-commerce site. A successful button impacts conversion rate, but also reinforces brand identity. Testing different add-to-cart options is the only way to know for sure what button/icon style works the best for your site. However, taking some pointers from some of the biggest and most successful e-commerce companies on the Web can prove to be very valuable. Here are some examples of successful brand’s add-to-cart buttons: Best Buy This add-to-cart button is featured in the middle of the right side of the checkout page. Although the button could be larger, it is highlighted by a Best Buy-yellow rectangle. The button features a clean and simple design of a gray cart, with the common verbiage “Add To Cart” within it. In the space around the cart, Best Buy provides the price, discounted price, and “add to wish list” option. Additionally, for qualified products, Best Buy provides a “protect your product” option as well as promotional free shipping if available. Although it is not the flashiest checkout button, it provides unification across the site by simply being the same color as the brand’s famous logo. Victoria’s Secret Instead of a cart icon, Victoria’s Secret uses a pink shopping bag, which is similar in design to the bags used in the retailer’s brick-and-mortar stores. This call-to-action button is featured in the lower right corner of the page and is directly under options such as size and colors of the item to be purchased, and directly beside a wish list button. The button is simple in design, which meshes well with the rest of the site and the brand. The text on the button simply says “Add to Bag”, and the button’s larger size makes it difficult to miss — which is ideal for merchants. Target Target also keeps its call-to-action button simple. However, because of its red and white color, it still strongly reinforces the brand’s identity. Unlike the other buttons mentioned, it is featured in the middle-left side of the page. The text inside the button says, “add to cart”, and although the button is only medium in size, the space around it is appropriately utilized by providing reviews, the ability to like the item on Facebook, add the item to a registry, add the item to a list, share it or print out an image of the item. Bloomingdales Similar to Victoria’s Secret, Bloomingdales uses its signature “Little Brown Bag” as its call-to-action button, which is displayed in the lower-right corner of the page. The text on the button says “Add to Brown Bag.” Similar to Target, Bloomingdales makes good use of the space around the button by providing an option to find the selected item in stores, email the item to a friend, add it to a wish list or share it through social media. After a consumer chooses an item, text appears that tells the consumer how long the item will take to ship. One criticism is that the color doesn’t pop out on the page, especially since the rest of the website is also primarily black and gray. Read More…

Creating Effective Call to Action Buttons

It’s time to get serious – about your buttons… your call to action buttons. “Calls to action” are the requests for those visiting your website to perform some specific action. That request could be to complete a sale, fill out a form, or share information with friends or colleagues – whatever it is that ultimately meets the objective of the page the user is currently visiting. So what is a good call to action and how can you as a Web professional increase the likelihood the visitor acts upon your requset? Here are a few guidelines for creating an effective (serious) call to action button: – Take the Wording Seriously: It is not uncommon for Web designers to guide the button creation, and hence the wording of those buttons, during development. As you might imagine that is a pretty big mistake. It is important to express a benefit or positive result, use active verbs (learn, add, submit, modify, etc.), and to use wording that is consistent throughout the site and which leads the user to pages which reflect that specific call to action. – Seriously, Placement Matters: You would not hide the register at a brick and mortar store, so you should not hide the call to action buttons on your website. Placement matters (seriously) so make calls to action the logical conclusion to the content on the page and in what is referred to as the “eye path”. – Seriously Focus on Button Quality: If you look on a heatmap it is the one area of a page which generates the most attention/heat – it’s the call to action button. For this reason it must be instantly recognizable, consistent across the entire site, and visually charged (easy to locate with 3d effects or drop shadows). As a support mechanism consider adding mouseover effects to secure a users attention. Just a few thoughts on creating strong calls to action with buttons. Any advice for other WM readers?  

Don’t Kill the Infographic – Design Killer Ones Like These

Only about a year ago, infographics were the darlings of the Web – favored by marketers, designers and content consumers alike. Today, however, you will see quite a bit of blogging and commenting from people calling for a virtual cease-fire: “Please, no more infographics!” So, what happened? Like most anything else Internet users place on a pedestal, infographics have almost been done to death – which would truly be a shame if it plays out that way. Originally used to represent important data and statistical information in a more visually pleasing and more easily consumable way than plain text, infographics have become an excuse for creating increasingly larger, less useful and oftentimes incomprehensible art projects. Many marketers and designers have lost sight of the fact that infographics should be driven by the data they provide. Too often today, the statistical data (if any is included) takes a back seat to competing elements, making it more difficult if not impossible to extract any useful information. Others seem to mistakenly believe that the larger an infographic is, the better; as if shouting your message into someone’s ear is more effective than speaking in a normal tone. A well-designed infographic that provides useful information still carries a lot of weight for any business. To preserve the integrity of infographics and to reap their full benefits, Web companies must be smart about when and how they use them, and designers must maintain their focus on delivering the message in a powerful but helpful way. Some simple tips include trying to create something unique without losing the message in the translation; visualize the data you are trying to convey and then tell the story through your design; use the most readable fonts possible for numerical data, and save the fancy typography for eye-catching titles. Below are some examples for inspiration: 60 Seconds on the Web by Shanghai Web Designers Facebook vs. Twitter by Digital Surgeons The Content Grid by Eloqua Optimal Email Times by Pure 360 Our Connected World by GigaOM  

Flip Video: Facebook Profile Video

Here’s a cool Facebook campaign from Flip Video Singapore. They’ve just launched this Flip Your Profile app on Facebook which allows users to upload a profile video. With this app Flip Video have fused an engaging video platform into the world’s largest social network site. This app has huge amounts of potential and has been well designed in terms of ease of use and accessibility, the whole process of updating to a profile video is complete within two easy steps. I can see this as having great reach within Facebook as users embrace this new way to express themselves. Flip Video are even running a beta program for Facebook pages which will let page owners update to a profile video, this offers some exciting opportunities for brands within Facebook. It’ll certainly be interesting to see how this spreads and if they roll it our for their other international Facebook pages. Watch this space.

Graphics Optimization

What is graphics optimization and how does it benefit   Web enterprises?

Graphics optimization is the process of creating smaller, more efficient image file sizes in online applications that will consume less bandwidth and reduce the time it takes to load and display graphics. For most, this process simply has meant choosing to “Save/Export for Web” in their various software applications, or increasing the compression levels of any of their .jpg imagery. However, true graphics optimization goes far beyond these very basic initial steps and benefits both users and businesses.

Financial Benefits: Smaller image size means less bandwidth needed to process information. For many of the smaller companies who are often paying by the Megabyte or Gigabyte for their site’s hosting services, those costs can add up quickly. Smaller imagery also has the added benefit of requiring less storage space for the same amount of information — resulting in less server space being consumed. And, most importantly, faster page and image loads will almost certainly lead to a more positive experience for website visitors — a more positive experience generally leads to repeat visits and higher sales.

Environmental Benefits: Less server space needed to store and process information and less time needed to access that same information can result in a significant decrease in electricity consumption. Faster processing of information can also work to extend the life of older equipment, thereby reducing the amount of hazardous waste being introduced into the environment.

Societal Benefits: Many individuals in developed countries still do not have access to high-speed Internet connections, with even fewer having access in still-developing nations. Non-optimized graphics that might go unnoticed on a T1 connection can add 30 to 60 seconds or more to page loading times on a dial-up. Webmasters who employ graphics optimization techniques will help to better serve populations which can not afford or do not have access to broadband connections.

_________

Experimentation in techniques is often the key to
achieving the smallest file sizes possible.

_________

What is the key to optimizing Web graphics?

One of the most important aspects of graphics optimization is to have a strong understanding of the various graphical file formats available and how (and when) to use them. For example, .jpg is often used as the default file format by many Web developers when inserting images into Web pages. However, the .jpg format works best for photographic imagery, and any “drawn” imagery (buttons, logos, etc.) will often look as good or better and be substantially smaller if saved into an 8-bit .png format. A .gif will also work but the .png file format tends to achieve better results for most
drawn imagery.

It’s also important to understand color bit-depth, and the fact that minimizing the number of colors needed to display a graphic on-screen will result in significantly smaller file sizes. Many Web developers will often load all of their .gif or .png imagery with a full 256 colors (8-bit), when 5-bit (32 colors) or 6-bit (64 colors) will display the same graphic with no discernible difference on-screen.

If developers around the planet would commit to performing the above two steps when inserting graphics into their websites (selecting the optimal file format for the job, and minimizing the number of colors needed to display the graphic on-screen without negatively impacting its appearance), there would be a dramatic decrease in bandwidth consumption and page load times across the Internet.

Is there one file type that should be the de-facto standard?

I am committed to the concept that one size does not fit all. Every graphic is different. Every website is different and there are many methods in which graphics are introduced into Web pages.

In general, however, .jpg should typically be used for photographic imagery, while 8-bit (or less) .png should typically be used for most drawn imagery. There are exceptions to every rule, so I would stop well short from using words such as “always” or “never.” Also, all .jpgs, .gifs, .pngs, etc. are not created equally.

Some .jpgs I have optimized have been reduced in file size by over 90 percent, while applying the identical steps and techniques to another .jpg graphic might only achieve an additional 8-10 percent reduction in file size. Also, .gif files 1 KB in size (or less) will often be smaller than their .png equivalents.

Experimentation in techniques is often the key to achieving the smallest file sizes possible. However, one must also weigh the time spent experimenting with different techniques against the benefits they achieve. Numerous batch optimization processes are available as well, although batch techniques typically will not achieve the very smallest file sizes possible on their own.

Should there be one standard or uniform process to create these files?

My dream for the future would be that the “Save/Export for Web” step in most major design software programs would eventually be intuitive enough to incorporate many of the primary optimization techniques without needing to perform additional steps after creating the graphics. However, until that day is realized I’m not sure that one standard or uniform process is available. If designers and developers can at least make sure they are choosing the correct file format(s) and are minimizing the number of colors needed to display each graphic while educating themselves on the additional optimization tools, the benefits to website developers, owners and society as a whole would be enormous.

Are there other steps or practices that designers can take to improve performance?

On almost any website, even discussion forums, graphics will typically result in well over half of the bandwidth used to load and display each page. One key (in addition to optimizing graphics on your site) is to make sure that you minimize the number of graphics needed in order to convey your message and content. CSS effects can often replace the need for using graphics in navigational menus. Faster images can often minimize the benefits of splicing imagery, thereby reducing the overall number of image “calls” and speeding up the page load process.

Of course, there are many additional steps one can perform to make their imagery even smaller in file size. As an example, zonal compression — compressing different portions of a graphic in different zones or portions of that graphic — is a tremendously powerful resource that can reduce an optimized .jpg graphic by an additional 20-30 percent or more. Several tools are also available in the marketplace that can take optimized .png files and rearrange how the graphic is saved, achieving significant reductions in file size.

Finally, and most importantly, using images as simply window dressing when it serves no purpose is a practice that should always be evaluated…particularly if the designer is using gaudy clipart that may actually serve as a detriment rather than an asset to your site. Evaluating these types of things will often help developers reduce the overall number of graphics used on their website. And eliminating unnecessary elements from any page or site is often the best possible form of optimization.