Archive for May, 2011

Web Designers, Get Out There and Make Something!

Advertisement in Web Designers, Get Out There and Make Something!
 in Web Designers, Get Out There and Make Something!  in Web Designers, Get Out There and Make Something!  in Web Designers, Get Out There and Make Something!

When people ask me what I do, I tell them I make websites. They usually smile and nod and then ask whom I might make these sites for. I’ll ramble off a random list of clients I perceive to be most impressive. They, again, smile and nod. The conversation moves on. This has happened to me somewhere north of one hundred times. It always feels a little disingenuous.

My day job and clients aren’t the issue. I enjoy most of the projects I get to work on. My coworkers and clients are smart people, with good ideas, who usually have reasonable expectations and goals for their campaigns. At times, the deadlines are long and the budgets are bursting; other times they need something yesterday and for a largely discounted rate. Both scenarios are enjoyable: one allows for lots of iteration and produces a refined end product. The other is a sprint to the finish line.

Title in Web Designers, Get Out There and Make Something!

Finding Inspiration I Wasn’t Looking For

October 2010

In the middle of browsing through my inspiration bookmarks, looking for something to catch my eye and spur an idea for a design, I had a moment of clarity. My perusing had brought me to Dribbble, the brainchild of Dan Cederholm and Rich Thornett. I knew they had started started small, built and designed the site themselves, issued invites to friends to test out the service, and are now a household name in the design community. They made something, and they made it themselves.

I had set out to find design inspiration, instead I found inspiration for an idea: a self-driven project. I recently sent Dan an email, asking him some questions about Dribbble. Why did you build it? What was challenging about answering to yourself, instead of for a client? What drove you to keep going? He graciously wrote me back:

“I love making things. It’s why I love the Web so much — that you can build things, in some cases entirely on your own, that can be seen and used by potentially millions of people.

For someone who typically designs and hands things off to clients for implementation, creating and building your own stuff can be a tremendous learning experience. I’ve learned more about business, development, server administration, customer service, community management, etc., from building my own products, and that broader understanding of how the whole entire process works can be invaluable even when you return to your specialty with clients.

It also allows you to care about something from start to finish — to take ownership over something and watch it grow over time. It’s fun. And being able to collaborate with someone with complimentary skills (like Rich on Dribbble) helps me learn about the other side of the coin in a way I wouldn’t with clients.”

Dan’s mentality in his first sentence is a sentiment shared across our industry. I’ve said those same words many times, and I think it’s what draws me in to this idea of not just creating something, but making something new that I can run from start to finish. That’s really attractive when you spend your creative time answering to clients.

Realistically Getting Your Project Underway

Once I decided to make something, I felt energized, and wanted to get underway immediately. Forget that I had no idea what I wanted to make, and between my 60-80 hour a week job and my family, I had little to no time to execute anything anyway. But I was excited to set off and create something.

Let me just quickly add a note in here. I figured this was something I could probably bang out in about a weekend. Hell, I’ve designed and produced entire campaigns that have gone on to successes just working completely through a single weekend. And that was client work, with someone to go through revisions and their opinions. I’d just think up a great idea, throw some stuff together in Photoshop, toss it into WordPress, and it would probably be a huge success in no time.

I started thinking about the prospects constantly. I could design posters with cool sayings like “Live What You Love” and “You’re Only As Good As Your Last Typeface”. But upon further research, decided it was too much trouble to keep inventory. The market was ridiculously saturated with people just like me anyway. I kept coming up with ideas and I used Evernote to keep track of them. They ranged from books, to t-shirts, to legitimate online business ideas. I struggled with this for weeks.

In retrospect, writing things down, no matter how silly or stupid they seemed at the time really helped. I now have a collection of nearly a dozen ideas I could act on. One or two are probably legitimate business ideas that I could pursue. If you’re not carrying a notebook, Moleskin, smartphone with notation software, or even just jotting things down on napkins, you’re doing yourself a great disservice: don’t let ideas slip away!

Finding Clear Direction Means Running Into Walls

Early November 2010

I finally decided one idea just seemed better than the others: a website that helped promote great designers in a given city and connect them with people needing their services. If you Google, “Web designer in baltimore”, you get a litany of ridiculously outdated and obviously unskilled Web workers, with a few gems mixed in by the time you reach page ten. By creating a curated list of these designers — say ten per city to start with — I could point unknowing decision makers to great firms, and spread even more groundbreaking creative throughout the world. It’s like Match.com meets HotorNot.com: you’re only seeing the best of the best.

Devising a goal is really the first step in this process. You can’t start designing, coding, or writing until you have at least a loose idea nailed down. At the same time, don’t be afraid to pivot halfway through the project if you hit a wall, or see a more desirable avenue.

Internet broadcasting pioneers Justin.tv originally set out to produce original content. But how would they broadcast their shows? When another avenue looked more advantageous, they jumped (from the article Why Starting Justin.tv Was A Really Bad Idea, But I’m Glad We Did It Anyway):

“We were willing to learn, and to pivot. After quickly realizing the initial show wasn’t a sustainable model, we decided to go the platform route, and built the world’s largest live video platform (both on the Web and in our mobile apps, which have millions of downloads).

Some people wait until the stars are aligned before they jump in. Maybe that’s the right move, but plenty of businesses get started with something that seems implausible, stupid, or not-a-real-business but turn into something of value (think Groupon). If we hadn’t started then, would we have later?”

Try, Fail, Repeat: Your Goals Are Just Guesses

Late November 2010

I wrote down some goals in my sketchbook:

  • To get the site live by Christmas.
  • To recruit a select group of firms. I wrote out about ten for Baltimore, Washington DC, and Philadelphia.

That’s basically all I had. Simple enough — like I said, I could get an entire site live in WordPress in a few hours. This was going to be a piece of cake!

The first thing I decided to do was settle on a name. Worldwide domain name lookups probably spiked during this time as I tried every conceivable, catchy name. I had figured this would take an hour at most. I had some ideas and keywords in my head, and one of them *had* to be available. Alas, they weren’t. So I moved on to things like writing copy, planning and, oh yeah, the mountain of normal client work.

Don’t let the name of your project stall your progress. If you know what the overall goal is going to be, there’s other work to be done. Marketing plans need to be written, design needs to get underway, there is a ton of research to do, and coming up with goals doesn’t require having a name. If anything, these steps will help you think more creatively about your project and might give you the boost you need to come up with the perfect name.

February 2011

Client work has returned to a normal busy pace, which allowed me to take back some nights to work on my project. I had this great idea. What if I built the entire site on a custom platform? I can code HTML, CSS and some Javascript, so picking up another skill set would be helpful anyway. I posted on Quora and asked around for a scripting language that I could learn and implement quickly. Ruby on Rails seemed to be the flavor of the week, so I settled on that.

