BlogmyQuery – BMQ

It is hard to imagine the design world without typography since it has undoubtedly influenced the major development and establishment of design trends today. This post includes thirty inspirational examples of famous CD album covers that will surely inspire you with their excellent typography.

It’s interesting to see how different typefaces are used for different music tastes. Of course it’s not only the typography of your favourite CD that can boost your inspiration but also listening to your favourite songs as well. What’s your favourite CD album cover? What makes a CD album cover eye-catching? Share your thoughts with us below!

No Doubt – Rock Steady

Portishead – Third

The Starting Line – Direction

Lee Morgan – The Rumproller

Green Day – American Idiot

TV on the Radio – Dear Science

Linkin Park – Minutes To Midnight

Tiger Lou – Partial Print

A Perfect Circle – Mer de Noms

Daft Punk – Discovery

Beck – The Information

Pink Floyd – The Wall

Low – Drums and Guns

Matmos – The Civil War

Nirvana – Nirvana

AC DC – Back in Black

Bon Jovi – Have a Nice Day

Notorious B.I.G. – Ready To Die

Frank Zappa – Ship Arriving Too Late to Save a Drowning Witch

The Sex Pistols – Never Mind The Bollocks

Theory Of A Deadman – Self-Titled

Gotan Project – Tango 3.0

Metallica – Master Of Puppets

Rolling Stones – Forty Lick

Green Day – 21st Century Breakdown

Radiohead – In Rainbows

The Clash – London Calling

Paramore RIOT

John Mayer – Continuum

Hard-Fi – Once Upon a Time in the West

More Inspirational Sources:

• 35 Beautiful Music Album Covers – Album cover art is often considered to be one of the “extinctedâ€� fields in modern graphics design. In times when digital copies are cheaper and quicker to get, album covers have somehow lost their importance as less and less customers actually buy CDs and LPs in the stores. [...]
• 100 Obscure and Remarkable CD Covers – While recording artists and bands are busy recording their albums, a separate effort is usually being made behind the scenes to plan for the launch, promotion and circulation of the new tracks. The creation of CD cover art is an intergral part of this process.

(ik)

Product design is easily the hardest aspect of building software today. Technology, hiring, funding, aesthetic design, and press are all minuscule in comparison. When I talk about product design I’m referring to the process by which you decide what your product does and does not do. I happen to think we do a pretty good job of this at GitHub, and I’d like to give you a bit of an insight into our process and hopefully shed some light on why it works so well.

I should warn you that I am not a “Product Designer.” We don’t have titles at GitHub — we let employees pick their own. I like to call myself ~designer since I mostly focus on the look & feel of our product. But then again, I spent the past weekend building an application to track & distribute binaries and updating some of our reducing functions to support a newer version of MongoDB. So, yeah. I’m ~designer. But maybe that leads me to my next point…

Everyone is a product designer

Every employee at GitHub is a product designer. We only hire smart people we trust to make our product better. We don’t have managers dictating what to work on. We don’t require executive signoff to ship features. Executives, system administrators, developers, and designers concieve, ship, and remove features alike.

Having the role of “Product Designer” or having a CEO who says they’re going to “focus on product design now” never made much sense to me. Aren’t you hiring smart people who use your product? Don’t you trust your employees? Doesn’t everyone at your company want to make your product better? Doesn’t that make everyone product designers all of the time?

Along these lines, my two favorite questions to ask in an interview (or to people who don’t know they’re interviewing) are:

1. What would you like to see in GitHub?
2. What feature do you think we messed up / should remove?

It brings out the passion in people and instantly highlights problems you might have with their decisions. Some people just don’t have the same vision for your product as you do, and that’s fine.

Write down ideas like crazy

Our internal wiki is filled with ideas. Old ideas. Bad ideas. Good ideas. Half-baked ideas. The point is that we have a place to share our crazy with each other. This wiki page discussing compare view eventually became Pull Requests 2.0 — arguably the best code review tool I’ve ever used.

Most of the time when someone adds an idea it’s nothing original. It’s something we’ve discussed in person, seen in another product, or maybe thought about ourselves. But that’s really half the point — seeing someone else write down the same idea you’ve had makes you twice as excited about the idea. As others chime in saying they’d love to see the feature, excitement about it grows and grows. Eventually you’ve got 4 developers hacking on something at 11:30pm because they want to see it happen so badly.

Constantly experiment and iterate

Right now our main repository has 65 branches. This doesn’t count the dozen or so other repositories that collectively represent what is https://github.com or the 139 repositories under our organization. Needless to say, there are a ton of features, anti-features and half ideas in these branches. Sometimes they’re really pretty features that aren’t functional and sometimes they’re really ugly features that are completely functional.

We’re always sending pull requests, shipping them to staging and asking others what they think. Talking about a feature in a meeting and crafting a spec is one thing, but coding up a working prototype is way more effective. We’re always running experimental features in production to staff only. No better way to see if a feature is going to fit than to actually use it.

Once a feature is out and ready for people to use there’s about a 100% chance that someone is going to want to change some aspect of it. So we iterate — tweak, deploy, discuss in a pull request — over and over until it’s good enough for public consumption.

On that note, our pull requests are generally pretty epic. It turns out that pull requests are perfect for experimenting with new features, discussing them with the team, and getting others to help you ship. Check out this pull request for shipping our org profiles. (Funny anectdote: this pull request was created before we shipped pull requests 2.0 — we constantly use experimental features)

Abandon features

