BlogmyQuery – BMQ

Last week at the fabulous Smashing Conference in Freiburg, I gave a new talk, one I’d written just a few hours prior. I chose not to use slides, but instead to speak about three things that I’m incredibly enthusiastic about:

1. Responsive design is not (just) a design or development problem;
2. The client participation process is broken;
3. How to call your client an idiot, to their face.

Here are the (slightly expanded) notes that I made before my talk.

Responsive Design Is Not (Just) A Design Or Development Problem

In all the excitement about responsive Web design over the last few years, someone forgot to tell our bosses and clients, so we’ve been treating responsive design like it’s a design or an implementation problem, whereas in fact it’s as much an issue for business. In fact, it’s an issue for everyone involved: designers, developers, content specialists, the people who commission websites and those who structure the teams who make the websites.

The Traditional Workflow

Here’s a common, if grossly over-simplified, project workflow:

• Plan,
• Design,
• Develop,
• Deploy.

Into planning, you might roll up content audits, requirements, user issues, wireframes and the like. (Aside: Perhaps it’s because I’ve had too many bad experiences with too many bad UX specialists, but I’ve a problem with any part of the process that limits our potential for great design. This includes wireframes — typically desktop-only wireframes — that are produced and often signed off by a client long before they arrive in the design studio. Nothing is wrong with UX per se, only when it’s prescriptive and not part of a flexible, iterative design process.)

Design is where you’ll find a myriad of creative activities, including graphic and layout design and more. Here, static design visuals — you might call them comps — have been the traditional currency of the visual designer. They’re what designers use to experiment with creative ideas, then exchange with clients for sign-off, and subsequently deliver to front-end engineers as blueprints for building.

Development is likely the responsibility of front-end engineers. I know from experience that engineers often work separately from designers and might have only limited interaction with them.

As for deployment, I know I’m making light of this, but it’s black magic and I simply don’t understand it.

This waterfall-style process is similar to the old-fashioned pre-press workflow that I remember when I worked in pre-digital photography. It took up to seven people to take a transparency from a camera to a color proof. Each person’s work was an opportunity for sign-off, but more importantly it was an opportunity for billing. The same is mostly true of our Web design processes today.

Compare that to what I’ve cheekily been calling a “post-PC responsive workflow�:

• Plan,
• Combined and iterative design and development,
• Deploy.

In this agile-style iterative process, everyone works more closely together, designing, developing, testing, redesigning and refining.

Design Testing and Device Testing

I find testing my designs on real smartphones and tablets while I’m working to be incredibly useful. This means that I have access to several devices. But how can we afford to buy all of the devices we need? This year, Stephanie Rieger wrote about the range of devices we should use. She included iPhones, iPads, Kindle Fire and three different versions of Android. But I think her advice could be misleading.

Do we really need to own a myriad of smartphones and tablets or do we need just a few to develop an affinity for them? Image: opensourceway.

It’s important to remember that there is a big distinction between two types of testing: design testing and device testing.

Designers need use only a subset of devices, because what matters most is that we develop an affinity for how our designs work on any type of device when we hold it our hands. To be clear, how a menu feels when used on a smartphone is a very different issue from whether it technically works on a particular make or model of smartphone. That’s why designers don’t necessarily need to buy a myriad of smartphones and tablets, just those they need to develop an affinity for.

Responsive Design Requires Rethinking

Businesses (agencies, companies, customers) now need to refactor many aspects of their businesses to allow for better responsiveness. Our clients now need to restructure their buying process. For example, at my agency, Stuff and Nonsense, I still get prospective clients asking us only for static design visuals. They assume we work in Adobe Photoshop, Fireworks or the like and that we deliver static visuals, because that’s what designers have provided them with for well over a decade. That’s why, while many of our clients don’t often expect responsive templates as a deliverable, they love it when they find out that that’s what we deliver.

Design and development teams need to reorganize. It’s a fact that purely visual designers have the most to learn.