I’m going to save you the pain and suffering of what transpired in the next few weeks. I watched YouTube how-to videos, I read tutorials, I set up Ruby on my machine and learned some commands. My attitude day one was probably that of a confident puppy, and by the end of December resembled one of the guys from Grumpy Old Men. There was just no way I could learn how to make a complex Web application with signup, login, an admin area, approval area, image resizing, categories and tags, and a litany of other necessities anytime this year. RoR, I’m assured, is easy to learn. Just don’t expect to rewrite your CMS by day nine.

This was a huge mistake. Building something is already a monumental task — even without the stresses and responsibilities of everyday life. Even the simplest idea has lots of layers you can’t predict at the start. Keep it simple. Do something reasonably within your abilities to start out with, see results, and then move on to larger goals. Alternatively, try and partner with someone with a complementing skill set. If you’re a designer, chances are someone on your tech team at your day job would jump at the chance to make something cool in his off-time instead of playing more Halo. I wasted weeks of time and energy learning this.

I was at a crossroads. I had planned on doing this project completely alone, but at this point that didn’t seem feasible. So I caved. I hired a respected developer. I wireframed every page on the site, wrote a twenty page brief full of variables and instructions, broke out the old credit card (don’t tell my wife), and waited.

Again, don’t be afraid to pivot! My original plan of doing this alone just didn’t work out. That’s fine, I considered other options that still achieved the end goal. Being stubborn and trying to force my way through learning enough Ruby on Rails to possibly completing a subpar product months and months from now seems silly now that the site is functional. Don’t be too proud to admit defeat. Fail, and then find a way past that failure.

Time Moves Quicker Than Your Goals

Late February 2011

To recap, I still had not picked a name, I had exactly zero companies signed up, and haven’t even told more than three people about this entire project. Working at least 10 hours a week on the project, and missed my personal goal of launching by Christmas by months, I was growing frustrated. My day job always has to come first, and with an abundance of client work to be done (certainly a good thing), my precious side project had taken a backseat on many nights and weekends.

So I take a close friend out to lunch and we sit down over spaghetti at a list of nine potential names. We cross them off one by one until only the victor remains. We both agree it’s the best option, and I quickly sketch a logo idea. It sticks.

Yay-sketch in Web Designers, Get Out There and Make Something!

Getting someone else familiar with the project also gave me motivation not to give up. It wasn’t just my little secret anymore. I now had someone in my corner to bounce ideas off to. This would prove to be invaluable many times over.

Don’t Say It Won’t Work If You Haven’t Tried It

Late March 2011

That night, riding high on my new domain purchase, I made a list of companies I wanted to launch the site with. I lean back to look at the 13 names I wrote down. I have interacted with exactly two people at all 13 of these companies — this is discouraging. I write up a loose form email, and just find the highest-ranking person’s email at each company I can find. I try to personalize every email and fire all of them off in one night. The next morning I had exactly zero responses. That afternoon, still none. The next morning, they start to trickle in. Three weeks and one hundred and seventy six emails later, every single one of those 13 original invites has accepted. I still don’t know how I pulled that off.

If I learned anything from this stage, it’s that people are willing to help the little guy. I reached out to some pretty busy and important people, and almost all of them replied to my first cold email solicitation. Granted, my project only helps to promote their firm, but they could have easily ignored me. Most of them engaged me in pretty detailed email and phone conversations to learn more about my goals for the site. The networking aspect of reaching out to others to get them involved was invaluable.

Launch Before You’re Comfortable

Late April 2011

The developer has delivered a really nice product, I design through code (a la Andy Clarke), I’m knee deep in site updates, emailing my new members, talking ideas with these powerful industry insiders I respect (who have never heard of me) more site updates, working with my developer, and the work starts to mount. That’s when I realize I’m no longer building the site. I’m doing upgrades and maintenance work. The site is “done”. Time to flip the switch and share it with the world.

I’m a true believer in perfect is the enemy of good. I could perfect the design until every pixel is exactly how I want it, until every feature and filter is live on the site, but for what? My own personal satisfaction? That’s just silly. Launch now, provide value now, and sweat the details later. No one remembers what Quora looked like when it launched, but these days it’s widely being touted as a UX masterpiece. That didn’t happen overnight, and it certainly wasn’t like that on launch day. There probably isn’t one page on my entire site that I’m content with, but I’m at least satisfied that they’re all usable and acceptable right now.

This isn’t a unique idea. 37 Signals’ Jason Fried spells this out on their Signal vs. Noise blog, and again in their book Rework. Here’s from a 2008 blog post:

“As far as knowing exactly where the cutoff point is, that’s more art and gut than science and stats. The way we usually do it is to ask ourselves: Does what we have now solve most of our problems now?

There’s always more to add and plenty of things to refine, but does what we have now get the job done reasonably well most of the time? If you’re using your product as you build it, and as long as you’re careful not to confuse your needs with, wouldn’t it be cool if you then naturally get to the ‘yup, it’s good to go’ point soon enough. That’s when you launch.”

Flipping The Switch

Early May 2011

Today my project, YayTalent goes live with the only intention of exposing amazing local talent to companies that need amazing creative. It’s currently live in Baltimore, Washington DC, Philadelphia and Greenville, SC with plans to add ten more markets this summer.

Yay-talent-screenshot in Web Designers, Get Out There and Make Something!

This is not a money-making venture by any stretch and probably won’t ever be. If my project had to pay me minimum wage, I’d be owed a couple thousand dollars. It’s solely about me scratching my itch to make and own something, while doing some good in our industry (which I love deeply as you can read in my previous Smashing article). I just had no idea how long it would take to get here, but Dan’s words ring very true: I’ve learned more bootstrapping in a self-driven project than on almost any client project I’ve ever done. And now I can take those things I learned back to my day job.

It’s also a project that helps create quality work in smaller markets. I can’t tell you how excited I am about this. The average business owner doesn’t really know how to choose a designer, and this tool will help them as well. Everyone wins.

Other Side Projects To Check Out

I’m certainly not unique. There are so many other talented designers and developers out there working hard on long nights after their families have gone to sleep to make cool and interesting things. Some of these are moneymaking ventures. Some are just proof of concepts. Others try to simply make your everyday a little easier.

TeuxDeux
TeuxDeux is a simple to-do application which was created by Tina Roth Eisenberg and Fictive Kin. The product is a visually compelling and user-friendly app which allows you to use it at work/home and then take your to-dos on the road with the iPhone app. As developers say in the description, “Yay for checking things off!”

Teaux-deaux-screenshot1 in Web Designers, Get Out There and Make Something!

markup.io
This tool allows you to express thoughts quickly and easily on any webpage. You just use a Get Markup bookmarklet and when you want to make notes on a webpage, click it, type some text and publish it when you’re ready to share your thoughts with your colleague or clients.

Markup-screenshot in Web Designers, Get Out There and Make Something!