You can’t run a product and pretend that every one of your ideas is perfect. You’re going to have bad ideas, ideas that don’t fit, and features that become abandoned. Don’t be afraid to abandon ideas. The amount of time you spend on something is meaningless. You’re not losing anything by throwing work away — you’re choosing not to make your product worse.

The first version of http://jobs.github.com that we built didn’t share a single piece of functionality with what shipped on day one. It wasn’t an iteration — we straight up threw away a few months of work because we realized it was a bad idea. We started using our creation and realized we couldn’t figure out how to make money without pissing off our customers. So we abandoned that idea and started anew — even though we could have shipped it and started making money immediately.

Shipping features because you spent time or money on them is a coward’s excuse. It takes balls to abandon features — grow some.

Argue all the time

We do not have a quiet workplace. We argue in bars, in Campfire and in email. New hires and CEOs alike. But it’s not personal — it’s about making our product better. If you’re not forced to rationalize your product choices, who’s to say you’re making good decisions?

Arguing with your co-workers isn’t a bad thing. It’s not creating a negative work environment — it’s a tool to help you make good decisions. Being an empty cheerleader and telling everyone that their idea is great is harmful and short-sighted. Argue and make good decisions.

Talk to your customers

I spend a good portion of my day reading through our support site, mailing lists, twitter feeds, and blog posts written about git and GitHub. Listening to your customers is supremely important — they’re full of great ideas. They’re also full of shockingly terrible ideas. As Tom puts it:

Don’t give your customers what they ask for; give them what they want.

We also spend a lot of physical time with our customers. We have monthly meetups here in San Francisco, and you can pretty much guarantee that anyone who’s traveling will host a meetup in whatever city they’re in. People can get crazy online. It’s a lot harder to spout out that crazy when you’re talking to someone face to face. It forces people to really think about what they’re going to say and reminds them that there’s a living, breathing human being behind the product.

Product design is in the eye of the beholder

We know that product design isn’t just adding and removing features. It’s how our customers perceive the features. Who cares if some analyst thinks your company is doing well if your customers don’t?

Having a great blog post explaining new features is absolutely killer. It allows us to frame features in a certain light and explain our thinking. It also shows a record of shipping — and we try hard to ship and tell people about it all of the time.

If you redesign your entire product once every two years like Twitter does, it’s a big deal. If your users don’t like 100% of it, they’re going to be pissed. But if you ship something every two months and they don’t like 10% of it — their overall perception is still positive.

We also know that what we don’t do is just as important as what we are doing. We don’t publish roadmaps or promise features within a timeframe — we under promise and over deliver. And really, I think that’s why our customers are so happy with our product design as a whole.

Don’t give your customers what they ask for, give them what they want. Under promise, over deliver.

In my experience it’s a pretty rare thing to find a restaurant (or café/coffeehouse) website that is usable and makes it easy to find the information you would expect to find – menus (with prices!), opening hours, directions, reservation info, etc.

Visiting Never said about restaurant websites tells me that I’m not alone. Phew! On the site there are many quotes of things you’ll never (or extremely rarely) actually hear people say, to illustrate some of the usability issues commonly found on such sites.

Read full post

Posted in Accessibility, Usability.

Designing for the future Web. That’s a big subject. Where do we start when we’re talking about something that isn’t here yet?

In this article, we’ll look at what the future Web might look like and how we can adapt our current skills to this new environment, as well as how to create fluid websites that are built around a consistent core and that adapt to the limitations and features of the device on which they are viewed. We’ll also look at how our conceptual approach to designing websites should evolve: designing from the simplest design upwards, and not from the richest website down.

But before we get to that, let’s start with a question. What do we mean by the “future Web�?

What Is The Future Web?

Back in the old days: analogous Google queries would have taken 30 days. Image: dullhunk

The one word that I hear more than any other at the moment is mobile. Mobile websites, mobile devices, mobile apps: the list seems to go on and on. In fact, a large swell of opinion says that the future Web is mobile.

But despite all this, focusing just on mobile isn’t the answer.

The way we access the Internet is changing, of that we can be certain. And in the short term, this does mean more mobile devices. But in the long term, we have to look a little wider. Thomas Husson, senior analyst for Forrester, summed it up nicely in his 2011 Mobile Trends report when he said, “The term mobile will mean a lot more than mobile phones.� In the long term, the word we should use instead of mobile is portable.

Why Portable? How Has the Internet Changed to Make It So?

First, the physical infrastructure of the Internet is spreading rapidly, so that our ability to access the Internet wherever we are grows daily. In the last 10 years, the number of Internet users has grown by 444.8% and now includes 28.7% of the population. That’s nearly 2 billion people, the majority of whom are in Asia. This growth is fuelled by investment in the underlying hardware that gives us access to the Internet: millions and millions of computers, millions of miles of cables, hundreds of thousands of wireless hotspots and, on top of all this, growing 3G coverage around the globe (around 21% by the end of 2010 according to Morgan Stanley).

Secondly, the way we use the Internet is changing. We are increasingly orienting our online experience around services rather than search engines. Services such as Facebook, Twitter and LinkedIn are becoming the hub for our online life, and we are blending them to create our own unique Web of content: Facebook for our social life, LinkedIn for our professional life, Spotify for music, Netflix for television and film. We’re seeing a very different form of information consumption here, one in which we expect information to be pushed to us through our social circle, the people whom we trust. We’re moving away from the old paradigm of information retrieval, in which we are expected to seek information using search engines and links.

Some of these services are tied to a single device, but increasingly they are available across multiple platforms, including the desktop, mobile apps, Internet-enabled TVs and others. Only last month, Samsung created the first tweeting refrigerator. Okay, that might not be the greatest use of an Internet connection, but it is an example of how these services are starting to spread out, away from the desktop and into our everyday lives. Evrythng, a start-up currently in beta, is working on a platform that would give any physical object an online presence, effectively making the Internet an ubiquitous entity containing data that can be consumed anywhere and by anything.