Those Photoshop or Fireworks static visuals I spoke about are no longer equipped to provide what we need from them in a responsive context. As I’ve said before, it’s like bringing a knife to a gunfight. More on that in just a minute.

The Client Participation Process Is Broken

I know that most people know me from my writing and speaking about CSS, and some people might not know that I make my living by designing for clients. In the last year, I’ve worked on projects with STV, where I’m part-time the design lead; the Hillsborough Independent Panel, whose report into the tragic deaths of 96 Liverpool fans in 1989 I designed the website for; and the ISO, the International Organisation for Standards.

Every designer should want to make the best work possible, feel proud about that work and make their clients happy. Unfortunately, the ways that designers and developers and our clients have communicated in the past has so often lead to frustration, unhappiness and, most importantly, work that failed to meet everyone’s expectations.

For a designer, sharing regular feedback with clients and involving them in every step of the design process might sound like a risky proposition, but it is necessary and beneficial to the design process — when done properly. Image: opensourceway.

Think of the traditional media that we used to communicate our designs: static wireframes and visuals (comps) that we made using drawing tools such as Photoshop or Fireworks, many of which pre-date the Web. These visuals are like bringing a knife to a gunfight. Think about the aspects of design that a static medium cannot communicate and all of the possibilities for misunderstanding that this creates. Static visuals cannot do any of the following:

• Display Web fonts or browser font rendering;
• Demonstrate different browsers’ CSS capabilities;
• (Easily) demonstrate percentage-based layouts;
• (Easily) demonstrate animations, transitions and pseudo-classes (states).

When I say “easily,� I mean not without hours of tedious repetition that we could otherwise spend being creative.

This isn’t to say that designing in a browser is always better. Unlike Stephen Hay, I use Fireworks to design atmosphere (typography, color and texture) and to develop fine design details, an extra layer of polish, after all of the sketching and interactive prototypes are done.

Design Atmosphere

What do I mean by “atmosphere�?

Many people continue to mix layout with other aspects of design. How often has a client said to you, “I don’t like the design� when they really meant, “The sidebar should be on the left, not the right�? That’s why we need a new word for what’s left when we remove layout from a design. I call what’s left “atmosphere� because atmosphere is often about something that you feel but can’t explain, like the atmosphere in a room after two people have been arguing, or like the atmosphere at a great concert or football game.

Worse than being inefficient, static visuals set the wrong expectations in the minds of our clients. I wrote about this very thing back in 2009.

Aside: Why are most websites fixed and centred at 960 pixels? Could it be because a designer showed their client a 960-pixel-wide static visual and asked them to sign off on it? That’s what developers have been told to build. That’s why, in the past, we’ve spent hours hacking HTML, CSS and JavaScript to make rounded corners display in old versions of IE. We sold rounded corners to our clients through those visuals. It’s our own stupid fault. No one else’s.

Even small “snapshots” of the design, such as these from Dribbble, can communicate atmosphere — the visual direction, style and overall feeling — of the new website. Images: Fluid Type, Fig. 49 by Trent Walton.

Work in Photoshop and Fireworks, by all means (I do). Make static visuals as rich and as detailed as you want them to be. Just don’t set the wrong expectations by showing them to your clients as examples of how their website might look across browsers and devices or by using them as sign-off artefacts. The same goes for screenshots of Web pages. Set the right expectations by demonstrating interactive designs made using HTML, CSS and JavaScript.

How To Call Your Client An Idiot, To Their Face, Without Getting Fired, And Then Have Them Thank You For It

One thing I’ve learned over the years is that clients love to feel involved in the design process. Sometimes, though, they make suggestions only so that they feel they have put their stamp on the project. I know that occasionally designers think that such requests aren’t necessary and that sometimes they’re stupid. Don’t worry. You are allowed to say that to clients (more about that later), but better still, avoid the issue entirely. Here’s how…

Don’t email pictures of websites to your clients and then ask for their “thoughts.� Are you mad?! In the same vein, don’t simply upload static visuals to Basecamp and expect constructive feedback without providing some direction on how to receive them.