7courses
7courses is a very simple application that allows you to easily manage your special recipes. A nice small project for those who love cooking.

7-cources-screenshot in Web Designers, Get Out There and Make Something!

Fast Customer
This tool helps you to connect with customer service at more than 1,000 companies without waiting on hold. A small, yet very useful side project.

Fast-customer-screenshot in Web Designers, Get Out There and Make Something!

pen.io
Pen.io allows you to create beautiful text-based pages in seconds and share them with the rest of the world.

Pen-io-screenshot in Web Designers, Get Out There and Make Something!

Goal Finch
Goalfinch is a goal setting tool built on a principle that economists have known for centuries: incentives matter. If there’s a goal you want to accomplish, you have the best chance of succeeding when there are incentives in place to reward you for getting it done. That’s exactly what the tool does: it helps you create incentives to accomplish your goals.

Goal-finch-screenshot in Web Designers, Get Out There and Make Something!

What Does This Mean To Me?

The purpose of this editorial piece isn’t to toot my own horn. I learned a lot of lessons and just like I want to help promote other firms I have no stake in, I really want to encourage other “makers” and “creatives” out there to start making something of their own.

I hear lots of friends in agency jobs talk about how miserable they are with the everyday monotony of client work. Make something you’re proud of, that offers value, which makes you happy. Working towards and achieving your self-imposed goals will not only fill you with a sense of pride. I’ve found that it sheds a new light on my client work and has lit a new spark in my work. It has balanced my professional life to a degree I could not have previously imagined.

If you take nothing else away from this, I’d challenge you to keep your ideas written down somewhere. I think once you actually start putting them down, you’ll eventually find that one spark that ignites your entire project. If you’re building or running a project at any stage, please share it with us in the comment section below.

I’d also love to see designers and developers link up — even if you don’t have an idea yet. Who knows, one of these little ideas could change everything. And now when people ask you what you do, you have more to talk about than just rattling off some names they’ve heard of — the most interesting of all will be a little project they likely haven’t heard of… yet!

(vf) (il)


© Michael Aleo for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:


A Showcase of BOLD Typography in Web Design

Advertisement in A Showcase of BOLD Typography in Web Design
 in A Showcase of BOLD Typography in Web Design  in A Showcase of BOLD Typography in Web Design  in A Showcase of BOLD Typography in Web Design

Excellent typography looks attractive while at the same time remains completely functional. The beauty of typography lies in that it vividly communicates with the visitors and keeps them informed about what they have come to the website for. Although the graphics play a key role in any web design, properly implementing the typography can create effective results especially when it is not underestimated.

Together with vividly created images and graphics, typography can take a web design to the highest level of creativity and attractiveness. It is not necessary that typography in web design always match with the design. Sometimes, it can be loud; sometimes, it can be bold dominating the overall design.

This round up features big, loud and dominating typography examples that give websites an elegantly unique style and sense of precision. Enjoy!

BOLD Typography in Web Design

Denis Echandler
The website makes use of large and bold typography that goes well with the overall design. All the words are written in caps for more emphasis.

Bigtypography1 in A Showcase of BOLD Typography in Web Design

Ipolecat
Ipolecat employed large and bold typefaces not only for the main tagline but also to describe their key selling points and draw the reader’s eye.

Bigtypography16 in A Showcase of BOLD Typography in Web Design

Takeshape.it
Interesting typography is used with creative imagination that looks simply stunning.

Bigtypography44 in A Showcase of BOLD Typography in Web Design

Hull Digital Live
Excellent use of typography to bring this ordinary web design to life. See how the designer has emphasized the essential information with clear fonts.

Bigtypography30 in A Showcase of BOLD Typography in Web Design

Illusionist
The main focus is on the typography although there is an interesting graphic added to help support and carry the design, but still the typography stands out.

Bigtypography50 in A Showcase of BOLD Typography in Web Design

We Shoot Bottle
A visually compelling web design having the typography set as the main attraction of the site.

Bigtypography46 in A Showcase of BOLD Typography in Web Design

Fixie
A stunning web design with typography that is so well suited for the tone and feel of the design, that it looks like a perfect match.

Bigtypography54 in A Showcase of BOLD Typography in Web Design

Cupcake Creative Studio
What you can expect if you hire them is clearly represented in their web design that looks beautiful because of the effective typography that is employed here.

Bigtypography29 in A Showcase of BOLD Typography in Web Design

SUPERCHARGED
The typography employed in this web design truly charges the overall site giving it a very unique look.

Bigtypography48 in A Showcase of BOLD Typography in Web Design

Gerren Lamson
This website uses a very elegant typeface to give the overall design an extraordinary and visually appealing look.

Bigtypography2 in A Showcase of BOLD Typography in Web Design

Git Tower
Here, typography is used to breath life into the web design and to add a feeling of excitement.

Bigtypography3 in A Showcase of BOLD Typography in Web Design

Fore Father Group
A vintage look is created solely with the help of appropriate typography usage. A simple black color is used against a soft background to help complete the look.

Bigtypography4 in A Showcase of BOLD Typography in Web Design

Efingo
In this website, the first thing that gets noticed is the typeface which demonstrates the power of effectively employing typography.

Bigtypography5 in A Showcase of BOLD Typography in Web Design

Marie Catribs
Casual yet powerful is what comes to mind when taking in the typography used in this website design.

Bigtypography6 in A Showcase of BOLD Typography in Web Design

Carsonified
The site uses the bold typography here to grab the attention of its readers without any graphical aid. The typography used here clearly states the philosophy of this website.

Bigtypography7 in A Showcase of BOLD Typography in Web Design

Stephen Caver
Black bold typefaces are used here to give the site a strong visual impact.

Bigtypography8 in A Showcase of BOLD Typography in Web Design

Miiks
Simple and wonderfully effective, this is what defines the typography used in this website.

Bigtypography11 in A Showcase of BOLD Typography in Web Design

Visual Republic
Visual Republic communicates their core business values through their fantastic font choices.

Bigtypography12 in A Showcase of BOLD Typography in Web Design

Rothco
The typography is quite creatively employed in this web design, visually drawing in their visitors.

Bigtypography13 in A Showcase of BOLD Typography in Web Design

Kyle Steed
Free style typeface demonstrating the expertise of Kyle Steed. The typography looks hand drawn to add a personal touch to the web design.

Bigtypography15 in A Showcase of BOLD Typography in Web Design

Pob Chart Lab
Although the use of typography is somewhat sparse, it is still undoubtedly attention grabbing and compliments the design.

Bigtypography17 in A Showcase of BOLD Typography in Web Design

Jonbrousseau
This typography is comparatively ambiguous with its background although the font size is relatively large.

Bigtypography19 in A Showcase of BOLD Typography in Web Design

Charles Elena
Big, interactive and engaging font style used for the main tagline here, that not only grabs attention but serves as eye candy in the design.