Given these changes, it’s important that we not be overly rigid in our approach to creating new Web content; we mustn’t allow ourselves to think in terms of devices. Right now, we are producing mobile apps and standard websites to deliver our services, but in a few years’ time, we may be looking at a completely different landscape, one where knowing exactly where and how our content is being viewed is impossible. Our content must be portable in the sense that it can be displayed anywhere.

Media marketers have responded to the increasing use of mobile media. (Image: birgerking)

We may also find ourselves having to decide whether to concentrate on particular devices and channels at the expense of audience numbers or to take a less tailored approach and serve the widest spectrum possible.

Regardless of the route we take, the ability to deliver a consistent experience across all channels is paramount, and our ability as designers and developers to understand the options and deliver this consistency to our clients will be crucial.

So, this is the future Web, a mish-mash of devices and channels. Sounds good, doesn’t it? Let’s go back to the key word, portability.

How Do We Design For The Portable Web?

Ask yourself, how would your latest project cope in the following scenarios:

1. The user is watching House on their new Internet TV. Hugh Laurie’s not on screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.
2. The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad
3. The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed.

Each of these scenarios presents us with a different problem to solve: (1) an odd aspect-ratio and browser combination, (2) a good display area but slow connection and (3) a very small display area. And they are all very possible scenarios. The first Internet TVs by big brands are now available from the big retailers. Opera Mini has over 85.5 million users and is the dominant browser in many areas of the world; in fact, in Asia, Opera and Nokia (with their combined 66.33% market share) are way ahead of the third-place browser (which is BlackBerry, with a 9.81% share). And Deloitte has predicted that 2011 will be the year of the tablet and that 50% of the “computing devices� sold will not be PCs.

Chances are that, unless you’ve really thought about it (and if you have, then you probably don’t need to read this article), your website won’t work in all of those cases.

When designing for the portable Web, we need to be aware of three things: design, content and integration. Approached in the right way, we can create websites that are accessible across the widest user base and that provide a consistent experience regardless of access method.

Consistent? How?

When faced with a multitude of devices to design for, all with varying specifications, the last goal that might come to mind is consistency, and with good reason. And yet we should be striving to achieve consistency. Not in design but in experience.

Conceptually, we should be thinking about our design in two layers: the core content or service, and then the display layer. The core of our website should not change from device to device, and it should deliver a consistent experience. As we shall see shortly, this means that we must ensure that elements such as the content and the navigation patterns work the same way always.

The web’s future consists of vast possibilities, considering them all is virtually impossible. That is why we need consistency! Image: Juhan Sonin

Let’s say our user is at work and is browsing our website on an iPad. They work through the carefully designed navigation hierarchy to get to the piece of content that they want to read, but they are interrupted by a phone call and have to stop browsing. Later, on the train home, they access the website again, this time via their phone. The visual elements of the design will be different—by necessity—but crucially, the routes they took to find the content should be exactly the same, as should the content they read when they got there.

This consistency of experience is what will allow us to create great websites for the portable Web and a complete user experience.

Where Do I Start? And How Will I Know When I Get There?

If a single consistent experience is our goal, this begs the question, should we create a mobile website that scales up or a desktop website that degrades?

The answer is neither. We should try to create a single design that can be used across all devices without alteration. But in practice, at least for the moment, we should start with the simplest website and work up.

Why? Let’s go back to the introduction. On the portable Web, we have no control over how our content will be used or viewed, and as such we must throw out the idea that we are designing for a particular device or device size. We must approach the design of our website in a different way, one in which we create the core content or service first. After all, this will define our website in the end, not the visual elements. This may seem difficult initially, but as we shall see, many of the best practices for desktop website development hold true for the portable Web, especially with regard to content structure.

To recap, here are the key rules to bear in mind when working through a design for the portable Web:

1. The website should be available to as wide an audience as possible;
2. The website should contain the same content wherever it is viewed, where feasible;
3. The website’s structure should be the same wherever it is viewed;
4. The content should be displayed in a manner that is appropriate to its environment.

A website that meets all of these criteria would fit snugly in the future portable Web. But how do we go about making our websites do this?

Designing For The Portable Web

Design Using Web Standards: That Means HTML5

The good news is that the two most common browser engines on mobile, Webkit and Opera, both support HTML5 very well; Webkit has supported HTML5 at least partially since November 2007.

Using standard and descriptive mark-up throughout our websites will have the benefit of delivering consistent output across most devices. And the extended capabilities of HTML5 to deliver media, animation and local storage make it a great choice for mobile applications.

These three abilities allow HTML5 websites to reproduce behaviours usually associated with native mobile applications, closing the experience gap between the two. Video can now be played natively through HTML5 using the video tag, while animations can be played using the HTML5 canvas. Finally, local storage allows a website to store database-like information on the device, allowing for fully functional offline use of the website.

YouTube, Netflix and Gmail all have HTML5 versions of their websites that are designed for the mobile experience and that take advantage of the new capabilities of HTML5. They’re a great starting point for any developer who wants to see what can be achieved.

HTML5 is now ready to be used for development, and there’s no reason why you can’t start right away. Many excellent resources and tutorials are available to help you get started:

• Dive into HTML5
  An overview of the HTML5 standard and a great starting point.
• HTML5 Demos and Examples
  A series of demonstrations showing the capabilities of HTML5, with source code.