Don’t wait until after weeks of work before having a “big reveal.� Down this road lies frustration and resentment. Instead, keep clients involved at every step, all the way through the design process, and not only at those traditional sign-off points. That’s why for the last few years I’ve tried hard to physically work alongside my clients as often as possible. When that’s not an option, I set up shared Dropbox folders so that the client can check in on my progress as I work. We even keep a Skype window continually open.

Set up the proper environment to receive structured feedback, and then ban all unstructured feedback you might receive by telephone or email. Insist that your feedback sessions be face to face when possible, and then limit their scope to aspects of the design. For example, ask for answers to specific questions about typeface choices and typography.

At my design agency, I help facilitate structured feedback by organizing feedback workshops with our clients. More on those now.

Please remember: you are the designer. You are the person who has been hired to solve a problem that the client either couldn’t or doesn’t have the time to solve themselves. Your solution to that problem is worth a lot to their business, so never underestimate your role, skills and influence in the design process.

With that in mind, remember that you can set rules about receiving the constructive, structured feedback that’s so important to helping you make a great design.

Rule 1

As mentioned, don’t ask for unstructured feedback out of context. Emailing or uploading static visuals just doesn’t cut the mustard anymore. You must control the discussion, so take the time to explain your designs and the thinking behind the decisions you’ve made. I’ve found that, because of this approach, my clients enjoy learning about what goes into making a design and are far less likely to request unnecessary changes simply to put their mark on the project.

Rule 2

Take control of the environment in which you present your designs. Host feedback workshops or design “crits,� and use them to get to know your clients better and to develop a deeper relationship with them. Make these workshops face to face when possible, and set time and scope limits, even if you hold them over Skype. These workshops work best when everyone is encouraged to be honest and to let their ideas out in the open. That’s why, although it may seem a little old fashioned, it’s important for someone to keep a written record of what everyone has said.

Make it clear to your client that only the people who show up to a workshop may have an opinion about the design. This must include even the CEO, who sometimes makes “helpful� suggestions 24 hours before launch (or when you want to get paid).

Rule 3

Remind everyone to leave their feelings at the door, because in a design crit only the work matters. Personal feelings don’t matter; so, inside the crit, frame the conversation so that your clients can openly express their opinions. Encourage them to speak their minds, to be brutally honest if they need to be and to scribble across your notes and sketches to get their point across. By the same token, you’re free to disagree with any suggestions they make. Be free to say the suggestions won’t work, and suggest better alternatives. This shouldn’t be about ego, only about the integrity of the work.

If you feel they aren’t listening, you’re free to call them an idiot, too, if you must. Say it to their face, and don’t worry about getting getting fired — if you’ve established a good enough relationship with them, they’ll thank you for it, too, because they’ll know you have their interests at heart and are passionate about doing your best for them and their business.

(al)

---

© Andy Clarke for Smashing Magazine, 2012.

Every now and then you will find yourself having to repeat the same value for a particular property in several CSS rules. Sometimes doing so is necessary, but there are some situations when you can use the “inherit� value to avoid repeating yourself.

In my experience, the properties I use inherit for most often are color plus properties related to background and font (both shorthand and the individual properties like background-color, font-size and font-family).

A few examples, then.

Read full post

Posted in CSS.

Copyright © Roger Johansson

When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not, it can be very useful to use JavaScript to change or add a class name to the html element.

By doing this you can create CSS rules that will only be applied when JS is available and vice versa. The trick is to make sure the class names are switched as early as possible during page load.

Read full post

Posted in CSS, JavaScript.

Copyright © Roger Johansson

Every name here is a tragic story of loss and heartbreak. The Garda Memorial Garden, or Gairdín Cuimhneacháin an Gharda Síochána, is located in the heart of Dublin city. This memorial is a contemplative garden with large stone plinths and a lot of names and numbers. The list of names, this “roll of honor,� records individual police officers (gardaí) who have lost their lives violently and tragically in the line of duty since the formation of the Irish state in 1921.