Bigtypography20 in A Showcase of BOLD Typography in Web Design

Me In Motion
No more ambiguity, only simple and clear typography. All the letters are in caps to capture the user’s attention.

Bigtypography23 in A Showcase of BOLD Typography in Web Design

Rich Brown
Brown and white bold typefaces are used alternately to create a visually compelling impact.

Bigtypography24 in A Showcase of BOLD Typography in Web Design

Barney Funk
A relatively large font size coupled with the red color is enough to catch the attention of onlookers. Further details are provided in more medium sized fonts.

Bigtypography25 in A Showcase of BOLD Typography in Web Design

Gummisig
Again, the main content is displayed with relatively large and bold typeface to catch visitors’ attention while the rest of details appear in relatively small sized fonts indicating their more secondary role.

Bigtypography26 in A Showcase of BOLD Typography in Web Design

Ryan Keiserw
Here the extensive use of typography somewhat makes it difficult for the visitor to focus on one thing; however the overall result is quite satisfactory.

Bigtypography27 in A Showcase of BOLD Typography in Web Design

Finch
Here, the designer has used their creative imagination to make the web design stand out against the sea of similar websites.

Bigtypography28 in A Showcase of BOLD Typography in Web Design

Clectricpulp
Very few details are provided here, therefore, font selection is made quite precisely to communicate all the essential points effectively.

Bigtypography31 in A Showcase of BOLD Typography in Web Design

Notorious Design
Here the creative use of fonts helps with building an interest in the web design and also embodies the creativity of the web designer.

Bigtypography32 in A Showcase of BOLD Typography in Web Design

Visual Boxsite
This design exemplifies the adage that simplicity is what works best.

Bigtypography33 in A Showcase of BOLD Typography in Web Design

Brunet-Garcia
This web design employs a very sophisticated typeface that adds a simple beauty to the web design.

Bigtypography34 in A Showcase of BOLD Typography in Web Design

Fajnechlopaki
Vibrant colors and bold fonts are the main attraction for this web design.

Bigtypography35 in A Showcase of BOLD Typography in Web Design

Objectified
A very professional look is created with the sensible use of sharp typography to send the subtly spoken message of professionalism.

Bigtypography37 in A Showcase of BOLD Typography in Web Design

Polargold
Again, another example of simple beauty. In this web design typography fulfills the role of graphical elements.

Bigtypography38 in A Showcase of BOLD Typography in Web Design

Elysiumburns
Lots of different font sizes and different types of fonts are used to distinguish different areas of focus throughout this design.

Bigtypography39 in A Showcase of BOLD Typography in Web Design

Bills on Your Table
Here typography is very cleverly used with amazing graphics that gives this web design something of a face lift.

Bigtypography41 in A Showcase of BOLD Typography in Web Design

Gapmedics
Same typeface used in different colors for the purpose of differentiation. Visual elements are also used to give further details.

Bigtypography42 in A Showcase of BOLD Typography in Web Design

Merge
Two completely different fonts are merged very creatively to create a distinction within the design here.

Bigtypography43 in A Showcase of BOLD Typography in Web Design

Four 24
Two different colors are used for the amazingly soft and beautiful typography giving the design a sense of distinction.

Bigtypography45 in A Showcase of BOLD Typography in Web Design

I am Always Hungry
Black colored typography against the bright yellow background really makes this design stand out and boldly call out to readers.

Bigtypography47 in A Showcase of BOLD Typography in Web Design

Designfabrika
Vibrant typography makes this design look attractive and pleasing to the eyes.

Bigtypography49 in A Showcase of BOLD Typography in Web Design

JLern Design
The typography is presented from a totally different, unique perspective along with flash elements to create a nice, compact and typography loaded web design.

Bigtypography51 in A Showcase of BOLD Typography in Web Design

Hungry Man
A little bit of a retro style and look is created to give the website a really distinctive design.

Bigtypography53 in A Showcase of BOLD Typography in Web Design

Francesco Mugnai
Soothing web design with pleasing typography that not only catches visitors’ attention but adds beauty to the design as well.

Bigtypography55 in A Showcase of BOLD Typography in Web Design

Process Type Foundry — they make type
Loads of different fonts and varying sizes do work for grabbing the attention, but here they also make it difficult to decide where to focus first.

Bigtypography56 in A Showcase of BOLD Typography in Web Design

(rb)


Two Cats In A Sack: Designer-Developer Discord

Advertisement in Two Cats In A Sack: Designer-Developer Discord
 in Two Cats In A Sack: Designer-Developer Discord  in Two Cats In A Sack: Designer-Developer Discord  in Two Cats In A Sack: Designer-Developer Discord

The differences between designers and developers often erupt in pointed jabs on the Web or at conferences. Jokes or not, the jabs create friction whose consequences are real.

I am a designer, and by no elaborate means of job-title-rejigging do I consider myself a developer, but I see the cruelty of designer and developer egos going both ways. So, what happens if someone throws a pair into a sack to hash it out? How do we emerge? Our projects, careers and maturing industry rely on our ability to learn to work together instead of against each other, and looking at what we have in common is one way to begin addressing interdisciplinary cat fights.

00McDaniel-CatsInASack-v31 in Two Cats In A Sack: Designer-Developer Discord

Shared Priorities

A belief that design and development have competing interests is an obstacle to successful collaboration. There are, of course, developers who design and designers who code (I’ll return to this point later on), but the tension referred to here is between the designer and developer who believe that their respective discipline is more important. Conquering this belief is crucial to avoiding a clogged workflow, low team morale and, ultimately, limited project success.

Design is not completely an aesthetic concern, nor is development an entirely technical one; designers must consider how functionality affects form, and developers must be creative in building out functionality. Similarly, if we look closely at design and development, we find that principles of good design are often similar in good development. Focusing on these overarching ideas reveals a large pool of reciprocal interests.

Harmony of Parts

Paul Rand, a designer’s designer, creator of the IBM, ABC and UPS logos, wrote in A Designer’s Art:

Copy, art, and typography should be seen as a living entity; each element integrally related, in harmony with the whole, and essential to the execution of an idea.

He wrote this in 1985. Today, the principles remain mostly the same, but one component is sorely missing from Rand’s statement: technology. Copy, art, typography — and technology — are the bones of a project, where design and development are the joints and skin that connect and hold together the parts. When all of these elements fit together well, you essentially have design and development working together as the support structure for the user experience and overarching concept, the so-called “living entity.â€�

While far too simplistic a metaphor to cast a strong light on the process (building a website in fact looks much messier), Harmony of Parts does illustrate how design and development should ultimately work towards the same goal.

01McDaniel-HarmonyOfParts-v2-1 in Two Cats In A Sack: Designer-Developer Discord