• HTML5 Gallery
  A showcase of websites created in HTML5.

To get started using HTML5 in your projects, you can take advantage of any one of the number of development environments that support it. The most complete implementation is through Adobe’s Dreamweaver CS5; an HTML5 support pack can be downloaded that extends the built-in editor. Aptana also supports HTML5 in its beta of Aptana Studio 3. Links are provided at the end of this article.

Start Simple, Work Up

Thinking portable means thinking clean and simple. The wide variation in screen sizes—from a 40-inch LCD running at 1920 × 1080 pixels to a portrait-orientation mobile screen at 320 × 240 pixels—means that we must create designs that are scalable and adaptive. We must also be aware that someone may be interacting via a remote control or a fat stubby finger on a touchscreen. The simpler the design, the more adaptable it will be.

Bottom up conceptualizing males sense. Concentrate on the basic elements and let the context evolve around them. Image: Andrei Bocan

Create your basic website structure first and add only your core styles, the ones that are applicable to all devices and layouts. Starting simple gives us a great base on which to build. Essentially, we are starting from the most basic experience, available on even the smallest mobile device, and working our way up to the more capable desktop browsers.

Using @media queries in the CSS will enable your website to recognize the additional capabilities of desktop browsers and scale up for these environments, presenting a fuller and more interactive experience where possible.

A word of caution and a reason why we don’t work the other way around by degrading a desktop website to a mobile one: @media queries are not supported by every mobile device. Rachel Andrews provides a good overview of @media queries here on Smashing Magazine, albeit working from desktop to mobile, rather than the other way round.

Forget About Proprietary

Whatever you do, stay away from the proprietary technologies, because that’s the one way to guarantee an inconsistent experience. Flash and Silverlight as development platforms are living on borrowed time. Microsoft has already indicated that it will discontinue Silverlight development to concentrate on HTML5, while Flash is being used mainly as a game development platform and video-delivery mechanism. If we are going to create truly cross-platform websites that display consistently across all devices, then Flash and Silverlight are not wise choices because we cannot be certain that they will be installed on the user’s device. Not to say that Flash doesn’t have its place; as a platform for Web-based games, it is currently unrivalled. It’s about choosing the best technologies for the job at hand.

Be Wary of JavaScript… for the Time Being

The bad news is that we may have to sacrifice some of the things we take for granted now. We must learn to design for unknown screen sizes and ratios and allow content to flow as required. Think less about design structure and page layout and more about content structure.

We may have to forgo using JavaScript and AJAX (both staples of desktop development) to create more involving user experiences, because some lower-end devices will not have the hardware muscle to deal with complex libraries. Trimming page weight will also be a priority because we cannot be certain that end users will have broadband-speed access to the Internet, so large libraries will be unacceptable overhead.

This is particularly important in light of the recent “hash bang� trend, started with Gawker Media’s controversial redesign of its websites. The websites (including Gizmodo, Lifehacker and Gawker) present a more application-like experience to users, but do so by relying on JavaScript for content delivery. In effect, the websites consist of a single page that is loaded with dynamic content on request, instead of the multiple pages that they consisted of previously. Any users whose browsers cannot process the JavaScript, for whatever reason, will be unable to browse the website; they are greeted with only a blank page.

However, a number of libraries are being developed to be lightweight and usable on portable devices. jQuery has an alpha of its mobile library available for testing. The project has the backing of industry players such as BlackBerry, Mozilla and Adobe, so it is worth keeping an eye on.

JavaScript support will mature as devices worldwide move onto more modern platforms and as older devices are taken out of service. But for the time being, a conservative approach to its use will mean a wider potential audience for your work.

Test, Test, Then Test Again

On the portable Web, there’s a good chance we won’t be able to test against every possible platform on which our content will be viewed. But that doesn’t take away the need to test. And test we must.

Opera Mini’s emulator lets you test your website in a virtual browser.

Buying a device from each platform would be prohibitive for the majority of designers. But alternatives are available. For most of the main platforms, device emulators are available that simulate the browsing experience. See the resources section at the end of this article for links.

At the other end of the scale, a paid service is available from DeviceAnywhere, which enables you to test your website on over 2000 handsets.

Unfortunately, there are no Internet TV emulators so far, but Google has released a guide to designing for Google TV.

Finally, of course, we mustn’t forget to test on our desktop browsers, too. The aim of designing for the portable Web is to create a single experience across as wide a set of devices as possible. Just because users are able to browse the Web in many ways doesn’t mean they will stop using their desktop, laptop or netbook. Use this to your advantage when testing simply by resizing your browser to ensure that your design scales and flows appropriately. The emulators will provide you with an exact rendering of your website on other devices.

The Ugly Duckling?

So, does the portable Web defy beauty and kick sand in the face of outstanding design? Of course not. Great design is not only about visual imagery, but about presenting information clearly, which involves hierarchy and importance through innovative and well-thought out typography, layouts and navigation. Which brings us to…

Content For The Portable Web

Content is once again king. The rise of Quora should be enough to convince anyone of that; it is a service based solely on content. On the portable Web, this is doubly true. By paring down the design elements, you leave even more focus on the content.

Understand What’s Important

Identifying what is most critical to users should be your first task when developing a portable website. There may not be room for complex navigation, especially on smaller screens, so keep it simple. Compare the mobile and desktop versions of YouTube’s start page:

YouTube’s standard home page.

YouTube’s HTML5-based home page works brilliantly on small screens.

Create a Solid Information Hierarchy

Structuring our content is important, for both readability and SEO. Understanding the content that we are presenting is essential to creating clear information hierarchies that guide users through it.