This article offers insight into the creative thought processes I followed in designing a typographic solution for this memorial. I’ll discuss my choice of typeface, my detailed layout, the size of type, the materials, the process of engraving, and leaving open the possibility to add names in the future. My objective was to keep a sense of visual harmony throughout the design, while aiming for a certain consistency in the future engraving of names, regardless of language.

Detail showing the carved dual-language granite plinth leading into the memorial garden.

The garden is located in Dublin castle, originally a medieval fortress.

The memorial garden is curved. It contains carved plinths, seating and plants.

The garden at night.

Background

In the spring of 2009, Ana Dolan, senior architect in the Office of Public Works, asked me to think about the style of lettering that should be used in a project she was working on. Her job was to design a new memorial garden to honor all those who had died in the line of duty. The state had decided to carve the names of these 82 individuals into a new limestone memorial, and the need for a typographer on the team was recognized. It was great to be offered such an unusual and non-ephemeral project.

A detail of the carved lettering in speckled granite, with dark-gray infill.

Some letters in the Irish alphabet have accented characters called “fadas.�

The typeface was also carved into stainless steel and infilled in dark gray.

Ana explained to me that another memorial to honor all of these gardaí already existed somewhere else in the city. It had served as a place for their families to visit since the 1950s. All of the people’s names and unique regimental codes were carved in stone in a continuous block, each separated by a simple cross. The original lettering style (see below) was handmade and calligraphic in style; simple, elegant and carved deeply. Sadly, information about its architect and typographer has been lost over time. However, it might have been carved by the English typographer Michael Biggs, and the monument designed by the Irish architect Desmond Fitzgerald. More research is required on this. Any takers from the Smashing Magazine community?

A detail of the original memorial from the 1950s, with hand-carved names and crosses.

This older memorial was located in a high-security place that was difficult to visit without prior appointment or without undergoing strict screening. Over the years, the families of those people whose names were inscribed in this memorial felt that visiting the place was quite difficult. As a result, a decision was made to redesign the roll of honor and relocate it in the city center, on the grounds of Dublin Castle.

A New Memorial

The architect and I met in early 2009 to discuss the new memorial and to assess the advantages and disadvantages of the carved lettering in the old memorial. The lettering reflected the typographic sensibilities of the time (1950s); so, pondering the choice of lettering and layout was crucial to bringing some of those qualities into the new memorial garden’s typography. Initially, I was instructed to faithfully copy the original letters, but thankfully this specification changed as the project progressed.

The new architectural team had also gone some way towards developing a typographic approach and were favoring a ranged-left (i.e. ragged-right) style rendered in a PC-available face. Happily, I was invited to join the team at this stage, before too many decisions had been made about positive and negative spatial planning, choice of face, general layout and credentials of the stone carver (more on that last point later).

In an email conversation with my client, I explained that the ranged-left model that her team had designed and emailed to me (see below) had visual problems. For example, the white space between the left and middle blocks of names looked wider than the space between the middle and right blocks. This visual oddity happened because the length of the names in the middle block was longer than in the other two blocks, resulting in an uncomfortable spatial arrangement.

The ranged-left layout didn’t work visually, especially with long names.

To my eye, the uneven white space between columns looked crude and clumsy. Harmony and regularity were demanded by the vertical and horizontal rhythm of the letterforms, the thicks and thins, the counters. It was important that the white space also have visual harmony. A lack of visual calm and harmony would detract from the overall coherence and stability — not a good vibe for a garden that needed all visual elements to be fully considered, that needed a thoughtful approach and that needed to be an oasis of visual order. These men and women died protecting Irish society from crime. Most died violently and in chaos. I didn’t want chaos in the typography. I wanted to create a calm and contemplative space. The typographic layout needed to be visually coherent, with a sense of structure and order. These people had made the ultimate sacrifice by giving their lives to protect others. The typographic design and layout needed to reflect the gardaí’s role of order and discipline in society, not the chaos that resulted in their deaths.