It is also worth mentioning that development, like design, encourages the harmony of parts in programming concepts like polymorphism and encapsulation. These ideas quite broadly mean that pieces of functionality should work well when placed inside or beside other pieces, another way of saying, “each element integrally related, in harmony with the whole.�

Teachability

Both design and programming are teachable, and where there are talented individuals there is also hard work, discipline, teachers, mentors, standards, taste, ruthless editing and constructive criticism, all of which are cultivated. There is bad work and breathtaking work. There is the scrap heap, the slush pile, the useless code: all evidence of learning.

This commonality between disciplines is important because it presents an opportunity: designers can learn about development, and developers can learn about design. The democratization of resources in this information age (which some would argue we’ve already passed) means that we have little excuse not to obtain, or teach, at least a basic understanding of each other’s crafts. Not doing so will work to the detriment of the team. And when there are gaps in knowledge, rather than reprimanding, we should encourage an open dialogue to protect our most valuable learning tool: the ability to ask questions.

Elegance and Efficiency

Chris Coyier, self-described Web craftsman, blogger, author and speaker, writes in “What Beautiful HTML Code Looks Like�:

Code? Beautiful? Sure. After all, code is poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator.

What is elegance? It could mean restrained beauty and grace, as in art and fashion. But in design as well as math and science, something elegant typically embodies simplicity and effectiveness, sometimes solving two or more problems at once or by an unexpected insight. Elegance, then, refers to underlying content or an underlying process.

Design may rely on aesthetics for its medium, and development may rely on code, but both draw on theories of efficiency (perhaps a synonym for elegance) to create effective output: elegant code is efficient code, and elegant design is efficient design. This means that design and development share some core values of process.

Shipping

In his article “Design Is Not the Goal,� Francisco Inchauste writes:

The end product (website or application) should always be the focus.

Inchauste goes on to say that too often, process insists on polishing irrelevant deliverables; for example, over-updating wireframes instead of moving on to the build and user testing. The true deliverable is the final product that we launch and that people interact with. Jeff Gothelf goes more in depth in his article “Lean UX and getting out of the deliverables business.�

In a healthy team environment, we designers, developers, copywriters, user experience designers and project managers are all shippers. Bigger agencies tend to lump design and development teams into the Production Department, for better or worse, and this is telling. It demonstrates that both “creative� and “technical� professionals share a predominant interest: they must ship.

Correcting The Workflow

It may be that designers and developers are perfectly capable of collaborating effectively, and that management and process are the biggest hurdles or frustrations within a team.

Good Ideas Intersect

The logistics of securing work often mean that the earlier a great idea is identified for the project, the happier and more secure the client will be, resulting in a better working environment for everyone. However, it also means that stakeholders will come together early in the process to come up with ideas. This can occur to the preclusion of the very people who will produce the final work, especially in hierarchical agencies. This undermines the designer or developer’s ownership and discourages self-direction and personal investment in the project.

One solution to this problem is to ensure that great ideas are universally respected, wherever their origin. Michael Lebowitz of Big Spaceship famously preaches an agile workflow, saying in a New York Times interview:

We also invite people from all of our disciplines into all of our brainstorms. Great ideas come from everywhere.

A policy like this opens communication channels in a team framework and dispels departmental inequalities. When something goes wrong, finger-pointing is no longer an option if everyone’s had an opportunity to provide input, and collaborators are forced to learn from mistakes. This is not to say that responsibility is evenly distributed, but allowing teammates and workspaces to intersect in unexpected ways will allow great ideas to surface.

02McDaniel-GoodIdeasIntersect-v2 in Two Cats In A Sack: Designer-Developer Discord

Waterfall vs. Agile Thinking

In waterfall-structured processes, where development is held up by unfinished designs, developers are the ones who end up staying late to finish the project on time. Not only is this unfair to developers, it is complicated, because pointing the finger at designers for taking too long is too easy an answer. Responses to a design can be so subjective and cryptic (“I don’t know why I don’t like purple, I just don’tâ€�); true insights require time to unearth and can result in unpredictable delays in the process.

Hold-ups are best avoided not by keeping design and development separate but by bringing them closer together via an iterative workflow. This agile methodology distributes responsibility and assigns value to each team member. Furthermore, departments are not tied to an inflexible plan. All of these attributes of agile thinking help to alleviate designer-developer tension.

Giving Credit

In the fable “The Lion, the Bear and the Fox,� a lion and bear fight over prey until they can fight no more and fall over exhausted. Meanwhile, a fox who has been watching the fight sneaks up and steals away with the prize. The moral is this:

Saepe alter alterius fruitur labribus.
From the labors of others, it is often another who profits.

Giving credit where credit is due and sharing the rewards is better, but unfortunately, in a fast-paced digital environment, whoever is left sitting at the table is often the one who gets the final praise. It is up to that last team member (the project or account manager, art director or tech lead) to pass feedback onto the rest of the team in a meaningful context. The cost is minimal (however long it takes to shoot an email or walk to someone’s desk), but the shared joy (or misery) will bond design and development teams because they will see the end product as the force that unites them.

Work Habits: Playing Nice

Sometimes playing nice is as simple as extending a courteous email; other times it is as complex as learning a new skill set. There are many concrete ways, big and small, for designers and developers to become more compatible colleagues. Let’s first look at efforts that can be shared, then at tasks more specific to designers and to developers.

03McDaniel-GoodHabits1 in Two Cats In A Sack: Designer-Developer Discord

Both Designers and Developers

Despite being in separate disciplines, our greatest commonality is that we are human. So, many of these shared tasks demonstrate how to play nice with anyone:

  • Keep an eye on the big picture.
    Pre-established goals that are developed by the whole team should inform decisions (and compromises) throughout the process.
  • Cast a wide net for inspiration.
    Look to a variety of sources for a well-rounded understanding of the topic. Discriminate material by quality, not subject matter.
  • Check in early and often.
    Avoid making too many decisions in isolation.
  • Be nice.
    If you must criticize, make it constructive. Being kind often reaches far beyond office walls.
  • Teach each other.
    In their book Rework, Jason Fried and David Heinemeier Hansson preach transparency between companies and their customers: “Letting people behind the curtain changes your relationship with them. They’ll feel a bond with you and see you as human beings instead of a faceless company. They’ll see the sweat and effort that goes into what you sell. They’ll develop a deeper level of understanding and appreciation for what you do.â€� This works for designers and developers, too. Revealing the inner process means teaching, and teaching is a way to invest in a relationship and build mutual respect.

Designers

There are innumerable great tips to help designers become better colleagues. Here are some of my favorites:

  • Explain the design rationale.
    Design isn’t magic, and making an effort to analyze and share design decisions will create a conversation and demonstrate to colleagues that their insights are valued.
  • Practice PSD etiquette.
    Adopt the Photoshop Etiquette Manifesto for Web Designers.
  • Design thoroughly.
    Think through the interactivity of the product, which includes designing the on, off and current states, designing error messages for forms, designing 404 pages, etc. This will save your teammates valuable time.
  • Be considerate.
    Avoid making others wait on you. Be proactive and organized, and ask for feedback often.
  • Enlist a developer.
    If the technical implications of the project are unclear, grab a developer to go through it with you. They’ll likely appreciate being involved.
  • Learn about development.
    Knowing even a little about code will make you a better designer.