Map the user’s possible journeys through your content. There should be a clear route to every piece of content, starting with the top-level information categories and getting more granular with each click.

John Lewis’ mobile website has a clear information hierarchy to aid navigation.

A good example of this is the mobile website of John Lewis, a UK-based department store. From the home page, you can easily drill down to each department, and from there to individual products. It’s simple, and it also means that the amount of information on any given page is not overwhelming and that you know exactly where you are in the hierarchy at all times.

Keep Content Available

Even if users aren’t on a desktop, don’t treat them as second-class citizens. Provide as much content as is feasible. And for what content there is, present it appropriately. Remove the following:

• Superfluous images
  If an image isn’t essential to the content, get rid of it.
• Unsupported file formats
  Don’t include Flash or even the Flash placeholder if the file likely can’t be played.
• Unnecessary text
  Good desktop copy doesn’t necessarily make for good portable copy. Is that second customer testimonial absolutely necessary? If not, remove it.

While we want to remove unnecessary content, we don’t want to remove too much. In the example below, we have a simple accessible website, but one that has no depth. The first level of information is presented well, but the headings for the company’s services at the bottom of the page should link to the next level of information. The way it is, if I want to find out more, I’m forced to visit the non-optimized website. This is a poor user experience, because it makes finding what I need more difficult.

Sapient Nitro’s mobile website displays really well but cuts a lot of information from the full website.

Integration And The Portable Web

If services are to become the new hub of the Internet, keeping our websites linked to these services becomes paramount.

Keep It Modular

Services will come and go (although the main ones will certainly remain for a long time yet… yes, I’m looking at you, Facebook), so keep your design modular. Being able to integrate with new services as they come online and to prune away those that have fallen by the wayside will ensure that your content is available to the widest possible audience.

The goal is to make it easy to push your content across multiple services and thus integrate your content into the fabric of the Web. Primarily, this will be through search engine optimization and social sharing.

Make Your Content Search-Engine Friendly

While the way people access content is becoming more social and less search-based, search engines are still a massive source of traffic. Keeping your content formatted for easy retrieval is a must. Quora has done this extremely well, leading to high rankings across the major search engines and generating traffic for its next-generation Q&A service. SEO may be old hat for some, but as quality of content becomes increasingly important, it will gain new life.

Quora plays nice with search engines, with great results.

Make Sharing Easy

SEO is important, but so are direct connections to other services through OAuth, OpenGraph and OpenID. If this isn’t an option for you, then at the very least give users some way to share your content. Services like AddThis and ShareThis make it simple to add sharing capabilities; take advantage of them. A single tweet can generate a lot of activity. Of course, modern development and content platforms such as WordPress have this functionality built in.

Bringing these three elements together will create websites that are discoverable, consistent and usable. Just one question now is raising its ugly head…

What About Apps? Aren’t They The Way Forward?

Apps are big business. Gartner forecasts that mobile app store revenue will top $15 billion in 2011. It’s no surprise that Google, Microsoft, Nokia and others are trying to get in on the act. But just because app stores are commercially successful, does it mean they should be our first point of call when designing for the future Web?

Let’s look at why one might want to create an app:

• Easy to purchase, install, use and throw away
  Apps are so usable that even your granny could use them. Installing them on a smartphone is a smooth process that requires minimal involvement from the user. And when you’ve had enough, you simply delete it and no trace of the app remains. This is a great user experience, period. That’s why Apple is now pushing the same concept for full-blown Mac apps through the Mac App Store. Apps also provide, in most cases, a good user experience, with their native controls and design patterns.
• Brand association and lock-in
  Apps are designed to do one thing and do it well. The most successful apps are exercises in brand association: “I want to search the Web, so I’ll use the Google app,� or “I want to check up on my friends, so I’ll use the Facebook app.� You experience the brand through the app. I could easily use the Safari browser on the iPhone to access both Facebook and Google, but the apps make it easy for me. I’m locked into the experience, which is great for the companies because their brands get planted square in the middle of my home screen; in this case, a big F and a big G.
• Money
  The most attractive thing about apps to many companies is the profit. Apple’s App Store has shown that monetizing content is possible. Even for independent developers, making a lot of money in a relatively short period of time is possible.

What’s remarkable about all of these points is that they have nothing to do with information consumption. They are all about brand and user experience. However, there are also reasons why you should think twice:

• Apps are information silos:
  Apps do what they do well. But they don’t do a good job of bringing in the wider Web. Want to follow a link? You might be able to view the page in app, but you’re just as likely to get thrown out into the browser. That’s not a good user experience. You also lose control of the user’s actions and their focus on your content.
• Apps are platform-specific:
  Writing an app automatically ties you to the platform you are writing it for. This immediately limits your potential audience. Smartphone penetration is growing but is still a small segment of the overall Internet-enabled phone market. To take the US market as an example, even though 31% of the population have smartphones, only 6% of the population have iPhones. That’s 19 million out 307 million. If you released an iOS-only app in the US, you would immediately lose 76.17 million potential users.
• Apps work best for big brands and services:
  Regardless of how good the app is, you have to find a way to get it discovered among the tidal wave of apps that are released into app stores every day. Big brands can push their apps through their existing Web presence, but that’s a lot more difficult for smaller brands. And unless you can generate a lot of relevant content regularly, as the major services do, your app will be consigned to the trash very quickly. Research by Pinch Media (now Flurry) shows that free apps are used primarily in the first 10 days following installation, and then rapidly trail off to around 2% of the installation base after 70 days. Paid application usage drops off even more quickly.