The task of laying out these names and numbers of different lengths in the allocated space in the limestone was complex. It presented the typographer with a visual riddle to be solved. I requested more time to explore these challenges on paper. Of course, allowing me more time came with a financial cost, but, happily, the architect understood the importance of typography and agreed with my arguments, giving me the green light.

Establishing A Layout

Early experiments of mine

Finding an effective typographic layout for the gardaí’s names and numbers called for a number of considerations to be made, such as the number of names, their varying number of characters, and the dimensions of each stone plinth. Eighty-three names (and ID numbers) were to be carved across nine limestone plinths of varying widths, each of which would allow room for ten rows of names across one, two or three columns.

I decided to center all of the names vertically.

To get more consistent margins and better balance, I advised that long names not be put on the same row across the three blocks. Long names sat best in the center block, with two shorter names on the left and right. The reverse (i.e. a short name in the center and longer ones on the sides) would work equally well.

For obvious reasons, not leaving any plinths blank was important. So, the 83 names were arranged across each of them, with space left below for names to be added in future (as will be needed, tragically). There is capacity to carve another 117 names into the plinths.

Each panel has one, two or three columns of names, with each panel holding up to 10 parallel  lines.

A one-column panel holds a total of 10 names.

A two-column panel holds a total of 20 names.

A three-column panel holds a total of 30 names.

Choosing A Typeface

There was general agreement that the shape of the letters and numerals in the 1950s memorial reflected a sense of “Irishness,� particularly in the letterforms, which were calligraphic in style and had a slightly uncial quality commonly seen in the letterforms of the Irish/Celtic manuscript tradition of the 8th century onwards. The Book of Durrow, the Book of Kells and the Book of Lismore all contain calligraphic letterforms whose shapes are influenced by the angle of the quill head and the angle of the scribe’s hand. However, I felt that a calligraphic typeface was not suitable for this project. I wanted a face that was almost invisible, so that, when reading the names of the fallen, one would think of them and not of the typeface. I wanted a typeface that was neither difficult to read nor so full of personality that it drew attention to itself, but rather one that reflected the hand-drawn character of calligraphy, a human quality. Yet it also needed the uniformity, strength and regularity of form found in a print typeface.

It was important that the new memorial have a typeface that could be set and carved in dual languages, namely English and Irish. However, for the long term, given the increase in gardaí with names that are non-Irish, non-English and non-European, the typeface needed to be versatile, be robust and include all glyphs and accented character sets.

I knew that the typeface would need to be easy to carve. I didn’t want one that had thin serifs, counters, stems or terminals that could be easily misinterpreted by a stone carver, resulting in a badly drawn version appearing in stone.

The hunt for a suitable typeface was on!

After some research online and using atlases of type, I found three possibilities for the project: Optima, Zapf Humanist 601 and Exemplar Pro. Each had a beautiful visual rhythm and lovely numerals. They were also all available for purchase in OpenType format and — more importantly for typesetting — available in digital form. The faces could all be slightly modified if needed with accented characters (commonly found in the Irish and central European languages), customized letters and individual number spacing.

The Optima typeface was a candidate for the memorial.

The Zapf Humanist typeface was another candidate.

All three faces had visual traits that were similar to the original 1950s lettering. For example, in Optima, the uppercase “K� had the same calligraphic kick in the top and bottom diagonal strokes. The uppercase “O� had the same vertical stress, and the stem of the numeral “7� leaned back at the same angle. And as in the old memorial, the crossbar on Zapf Humanist’s uppercase “T� was not parallel but had a calligraphic bend in the middle that was very satisfying.

The Perfect Face

Exemplar Pro was chosen.

Exemplar Pro

After much deliberation, I settled on Exemplar Pro as the most robust and flexible typeface. Its weight and solidity of design were greater than those of Optima or Zapf Humanist; plus, it had a full range of accented characters, ideal for unusual names.