Developers

Here are a few ways for developers to improve their work habits:

  • Make yourself available.
    Being a part of the process from concept to realization will translate into a sense of ownership of the project. Ask colleagues what they’re working on. Make your expertise available as a resource.
  • Simplify the explanation.
    If you can help team members from all levels and backgrounds understand high-level concepts and how they affect a project, you will become more valuable.
  • Develop the design details.
    Much of a designer’s craft lies in the details; if they are forgotten or changed, the designer’s time and effort will be wasted.
  • Be honest about what can’t be done and why.
    Big ideas often struggle against time and budget constraints; that’s nothing new. Knowing the development constraints ahead of time allows the team to create more appropriate solutions.
  • Learn about design.
    Theories, rules and standards play important roles in aesthetic and usability decisions. A little knowledge of these concepts will help you better navigate designs.

Some of the tips for designers will certainly also be useful for developers, and vice versa. Being able to work well on a team often depends on the individual’s personality, so take those habits from either group that will contribute to better collaboration. Do you have other good ideas? Share them with us in the comments.

The Hybrid’s Role

Designers and developers come in many shapes, and design and development skill sets are overlapping more and more. Hybrids, who have one foot in each discipline, seem to be increasingly sought after by clients and employers. This begs the question of whether we need to get along better or simply become more like each other.

Hybrids are in a unique position to answer this question. If you consider yourself both a designer and developer, tell us: What is it that you find easier or harder about being involved in both disciplines? What do you like or dislike about it? What can we all do to become better collaborators?

Post-Disciplinary Collaboration

Way back in 1999, Andrew Sayer, professor of sociology at Lancaster University, published an article titled “Long Live Postdisciplinary Studies! Sociology and the curse of disciplinaryparochialism/imperialism.� Despite the hefty title, he wrote quite simply:

Interdisciplinary studies are not enough, for at worst they provide a space in which members of different disciplines can bring their points of view together in order to compete […] Post-disciplinary studies emerge when scholars forget about disciplines and whether ideas can be identified with any particular one; they identify with learning rather than with disciplines.

Competition is fierce in our industry, and as talented new generations join the workforce, it will only become fiercer. Web makers will need to work harder and more efficiently to retain that quality that clients and consumers value: the ability to surprise. For this, we need innovation, but designer-developer cat fights take up precious time that could be put to innovation. If we instead incorporate post-disciplinary collaboration into our process (a fancy way of saying, “Let’s forget about job titles for a moment and work toward something togetherâ€�), I believe we’ll be more successful and find our jobs more enjoyable.

(al) (il)


© Cassie McDaniel for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , ,


What Color Is Your Money? Showcase of Bank Websites Worldwide

Advertisement in What Color Is Your Money? Showcase of Bank Websites Worldwide
 in What Color Is Your Money? Showcase of Bank Websites Worldwide  in What Color Is Your Money? Showcase of Bank Websites Worldwide  in What Color Is Your Money? Showcase of Bank Websites Worldwide

Having lived and worked in various countries during the past 15 years, I have accumulated quite a few different bank accounts. On any given day, some of us may actually need to log on to at least three bank websites. And while one wouldn’t normally turn to a bank website for inspiration, it is actually surprising how the world of money is quite useful for considering the different ways large amounts of critical information can be packaged.

Developers and designers of bank websites have the ultimate of job tasks to fulfill in planning a bank’s website information architecture. Of utmost importance is security and functionality. Then comes the entire suite of corporate marketing communication must-haves such as strategy, usability, portability, accessibility and highly likely multilingual services are a major consideration among the deliverables.

Banking is a highly competitive industry where the website needs to make existing clients feel safe with their financial transactions (client retention) as well as entice new customers (client acquisition). The client base is normally extremely diverse. At any given time a bank needs to please large international multi-million dollar stakeholders at the same time as individuals who live from month to month on minimum wages. Client demand on bank websites is therefore assuming a broad range of wealth and responsibility.

Author’s Note:

“These days, it is barely imaginable how one would manage finances without the convenience of online banking services. To put this appreciation of online banking in perspective, and to give away a little idea of my age, I can actually remember physically visiting my small country town bank in Australia, little passport-sized bank book in one hand and an envelope with cash in the other. I happily walked out with the money safely deposited, a new hand-written savings total in my bank book, all stamped, dated and hand-signed by the banker. In between visits I kept my savings in a plastic kangaroo!”

What Color Is Your Money?

With the high-end security, seamless functionality specifications and corporate branding then being absolute priority, designers and developers around the world are producing some really pleasing-to-the-eye bank websites. For simplicity, we have collated the showcase by color:

  • Red (includes hues of pink for this article)
  • Blue (includes hues of purple for this article)
  • Yellow (includes hues of orange for this article)
  • Green
  • Gray (includes hues of brown for this article)

Specific Design Elements to Notice:

Besides the color breakdown, when perusing through the bank websites there are some interesting design elements worth noticing. Remember that bank websites are generally based on very complex sitemaps that must address thousands of customers (individuals and businesses), security and legal issues, service offerings, marketing and international relations. What we noticed in researching this article was:

  • The multiple, often replicated, navigation systems. A lot of the bank websites here include both horizontal and left and right vertical navigation, as well as key ‘call to action’ navigation ‘buttons’ via larger modular units in the center of the home page.
  • The navigation systems actually steer away from being drop-down lists activated on hover and are more likely to be completely displayed as a list.
  • The column grid structure for most of the bank websites is based on at least 4 columns.
  • The upper right hand corner is where most banks include the area for logging on to online accounts.
  • Steadily, banks are integrating social media into their online presence (please take a note of how many actually have Twitter and Facebook links on their home pages).
  • Search boxes are absolutely critical to bank websites.
  • Banks showcased here generally try to integrate humor or the ‘fun factor’ into the user experience. That is to say, online banking is shaking off some of the associations of the financial world being stuffy, old and boring.

We have actually marked the websites with a big ‘love the design’ where we feel a lot of extra love and attention has gone into the design, beyond the corporate information architecture.

Shades of Red

On putting this article together and sifting through hundreds of bank websites, red (and blue, see below) is a dominant color choice for banks. Red is one of the three primary colors (red, blue and yellow) and because it is the color of blood and raging fire, it is commonly associated with the following traits: courage, strength, power, energy, determination, passion, action and it has strong visibility (ie stop signs and danger signs are red). Strong shades of red often suggest vigor and leadership while lighter hues tending to pinks suggest a more passive and fresh approach.