• Mobile users prefer browsers over apps:
  A study by Keynote Systems in October 2010 shows that users prefer mobile websites for nearly all types of Web content. The only categories in which apps came out on top were social networking, music and games, which makes sense because these apps usually take full advantage of a native platform’s capabilities.

So, if we want to create something with more permanence, that can evolve at a speed that suits us and our clients, then we need to look away from mobile apps and towards the mobile Web. We must execute good design, thoughtful content and solid integration to tie our portable websites into the social infrastructure of the Web.

Conclusion

The fully portable Web may not be here right now, but it will be before we know it. As it was with the browser wars, developers and designers must re-educate themselves to become the driving force behind these changes and be brave enough to let go of current design thinking and work to set new standards. Understanding how to create online presences that take full advantage of all platforms and preparing for the future shape of the Web will position us not just as technicians, but as people who can provide real value to our clients.

Resources

The HTML5 editors and device emulators mentioned above can be downloaded from the following websites.

HTML5 development environments:

• CS5 HTML5 Support Pack (part of the CS5 11.0.3 Updater), plus tutorial
• Aptana 3 beta

Device emulators:

• Android
• Opera Mini
• Apple iPhone (via iOS SDK)
• Windows Mobile (look for the latest Windows Phone Developer Tools)
• BlackBerry
• Nokia Mobile Browser

(al) (ik)

© James Gardner for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Design, future, mobile, portable, trends

Most people know Greece because of its glorious past during the ancient years. Nevertheless, present times are quite stressful for the vast majority of its population due to global recession. But let’s remain optimistic and take a look at the past times of Greek tradition in art and design and then see the state of Web design — an area where things keep evolving.

The Golden Ratio & Architecture

Greece is often stated as the country which introduced philosophy and influenced western civilisation more than any other. Indeed, ancient Greeks’ thought was innovative. Among other ideas they embraced art and architecture in a way that impacts modern design.

Pythagoras and his fellow companions changed the way we perceive mathematics. Their contribution to modern science is remarkable. Pythagoras studied concepts such as harmony and balance. He’s known for the Pythagorean theorem but a few people know that he was also behind the Golden Ratio, a concept which still inspires and guides our designs. A bit later, another Greek mathematician, Euclid, first expressed the idea of the Golden Ratio with words: “A straight line is said to have been cut in extreme and mean ratio when, as the whole line is to the greater segment, so is the greater to the less.”

The Golden Ratio is omnipresent in nature, art, design, architecture, music and of course mathematics. It epitomises harmony and employs aesthetics and beauty. The great Parthenon was designed and built based on the idea of the Golden Ratio or the Greek letter, φ (phi). This is the first letter of the name of the ancient Greek sculptor, Phidias, whose contribution to the monument was immense. The Parthenon’s architects, Iktinos and Callicrates, adopted not only the concept of the Golden Ratio, but also the epitome of the Greek thought and philosophy in general.

Talking About Aesthetics

Aesthetics is also a Greek word. It derives from the word “αισθητικος” which means perception, feeling, sense. It is a branch of philosophy and it is strongly connected to art, culture and nature. Since the ancient years, aesthetics has many different meanings, because perception varies from people to people or among civilisations. However, the power of aesthetics is global and it is the vehicle which marks the different essences of human’s creativity.

Greece, especially in ancient years, influenced architecture, art and design. Aesthetically, Greek constructions and crafts were complex and included many materials and colours. The remains of those crafts may now look minimalistic and simple, but this is not true. However, the applied rules of good design remain untouched by time. We can still admire the high aesthetic level of those works.

To put it differently, aesthetics is something we feel, not what we articulate. Art and design are the main expressions of aesthetics. When it comes to Web design, aesthetics play a crucial part to the way a website is perceived. Our minds need only 1/20 of a second to decide whether they like or not a particular design and this is an aesthetic decision.

The more we explore design the more we dive into different aspects of human nature. If the roots of aesthetics are hidden in philosophy, the way we perceive things is a matter of psychology and even neurology. It takes a holistic approach before we can arrive to good design results. Part of this approach is already revealed by the study of the crafts in ancient Greece.

Art in the Byzantine Period

The Byzantine period is surely worth mentioning because it succeeded the ancient era and it lasted for more than 1000 years (306 AD to 1453 AD). During this huge time span there was a mix of the form coming from ancient years with the Orthodox culture which evolved and turned to be prevalent.

During this period Greece used to be an empire. There were ample resources to move things on when it came to art. Architecture, sculpture, painting, music and other arts were transformed little by little to something completely different. It is still a question whether this transformation was something that happened smoothly or the influence of the church imposed such structural deviations. At the same time art in the empire, as in any empire, was engulfed by the style of artists coming from different countries.

Despite the vast amount and the value of art during the Byzantine period, there aren’t many design principles derived from it. Modern art and design concepts doesn’t seem to represent that period.

Modern Aproaches

Greece is definitely a country with almost no recent tradition when it comes to design and digital communication. The country lost the Renaissance because it was under the Ottoman rule for almost 4 centuries. During the 20nth century Greece also suffered from two World Wars and a painful Civil War which left deep scars and put mental progress to a halt. This bitter situation affected design too.

With this in mind, we can barely find traces of Greek exemplars in design. One of them was Alec Issigonis who was a car designer. Issigonis used to be a very intelligent man who hated the strict discipline of Mathematics, so he called them “the enemy of every creative genius”. Issigonis’ most prominent product was the famous Mini Cooper. Mini was introduced in 1959 and it still remains an epitome of design.