Comparing Exemplar Pro to the 1950s hand carving, I noticed that a lot of the capital letters (N, M, C, H) and numerals (7, 1, 6) were sympathetic in design. The letterforms in Exemplar Pro have a roundness and rhythm that I liked, as well as a slightly calligraphic or hand-drawn quality. I wanted to avoid typefaces that were coldly geometric or mechanical. I was dealing with the names of people who had died tragically. Their families would visit this memorial regularly. I didn’t want the relatives of fallen gardaí to feel that the memorial was cold, industrial or mass produced. I wanted the typeface to be sensitively drawn and a little quirky, the way people are sometimes quirky. When set in Exemplar Pro, the individual names and numbers had a friendliness and individuality that was appropriate to the project. Exemplar Pro also seemed to translate well into a carved face. The serifs were not too thin, and the shapes not too fine or difficult for a carver to redraw or laser-cut. I decided to set the type and provide size layouts, which the stonecarver carefully cut into stone.

It was interesting to research Exemplar Pro’s designer and his rationale for this face as I was critiquing the letterforms. I came across this online description written about the typographer, Göran Söderström:

Söderström, born 1974, is a self-taught Swedish type designer and font developer based in Stockholm. Having just finished a little bit of calligraphic studies, he was twenty when he made the first sketches of Exemplar in 1994. In 2009 the full version became available, all glyphs were redrawn and improved. Diacritics were build for central European languages and small caps, different numerals and alternate letters were added. Finally, the typeface family was expanded to four weights with corresponding italics.

Inspired by the beauty and perfection of several typefaces and the art of calligraphy, he wanted to create a typeface that was traditional yet unconventional, a balance that felt both old and new. It was the perfect typeface for my project. Thank you, Göran!

Final Layout

The limestone plinths had a uniform height of 540 millimeters, but their widths varied, ranging from 900 to 1800 millimeters. For the layout of the names, I looked closely at the scale and size of the type (with letters that were 17 to 25 millimeters in height), the weight of the letters (roman or bold), the number of lines of text (a minimum of 10 and maximum of 11) and the visual positioning of the text.

Different point sizes and weights were considered.

I created a series of sample design layouts for panels of varying widths (1800 and 1300 millimeters), including a visual reference of names at the actual size on an A3 landscape page, demonstrating the three possible heights of names (17, 20 or 25 millimeters, the last being preferred).

Regarding the number of names, letters that were 17 millimeters in height, in roman or bold, would fit 11 lines per panel, making for 264 names in total. Alternatively, letters that were 25 millimeters in height, in bold weight, at 10 lines per panel would fit 200 names in total. The latter was more legible, and it had a better visual scale and allowed for a larger carving area letter by letter.

My client and I were in total agreement on the final height of the letters, the general shapes of the letters, the number of lines, the layout and the overall number of names for the memorial. The result was 25-millimeter-tall capital letters (100 points) over 10 lines, providing a total capacity of 200 names. We could have increased the capacity by reducing the size of the type, but that would have compromised the aesthetics and the carver’s accuracy.

The full and final list of names finally arrived as a Microsoft Word file, set in the Courier typeface. I got to work and supplied all of the final size layouts on paper to the stone carver for execution. (More names have since arrived, each one being carved directly on site.)

Engraving Technique

We decided to ask the stonemason to do a test piece on the limestone in order to firefight any final problems before all of the names were carved. At that point, we also had to make the crucial decision of whether to carve the letterforms and numerals by hand or by machine. The decision would have a major impact on the visuals, budget and schedule. Limestone is actually quite porous and weathers fairly rapidly, and its color and texture when dry is distinct from when it’s wet.

I also provided the names of two proofreaders who were qualified to proofread the stone carver’s work at phased intervals on site in Dublin Castle. I suggested that the architects order one or two extra pieces of stone in case of spelling mistakes or a carving accident. I love contingency plans, especially on a project like this!