Sparkasse, Germany

Sparkasse in What Color Is Your Money? Showcase of Bank Websites Worldwide

Sainsbury’s Bank, United Kingdom Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Personal-Loans-Credit-Cards-Travel-Home-Life-Pet-Insurance-Sainsburys-Finance 1287141192214-e1287141324449 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Citigroup, USA

Citi-Home 1287138832245-e1287139103594 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Absa Bank, South Africa

Absa-Bank-Home-Page-Commercial-Retail-Bank 1284474643858-e1284474732373 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Helm Bank, Panamá

Picture-3-e1287146077711 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Credit Suisse, Switzerland

Credit-Suisse-Wherever-you-are 1284490023964-e1284490204565 in What Color Is Your Money? Showcase of Bank Websites Worldwide

HSBC, United Kingdom / International

Bank-Accounts-Mortgages-Online-HSBC-Bank-UK 1284471072100-e1284471266154 in What Color Is Your Money? Showcase of Bank Websites Worldwide

NAB, Australia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

NAB-National-Australia-Bank 1284448845736-e1284476219944 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Alfa Bank, Russia

Alfa-Bank 1285583156010-e1285583256493 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Citizens Equity First Credit Union, United States

CEFCU-Home-Page 1287141471877-e1287141623344 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Canadian Imperial Bank of Commerce, Canada

Personal-Banking 1287140538066-e1287140668377 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Westpac Bank, Australia

Westpac-Australias-First-Bank 1287140337037-e1287140506247 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Afriland First Bank, Cameroon

Le-partenaire-s R 1284472284459-e1284472406599 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Santander, Brazil

Banco-Santander-Brasil-S A 1284477859720-e1284478077973 in What Color Is Your Money? Showcase of Bank Websites Worldwide

CIM Banque Geneve, Switzerland Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

CIM-Banque-Gen C3 A8ve-Votre-Banque-Priv C3 A9e-Suisse-depuis-1990 1284487749826-e1284487985865 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banca di Roma, Italy

Conti-Carte-Finanziamenti-UniCredit-Banca-di-Roma 1285585177285-e1285585334688 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Shades of Blue

Blue is the classic corporate color of choice. Blue is associated with depth and stability, trust, loyalty, wisdom, confidence, intelligence, knowledge, power, integrity and seriousness.

However, customers have over the years developed a love or hate relationship with their financial service firms. It is perhaps needless to mention here the financial crisis of 2008 where large financial institutions collapsed, banks were bailed out of seriously deep trouble by national governments and  stock markets crashed all around the world. Building trust and loyalty takes somewhat more than the perfect shade of blue.

Here are a selection of bank websites from around the world whose main online color is set around blue. We have included purple websites here as it expresses the stability of blue and the energy of red. Purple is associated with royalty and luxury. Dark blue tends more toward representing knowledge, power, integrity, and seriousness while a lighter blue hedges toward offering understanding and gentleness.

Rietumu Banka, Latvia
Latvia in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco de Chile, Chile

Personas-Banco-de-Chile 1287140083268-e1287140807679 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of New Zealand Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

BNZ-Internet-banking-home-loans-credit-cards-personal-and-business-finance-Bank-of-New-Zealand-BNZ 1285589425940-e1285589516762 in What Color Is Your Money? Showcase of Bank Websites Worldwide

VTB Bank, Russia

VTB- -World-without-barriers 1284472643668-e1284472825564 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Qatar National Bank, Qatar

QNB-The-Leading-National-Bank-In-Qatar-Home-Page 1284490290731-e1284490427518 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banca Etruria Group, Italy

Banca-Etruria-Home 1285585662405-e1285585894276 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Royal Bank Canada

Personal-Banking-Advice-you-can-bank-on-RBC-Royal-Bank 1287140368175-e1287140930798 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Siam Commercial Bank, Thailand

Scb Thai 1284475057832-e1284475370115 in What Color Is Your Money? Showcase of Bank Websites Worldwide

BancoSol, Bolivia

BancoSol-Bolivias-best-bank 1285609419524-e1285609629450 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Chase, USA

Personal-Banking-Personal-Lending-Retirement-amp-Investing-Business-Banking 1285431880030-e1285432698543 in What Color Is Your Money? Showcase of Bank Websites Worldwide

China Construction Bank, China

ChinaCB-e1285587945961 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banque Populaire, France

Banque-Populaire-la-Banque-de-ceux-qui-entreprennent-leur-vie- 1284472033439-e1284472123669 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Deutsche Bank, Germany Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Willkommen-bei-der-Deutschen-Bank-Leistung-aus-Leidenschaft 1284467876933-e1284476127131 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Natixis, France

Natixis-Top-class-banking-and-financial-solutions 1285591995827-e1285592078186 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Valiant, Switzerland

Valiant-Startseite 1284488088363-e1284488369806 in What Color Is Your Money? Showcase of Bank Websites Worldwide

CSOB, Slovakia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

CSOB-Banka 1285591281576-e1285591577502 in What Color Is Your Money? Showcase of Bank Websites Worldwide

CapitalOne, USA

Capital-One-Credit-Cards-Banking-Auto-Loans-Checking-and-Savings-Accounts-and-Small-Business-Credit-Cards 1284470650784-e1284470735235 in What Color Is Your Money? Showcase of Bank Websites Worldwide

ANZ, Australia and New Zealand Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

ANZ-Personal-Online-Banking 1284471694119-e1284471797980 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Standard Bank, South Africa

Standard-Bank-Home 1284473448575-e1284473602555 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of Hawaii, USA

Bank-of-Hawaii-Homepage 1285589159703-e1285589297158 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Barclays, England Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Personal-Banking-from-Barclays-Barclays 1284476379198-e1284476580193 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Emirates NBD, United Arab Emirates

Emirates-NBD-Personal-Banking 1285590250119-e1285590362111 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Hungarian Development Bank, Hungary

Hungary MFB 1285590942384-e1285591021824 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Delta Community Credit Union, United States

Delta-Community-Credit-Union-Headquartered-in-Atlanta-Georgia 1287141678376-e1287141818967 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Shades of Yellow

Like red, yellow has an energetic influence and an alarm effect. It is also associated with joy, happiness, honor, loyalty and intellect. It is warming (directly associated to the sun) and stimulates a cheerful ease while at the same time is considered fresh and zingy. Used too liberally though, yellow can be disturbing and get in the way of content on a website. Used sparingly, it can be inviting and assuring. Orange has also been included in this group as it combines the energy of red and happiness of yellow. Orange is the color of enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement and stimulation. Some also associate orange with endurance.

Guaranty Trust Bank, Nigeria Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

28-GMT 0200-CET 1286892460303-e1286892606351 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Kookmin Bank, Korea

Kbstar-e1285584847705 in What Color Is Your Money? Showcase of Bank Websites Worldwide