The art and science of typography is also an area where Greece has some tradition. Moreover, the word “typography” derives from the Greek words “τυπος” (= typos, meaning form) and “γραφη” (= graphy, meaning writing). However, printing comes to Greece relatively late. Only in the late ’80s we produce the first digital font families, like the one you see above, GFS Olga. If you’re interested in embedding Greek fonts in your website, you can do that via Fontdeck which provides some excellent families.

When it comes to modern design and digital communication, Greek designers started by imitating and adopting trends. By time we developed our own language and style without fearing to embrace elements of our tradition. The image above is an example of lovely packaging design of the tomato sauce Kyknos. The new approach is based on the traditional packaging of the sauce. It is handcrafted by Red Design Consultants.

Greek designers, with a voracious appetite and new ideas, now start gaining the respect of the community worldwide. Designers United, a Greek design agency, created the emblem of Euroleague’s Final Four 2009 and 2010. Above, you can see the official ball of the latest Final Four held in Paris.

Web Design: The State of Things

Being a Web designer right now in Greece is like being a teenager. Things are quite unstable. You are neither a child nor an adult, which means that professionalism is welcomed but not always required. A few times being a professional could hurt you, too.

The average Greek designer is much better than he used to be three years ago. However, when comparing with an American, English or Russian colleague he still has a lot of work to do. The average client is now aware of the power of a well designed website, but most of the times he’s not eager to pay for it.

So why do we bother to mention the state of Web design in Greece? Because, as mentioned above, things are rapidly changing. When we design we know that our work is compared with the work of the experts of the world and this makes us better. Not to mention that a bunch of Greek designers globalised their services with success.

In other words: We walk the road of maturity.

Let the Designers Talk

We asked 8 successful Web designers 8 different questions about the state of things in Greece and they way they work. Their answers are quite interesting:

Constantinos Demetriadis, Creative Director, Tribal DDB Athens:

Q: As a Creative Director in big design agencies what do you think of the current state of Web design in Greece?

Greece’s late introduction to the Internet, accompanied by the mediums unique features, have strongly shaped the state of Greek Web design. Like most countries, Greece has had a lot of catching up to do, but in that sense, we’ve been doing a great job at adapting and integrating our ideas. We can safely assume that Greek Web design is only beginning to mature, but shows signs of fast evolution. New standards, universal access, multiple touch points… are all the way we’re headed, and it’s my belief that Greece is ramping up it’s game. And it’s happening now…

Maria Theodoropoulou, Web designer/developer at Bluestorm New Media:

Q: You live and work as Web designer & developer in UK for more than 10 years. Would you ever come back to Greece to work here? Why?

Moving back to Greece is always at the back of my mind but I cannot quite formulate a decision yet. Working in the UK has greater benefits and offers more opportunities in my field while the Greek marketplace is an unknown quantity for me. With the nature of the job being what it is I would love to work from Greece but with my existing clients in the UK. I love the Greek lifestyle which is much more laid back, but I prefer the English work style which is more goal driven and rewarding if you commit yourself.

Michael Sfictos, Graphic & Web designer:

Q: As a very talented and successful Web designer could you share the sources of inspiration that work for you?

To be honest, it’s hard to pin inspiration down to a few subjects. My inspiration comes from everything that surrounds me, and in most cases comes in the most unexpected moments. I’m sure all the other designers have the same answer. Music is what helps me concentrate and keeps me focused. Furthermore I watch a lot of imagery on various websites, I love looking at other artists and designers work. Photography and typography are objects that I really value and they have been proved, so far, as great helpers.

Petros Dimitriadis, Freelancer Greek Web designer:

Q: You’ve been a successful freelancer in Greece for many years. What do you think of freelancing in Greece? Do freelancers get paid enough?

I have been a freelancer Web designer for the last 4 years. Some people told me that if you survive two years then you are out of the danger zone. So far so good then. Beeing a freelancer in Greece has its ups and downs. It’s relatively a new kind of occupation and a lot of people and companies look at you with suspicion. It’s kind of difficult to get big jobs because of the small market but if you are good at it it’s difficult not to succeed. There are plenty of “freelancers” out there but if you want something done right than do it with a pro!

Nassos K., Art & Creative Director:

Q: You are a well known graphic and Web designer. What’s to leave a big agency to pursue your dreams as freelancer in Greece?

Design in Greece is a really tricky issue to discuss and a major topic is to choose whether to work in an agency, a small group or as a freelancer. With 10 years of experience, spending the last 5 in two big agencies in Athens as an Art and Creative Director, I choose a different perspective. As a freelancer (and a member of a creative collectible) I believe I have more freedom on scheduling, designing and producing projects that interest me, contrary to the pressure of “must-have clients” that you have to deal as an employee. It’s freedom and hard work against restrictions and money.

Lea Verou, Front-end engineer:

Q: Please, share your experience on Web and education in Greece. Where are we? What do you think of the way markup and design principles are being taught?

The situation in Greece in regards to Web design & development education is pretty bad, even today. Most colleges & relevant seminars teach obsolete material that is useless to anyone who wants to create something modern and standards-compliant. Tables & frames for …layout, presentational markup and obtrusive JavaScript is at the core of most Web design-related courses. In Athens University of Economics and Business we tried to design a model course from scratch, in which only the standards and modern principles are being taught. We even managed to put in some cutting edge technologies, such as HTML5, CSS3 and ECMAScript 5. I extensively described my experience on teaching such a course in my blog. As far as I know, it’s the only attempt for something similar in Greece. Even in universities abroad I rarely see courses that are as up-to-date as ours, which is quite sad.

Zaharenia Atzitzikaki, Web Designer & Developer:

Q: You are a web standards evangelist and a recent freelancer. Do you think clients in Greece care about Web standards? Would they pay more for a well structured website?

Clients in Greece are no different than clients worldwide — lots of them don’t know about standards and won’t really care until you explain them simply why they should. If you focus on how their website may be a bit pricier now but will be easier and cheaper to maintain in the future, they’ll understand and appreciate it and will dismiss cheaper solutions. Most of them know that you get what you pay for, even in Web design, and if they don’t, well, at least you tried, right?

Gerasimos Tsiamalos, Web designer & developer:

Q: You’re about to launch a new service: Premium themes for WordPress and not only. What made you make that move? Do you think Greek designers/developers have the potential to succeed in such demanding markets?

Greeks, living in Greece, are natural problem solvers. They have to be like that in order to survive in this little corner of the earth. Simple. Greek designers/developers have the potential to succeed in any market. Examples? Odesk.com About the premium WordPress themes arena, it’s true that i’m about to enter a saturated market. In the way we know this market anyway. As with any market/product though, differentiation is the key to make heads turn your way and a realistic scenario to solve their problems. Time will tell, but I’m pretty sure I have found how to be different from the competition and I can definitely provide the second one (a realistic scenario to solve their problems).

Greek Web Agencies & Freelancers

The following list is an indicative guide to some of the most successful and active agencies and creative professionals in Greece:

Atcom is a big, well known agency in Greece. Its huge portfolio includes some of the most important Greek portals among others.

OgilvyOne, the Greek branch of the brand, specialises in creative work with great results and several awards.

aeraki specialises in Flash. It has a beautiful website with very interesting projects.

Beetroot is a very creative agency. Many famous Flash projects and TV commercials have been made by these guys.

Zefxis is a small but well known company that cares both about creativity and Web standards.

Upset! is a creative agency full of fresh ideas.

Nomint. Another creative agency specialising in Flash projects.

Wedia. A new but dynamic agency with some beautiful projects.

Generation Y. Modern solutions from a very active agency.

Fabulous!. A well known company specialising in beautiful Flash websites.

Tria. Bold and sometimes experimantal design.

Komrade. A very interesting website for an active and solid agency.

Digitalbox is consisted by a small but very agile team and it has an interesting portfolio.

Antonis Kyriazis. A great Flash designer with a rich portfolio.

Konstantinos Penlidis. Very talented and experienced Web designer.

Thanos Papavasiliou. Wireframe Plus is a Web service which turns your ideas into wireframes.

Helen Gizi. Vector stories designs fabulous illustrations for your next best website.

Showcase of Greek Web Designs

Here comes a list of beautiful designs in different areas. We focused on design no matter the technology behind. Many websites included are based on Flash but there also many which use great HTML & CSS.

Our list could not include all beautiful Greek websites of course. However this is a good sample of what Greek Web designers can do. Go ahead and visit them. The vast majority of these websites include a version in English.

Kiku Japanese Restaurant
A Japanese restaurant in Athens. Amazing art direction and atmosphere.

Yokaboo
Yokaboo lets you create your own online store with ease. It focused on creative people but practically anyone can start using it.

Den einai paramythi
“Den einai paramythi” means “It’s no fairytale”. A sweet interactive game for kids about recycling. Beautiful concept and execution.

6 keys
Great imagery and creative direction for the website of 6 keys hotel in Volos, Greece.

Lakis Gavalas
The official website of Lakis Gavales, a famous Greek fasion designer. Classy and elegant.

The Clockwork Man
The Clockwork Man website is about the relevant hidden object game which is designed & developed in Greece. The illustration is just amazing.

Squad
A strange yet very creative approach for Squad, an advertising agency in Greece.

I pitta tou pappou

“I pitta tou pappou” could be translated as “Grandfather’s pie”. The beautiful website is about the well known restaurant with traditional Greek food such as gyros and souvlaki.

DeviceOne
A very well designed online shop for people who like sports.

Ipomnima
A lovely website in black and white about an art gallery in a beautiful greek island, Lesvos.

just dot
Very impressive and original approach for a company specialising in mobile apps and not only.

This is Athens
This website is actually a nice photostream to show to everyone around the globe that Athens is a beautiful city. The photos included there can prove it.

KFC
The Greek approach of the famous Kentucky Fried Chicken food chain.

Neoset
Furniture for adults and kids. The relevant website is clean, crisp and greatly designed. Overall, this is a great presentation.

Lipton Ice Tea
A micro website for an online contest for Lipton Ice Tea. A smart and joyful approach.

Deloudis
Style and luxury in modern living. The website reflects these two characteristics of the brand.

Salt&Pepper
Salt&Pepper specialises in packaging and graphic design. The website is warm and elegant. You can spend much time in there.

Fena Stock
This website is all about a huge online shop. It is designed with taste and style despite its size.

Lacta – Love at first site
An interactive love story/game which changes according to your decisions. Excellent idea and execution.

Bank of Greece – Virtual gallery
The Bank of Greece presents its art collection in a beautiful way. A virtual tour through the recent history of Greece.

Sébastien Nikolaou
The personal website and portfolio of the graphic designer, Sébastien Nikolaou. A modern and creative one page website with some beautiful samples of work.

Piramatiki Skini
This website is about an art stage in Thessaloniki, Greece. What’s special about it is the perfect equilibrium between function and form.

Thessaloniki360
An online interactive way to find all interesting places to visit in Thessaloniki Greece.

lexx
A very creative and fresh weblog design.

Your Thoughts on Greece

Please feel free to share with us your thoughts on Greece with us in the comment section below.

(ik)