A piece of limestone was carved by hand and by laser to test the quality of the carving.

To our surprise, the handcut lettering was shallow and hard to read. In strong light (our rare Irish sunshine) and in overcast conditions (which was more normal), the hand-carved lettering was the same color as the surface of the stone, so one couldn’t read it properly. However, the machine-cut lettering was very deep; shadows were apparent, and the text was very easy to read. The letters looked darker than the surrounding stone, and the resulting contrast improved legibility hugely.

Unsurprisingly, we agreed to cut the letters by machine. This decision had several other positive outcomes. First, it ensured that the carving of future names would be consistent with the initial names; secondly, it ensured a deeper definition of form, given the sharper edge; and thirdly, it maximized legibility.

The stone carver used an interesting technique (three stone carvers have worked on this project so far). I supplied the full-sized artwork in black and white on a large sheet of thin grammage paper (120 GSM), one per plinth. The carver then glued this paper onto a “blanket,� or intermediary sheet of heavy blue material, which in turn was glued into position on each stone. The stone mason handcut the letterforms by scalpel, cutting through the paper and blanket layers.

The stonecutter placed the full-sized printed sheets onto the stone before carving.

He then sandblasted and lasercut the cutout areas of paper and blanket to a standard depth of 2.5 millimeters. The edges of each letterform and their uniform depth had a very pleasing visual effect.

A decision was made to leave the lettering uncolored on the limestone. However, the granite, which contained a heavy background texture and pattern, needed greater legibility. So, a dark-gray infill was chosen for the granite plinths over each entrance.

Troubleshooting

The best laid plans sometimes don’t go as hoped! The original stonemason was chosen by the memorial’s architect. The builder who won the tender to build the memorial had included stone carving as part of their price. Four or five plinths were carved under this financial arrangement. Unfortunately, the main building contractor on this project was not so in tune with all of our typographic sensibilities and had hired a building subcontractor, who in turn had a different stonemason who in effect was working blind and hadn’t been vetted for quality. The result (illustrated below in the letter “G�) was disastrous. The letterforms were poorly cut and had no fidelity to the original typeface.

An example of an uppercase “G� and “A� carved in granite and infilled. The letters are sharp.

The “G� and “A� carved in limestone without any infill color. The “G� has lost some of its elegance.

Uppercase “G� and “R� carved in limestone.

These letters have been very poorly carved. The “G� and “E� have lost vital shape in their serifs.

I spoke to the original stonemason some time later and learned that his switch in supplier was accidental. He had received all of this feedback through the “trade� grapevine. He also mentioned that a third stonemason was hired by the building subcontractor. The overall result is that the letterforms were not properly carved and, sadly, the standard of carving is very inconsistent throughout.

I contacted my client and mentioned my disappointment in the quality of the stone carving. The client happily took my comments to heart and has since gotten a new stone mason. New names are now beautifully carved. Happy days!

Conclusion

The names of the fallen will continue to be carved in random order, so having a sustainable design and manufacturing process that could potentially last the lifetime of the designer and stone carver and then get passed on to the next generation was important.

New names are typeset in black ink. The gray names have already been carved.

New names take a year or two to weather and blend in with the other names.

To assist this process, I created a set of detailed typographic guidelines for future reference, outlining the typeface, alignment and point size and offering advice on tackling white space and the general layout. These guidelines were created to help the next typographer take over the project from me. This project will probably run for another 100 years, with approximately one name being added each year — I don’t plan on being around to see the last name added!

Being asked to tackle this emotionally loaded typographic conundrum was a huge honor. I hope I have created a sense of visual coherence and restful harmony. Each letter shape was important. Each person memorialized here was someone’s son, daughter, father, brother, mother or friend. Each name is now set permanently in the heart of this island’s capital. Even if you didn’t know any of these people personally, hopefully you feel that this memorial is a fitting monument to their lives and service.

Of course, this being Ireland, we never like to leave on a low note. The next time you are in Dublin, if it’s not raining, please remember to visit the memorial; sitting in the garden and reflecting is a rewarding experience.

(al)

---

© Anne Brady for Smashing Magazine, 2012.

Business cards are a quite popular topic and, depending on your method of acquisition, a decidedly important one. The web is full of examples in a wide variety of layouts. Today there’s no shortage of creative business card designs to buy ready-made or get tailored by a designer. Therefore the bigger problem is, how to avoid getting a card design that is nothing special.

So, today I’d like to give you a few tips on how to choose the right business card design, impressive and effective at the same time. Your business card should work for you. In order to not affect the feelings of any designers, I’ve asked a designer from CrazyPixels to create several designs. Of course, he was trying his best to draw the attention to the details we’re going to talk about. As a result, we’ve got incredible, modern and interesting business card designs.

Pictures on a Bright Color Background

So, now for the first design:

It’s a bright and stylish business card. It strikes the eye at first sight. If you are a creative person like a photographer or designer, this business card could be the best option for you. The picture on the back could show off your skills as a creative professional and the business card would thus become a part of your portfolio. You can create a few variants of such designs with different photos and give your potential customers an ability to choose which they like the most. I do believe they will remember you.

Here is a showcase of stunning business cards designs with great images and bright colors:

Usage of Color Schemes

Just take a look at this business card design:

No matter what kind of pattern shows on the business card. Would it be stripes, squares, circles or triangles, the main thing is a color scheme that fits. As in the previous design, this business card draws attention with its colors, but this time it’s not a single color, but a whole color range. Also I want to draw your attention to the QR code, which you can see here. Note that the points on the QR code are in the same color range as the whole business card. This is a small thing, but it gives the design a thought through look and makes it more interesting.

Roundup of business cards with interesting color scheme:

Minimalistic Design

A quite minimalistic logo, which was designed with only one color and creative use of white space featured on the front of a card is a brilliant way to make a stylish business card. You can place a logo or any design on the front and all the needed info on the back, including name, tag line and contact information. There are a huge number of variants to create a similar design.

Minimalistic business card designs:

Embossing aka Letter Press Effects

Embossing is a style of using a stamp in order to create a raised tracery on you business card in different shapes. This effect gives a business card texture and classical style. It allows you to use only one color, it’s the true color of business card paper. It makes the business card modern and elegant.

Letter-pressed business cards:

Adding QR Codes

QR code is a modern tool which allows you to take a picture of a code on a business card with a smartphone. The code would redirect you to the website, online portfolio or resume. It’s a perfect way to bridge the gap between a business card and your online work. Make sure that this modern tool is receptive to your target audience before create a business card with QR code.

Creative business cards with QR codes:

Typography

Typography is a popular trend and it’s worth to pay attention to. It can be difficult to find a corresponding font, but with a wider range of growing choices you won’t be ending up without the right one…

Business cards influenced by typography:

See-thru Business Cards: Transparency, a new idea

Transparency is a trend in advertising. Such kind of business cards are usually made of plastic, which is why they are more durable than a lot of the businesses that decide to use them. They also have a high retention value that the standard paper-business card does not have.

Transparency business cards designs:

Black & White

Black and white business cards are a perfect option for businessmen, economists, lawyers and other people in the so-called serious business. If you need simple, elegant and classic design, black & white business cards probably are what you are looking for.

Black and white business cards:

Unusual shapes

Such kind of business cards have unusual shapes and are in most cases custom-made. Business cards with unusual shapes need more resources in comparison with the usual ones. They might impress more, but due to their mostly uncommon shapes might make your clients throw them away easier as they don’t fit in their pockets. You should think this choice through from the side of your potential client.

Here are some examples of unusual shapes business cards:

Logical End

Try to do something different, even when it comes to business cards. There is just one chance to give a good first impression to your potential customers. Give it a try and you’ll see what works out for you. Your card should represent your brand and name. Hope this collection inspired you to create a unique and creative business card design of your own.

(dpe)