ING DiBa, Germany Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Girokonto-Festgeld-Baufinanzierung-Kredite-Wertpapiere-ING-DiBa 1284467516117-e1284473263585 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Commonwealth Bank Australia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Home-Page-Commonwealth-Bank-Group 1284448960248-e1284473399816 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of Ayudhya, Thailand

Krungsri Com 1284475514430-e1284475902746 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Attijariwafa Bank, Morocco

Attijariwafa-bank-Accueil- 1287141897721-e1287142106528 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Commerzbank, Germany

Commerzbank-Homepage 1285590074792-e1285590187100 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bankinter, Spain

BankinterBanca-de-particularesInversiones-Financiaci NInicio 1284477086104-e1284477181665 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Falkenbergs Sparbank, Sweden

Falkenbergs-Sparbank 1285590435403-e1285590529834 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco do Brasil

Bb Com Br 1284477529628-e1284477652334 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Pireaus Bank, Egypt

Welcome-To-Piraeus-Bank-Egypt 1284490407262-e1284490648706 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Shades of Green

As we move down our color comparison list of financial websites, there becomes fewer examples to find for greens and grays. We actually discovered, however, that quite a few banks in African countries and other developing lands use green shades for bank websites. Green is the color for growth, nature and healing. It is also directly symbolic of money (and greed and jealousy).

Nedbank, South Africa Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Nedbank-Home 1284474492971-e1284474580268 in What Color Is Your Money? Showcase of Bank Websites Worldwide

SBERBANK, Russia

Sbrf-e1285583510667 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Magyar Nemzeti Bank, Hungary

Magyar-Nemzeti-Bank 1286889544975-e1286889666685 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Appenzeller Kantonalbank, Switzerland

APPKB-Appenzeller-Kantonalbank 1284488779339-e1284489013736 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco Azteca, Panamá

Banco-Azteca-Panam -Tu-sucursal-Personal 1287145121417-e1287145260542 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banca Nazionale del Lavoro S.p.A., Italy

BNL-BNP-Paribas-Welcome-Welcome 1285585386122-e1285585501690 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Islamic Bank of Thailand

ISLAMIC-BANK-OF-THAILAND 1284475494807-e1284475694722 in What Color Is Your Money? Showcase of Bank Websites Worldwide

First National Bank, South Africa

Home-First-National-Bank-FNB 1284473682215-e1284474011997 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Kenya Commercial Bank

KCB-Kenya-Home 1284478242469-e1284478370669 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Israel Discount Bank

Israel Hebrew-e1285591249902 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Crédit Agricole, France Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Cr Dit-Agricole-CIB-Corporate-and-Investment-Banking- -Cr Dit-Agricole-CIB 1285587363715-e1285587672219 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Shades of Gray & Brown

Black and white are not colors on the ‘Color Wheel‘. They are defined as ‘neutral’ colors. Shades of gray (and brown for this article) are generally neutral colors which tend not to assume a strong or specific emotional association – except for general neutrality. While black on its own can symbolize morbidity, death or mystery, it is also a clear expression of power and clarity. White is also a statement of purity and clean cut lines. Shades of brown communicate earthiness and wholesomeness. We discovered a few financial websites that use predominantly shades of grays and browns, but not many.

Macquarie Group, Australia Lovethedesign in What Color Is Your Money? Showcase of Bank Websites Worldwide

Macquarie-Group-Australia 1285591645695-e1285591822156 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Bank of England, United Kingdom

Bank-of-England-Home 1286890738641-e1286890857456 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Rand Merchant Bank, South Africa

RMB-Traditional-values -Innovative-ideas 1285592518061-e1285592602383 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Central Bank of Libya

Central-Bank-Of-Libya-Home-Page 1286889965680-e1286890066546 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Banco de España, Spain

Spain in What Color Is Your Money? Showcase of Bank Websites Worldwide

SKB Banka, Slovenia

Osebne-finance-SKB 1285607433160-e1285607570286 in What Color Is Your Money? Showcase of Bank Websites Worldwide

Central Bank of Bahrain

Central-Bank-of-Bahrain 1286888552526-e1286888707823 in What Color Is Your Money? Showcase of Bank Websites Worldwide

What Color Is Your Money?

This article is in no way an exhaustive collection of bank websites of the world. These are some of the better designed and constructed works. If you can suggest any more that should be added to this showcase, please add them in the comments below. And next time you are visiting your own bank’s website, instead of just going to your online account to see how rich or poor you are, have a further look around the site and see how well it has been put together. Check out the sitemap and consider the structure that has been employed to make the site cohesive. Make a note to see if the ‘business customer’ pages are designed differently to the ‘individual customer’ pages.

Partial Bibliography

USA Banks, All banks and Finance, Banking and Rates
Central Bank websites
A Look into Color Theory in Web Design

(rb)


Fluid + DesignersMX = Bliss

I’ve enjoyed every bit of Designers.MX since it launched, their iPhone optimized web site is fenomenal, however the desktop experience (for browsing listening to music) wasn’t ideal for me, so I set out to find a solution for this.

First, if you haven’t checked out Designers.MX yet I suggest you head over there now. They have wonderful mixes with beautifully designed covers by fellow designers, a match made in heaven! Truly fantastic. I even contributed my own mix.

Before I tell you how to set up your DesignersMX Desktop App, let me show you what it looks like:

DesignersMX App

We are basically taking advantage of the beautifully optimized mobile experience and serving it on the desktop as an app. Isn’t it awesome?

Set Up Your Designers.MX Desktop App:

Download and install Fluid (Older Version with all features at http://fluid.en.softonic.com/mac), launch it and set the URL field to http://designers.mx/, Give it a name (I chose DesignersMX) and Click “Create�.

Fluid App

Once you receive the success message, launch the app. Go to the App’s menu, set the User Agent to “Mobile Safari� and refresh (Command+R).

Fluid User Agent MenuUser Agent

You should be able to see the mobile optimized version of DesignersMX at this point. Adjust the window to the width/height you prefer.

Mobile Optimized

Go to the preferences menu.

Fluid Preferences

Click on appearance and change window style to “HUD (Black) and re-start the app.

Fluid Appearance

The window chrome now matches the color scheme of the site:

DesignersMX Floating Window

At this point you already have a nice DesignersMX app. If you prefer having a floating window on your desktop you are done… However if you are like me and prefer menu bar icons follow the next step.

Go to the app’s menu, select “Convert To MenuExtra SSB� and click ok.

MenuExtra SSB

The app should restart and you should now see a menu bar icon on your toolbar like so:

Menu Bar Icon

Voilà!

You now have a beautiful Designers.MX Desktop App.

Thanks go to Cameron Moll for providing the soundtrack while I wrote this blog post, to Designers.MX for providing an awesome service and to all those that have contributed awesome mixes and covers.

Cheers all, enjoy!


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress