Design

Typography Carved In Stone // Design Process


  

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.

Carved Dual-Language Granite Plinth
Detail showing the carved dual-language granite plinth leading into the memorial garden.

Medieval Garden In Dublin Castle
The garden is located in Dublin castle, originally a medieval fortress.

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

Memorial Garden At Night
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.

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

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

Typeface In Steel
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?

Hand-Carved Names And Crosses
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.

Ranged-Left Layout
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 Layout Experiments

Early Layout Experiments
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.

Two Or Three Column Name Panels
Each panel has one, two or three columns of names, with each panel holding up to 10 parallel  lines.

One-Column Name Panel
A one-column panel holds a total of 10 names.

Two-Column Name Panel
A two-column panel holds a total of 20 names.

Three-Column Name Panel
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.

Optima Typeface
The Optima typeface was a candidate for the memorial.

Zapf Humanist Typeface
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 Typeface
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
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!

Limestone Carved By Hand and Laser
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.

Full-Sized Printed Sheets Onto Stone
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.

Uppercase “G� And “A� Carved In Granite
An example of an uppercase “G� and “A� carved in granite and infilled. The letters are sharp.

“G� and “A� Carved In Limestone Without Infill Color
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
Uppercase “G� and “R� carved in limestone.

Poorly Carved Letters
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.

Typeset In Black Ink
New names are typeset in black ink. The gray names have already been carved.

New Names Taking Time To Weather And Blend In
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 that Work for You: Tips and Best Practices


  

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)


KISS: A Showcase of Beautifully Simple Blog Design


  

As a member of the design community you have probably heard the expression ‘KISS’ before. For those of you who haven’t, it stands for ‘Keep it Simple Stupid’. It’s an established design rule that you should not over-complicate your layouts, but rather focus on the core aims for your page. The trouble is that designing a simple web layout is notoriously difficult. Despite containing less data and less graphics, a successful minimal web design is actually very difficult to produce. There is no hiding behind flashy graphics or other such distractions. Every detail must be just right, and it is these details that can make or break a simple web design.

There is a vast difference between some text slapped on a plain background and a stunningly minimal website design.

Often several aspects can distinguish a simple design as something special:

  • Awesome typography: Everything from line-spacing to letter-spacing needs to scream professionalism.
  • Subtle but effective graphics: In a simple design graphics won’t be particularly overt, but can still add some great touches to your page. A creative logo design or clean icons beside your blog posts can really help set your design apart.
  • Great visual hierarchy: Just because your page is simpler, doesn’t mean you wouldn’t have to focus on where you want to point your visitor’s gaze. Use typography, padding and color to draw your user’s eye down your page effectively.
  • Coding matters more: In a page that is so basic little coding tricks can go a long way. A smooth html5 effect here, or a css3 show-off there can turn a minimal page from boring to stylish and impressive.
  • Less columns = more: If you’re opting for a simpler design then consider a 1 column layout. This can really help focus attention on your key content and leaves less room for distractions.

KISS: A Showcase of Beautifully Simple Blog Design

Biblioteket
Biblioteket is a classically simple blog design. The color palette is very limited, using a splash of teal for the background border and logo text. The menu and textual content is very basic also. The entire design focuses mainly on the book covers posted, which provide the core content. As a ‘book cover blog’ this is entirely appropriate, and shows how a minimal design can give clearer focus to the key content. This focus is amplified by the large amount of white space and padding around each book design.

Simple Blog Design

Jason and Erin
Jason and Erin is a charmingly minimal blog run by a couple from Brooklyn. The site feels very focused, avoiding any sidebar content and concentrating instead on a basic one column design. The clean header and user-friendly menu provide the perfect intro to the blog content, which is quite literally a list of photos and text, lovingly formatted.

Simple Blog Design

Ordered List
Ordered List is the archetypal minimal site, with a monotone color scheme, and distinct lack of images. In fact, the design is almost entirely constructed of black text on a white background. Simple? Yes. Boring? No way! This blog manages to look effortlessly stylish and elegant through it’s minimal approach. The text has been formatted to perfection, with every padding, line spacing, bold styling, font size and heading feeling just right. A great example of good design being in the details.

Simple Blog Design

Old Guard
Another fantastic example of highly minimal design, Old Guard is a blog that just begs to be read. Whilst it is largely text based, the blog design beautifully implements images and video into certain posts. It also does a great job at guiding users through the page. You’ll notice varying shades of black/gray throughout the content, which clearly establish a visual hierarchy. For example, the large black post titles receive considerably more attention than the smaller, fainter text detailing the date. Similarly blue is used sparingly for links and underlines, immediately drawing our eye and encouraging action.

Simple Blog Design

Bird is Not a Cat
Bird is Not a Cat is a lovely minimal blog from photographer Nazar N. In this design the content almost takes a back seat to the panoramic, scenic photographic backdrop to the site. The 1 column, narrow content area lets the eye easily scan down it, almost like reading a receipt. There are no distractions within this design and the main focus is on the work of the artist.

Simple Blog Design

Rivers and Robots
Quite interestingly Rivers and Robots have created a mini-blog specifically to promote their album Take Everything. Due to the narrow focus of content they have been able to use a really minimal design, using a very narrow content arrow and one column approach. This type of minimal, narrow layout really makes their content more scannable. There is no clutter of a busy navigation, just three basic menu links.

Simple Blog Design

Josh Collie
A blog so minimal that it doesn’t even have a header, logo or menu! Josh Collie’s website is proof that content truly is king, as despite omitting several conventions of blog/website design, it is entirely readable, engaging and beautiful. The text is perfectly padded and feels very easy on the eyes. The large interspersed images and videos help to break up the page nicely.

Simple Blog Design

Simple Bits
Simple Bits has been held up as a modern day trend-setter for simplistic blog design. Originally it was the design that dared to be different in it’s minimal approach, but now it has inspired thousands of designers to strip away the detail in their own sites. The blog design is almost entirely type-based, yet doesn’t feel bare in any way. The stylish, minimal icons besides posts add a lovely element of detail while the varying, elegant typefaces provide an element of visual interest.

Simple Blog Design

Fran Exposito
I may not be able to understand the content on this non-English blog, but it doesn’t stop me appreciating the minimal design! This blog design is a great example of how a creative, engaging logo design can hold up an entire website. Without the logo this design would be solid, but perhaps a little boring. However, the logo perfectly frames the content below it and adds as the visual centerpiece for this design.

Simple Blog Design

Table 37
Table 37 is another blog held up for it’s creative design within the design community. It is essentially a very basic two column, textual layout. However, the use of some subtle background textures and a striking, creative logo make this a true minimal design gem. Our eye is drawn immediately to the larger right column containing the blog posts, and the left sidebar acts as a natural supporting area of content for this. Basic design principles at their best.

Simple Blog Design

MMMinimal
As suggested by it’s name, MMMinimal has a wonderfully simple blog design. Interestingly, the site focuses the user’s attention on the pictures that accompany blog posts, rather than the textual content, which is less obvious, using a faint gray font. The slick, centered layout is in no way obtrusive, and simply acts as a subtle frame for the blog post previews.

Simple Blog Design

Art Equals Work
Art Equals Work uses a super sleek, simplistic blog design. A light gray sidebar helps distinguish content areas, and the design remains essentially text-based. Visual hierarchy is artfully achieved through use of text-sizing, color and padding. The bright blue post titles are what draw our eye first, and the blog content is framed nicely by the minimal, artistic logo icon.

Simple Blog Design

Usable Efficiency
Usable Efficiency is another minimal blog design that really puts emphasis on the content. The plain background, and limited teal color palette, as well as an omission of distracting sidebars means that the blog posts are the only place to look. Presented in video format they make a particularly striking visual piece for the design, which even in it’s details is understating (see the faint twitter bird top-right).

Simple Blog Design

90 Four
Despite having a three column layout and a reasonable amount of content, 90 Four manages to still feel very minimal. This is largely due to the lack of graphics, as instead the site opts for a text-based layout over a plain white background. The design is still visually impressive due to the creative logo, great typography and deliberate use of color throughout.

Simple Blog Design

Trent Walton
Whilst many designs in this showcase use a narrow layout Trent Walton effectively uses as much space as possible in the browser. This wide, yet minimal design really allows the large text to breathe. It also helps to clearly distinguish the various areas of content. The color palette is limited to black, with rare uses of red for key links. I also like how the blog post images are displayed as a small thumbnail, which is much less obtrusive than typical formats.

Simple Blog Design

ForeFathers
A design that has inspired many designs since it’s first iteration, ForeFathers blog has now migrated to Tumblr, giving it an even more minimal approach. The textured background and old-style typography of the header is not overbearing, and leads down to a clear 1 column layout for the post content. This type of minimal layout let’s the user’s eye be drawn straight down the page in a natural fashion.

Simple Blog Design

Strange Native
Another fantastic example of a minimal design that works really well due to it’s subtle touches. This design is largely text based, but the basic logo icon and date/comment icons add a lovely touch of detail to the page. The text is very well padded and uses varying shades of gray as well as text sizes to establish a clear visual hierarchy.

Simple Blog Design

The Design Cubicle
Another pioneer in simplistic blog design, Brian Hoff has created a beautiful one column blog layout that gives primary focus to the content. Rather than detracting from the blog posts, the bold, bright background serves to frame the central content area.

Simple Blog Design

Flux Blog
Flux Blog is another minimal blog design that relies heavily on it’s creative logo to frame the otherwise simplistic design. Underneath the vibrant, colorful logo, the blog design is really very basic, with basic text sitting on a plain white background. There isn’t even anything distinguishing the various content areas, apart from differing sizes of text. Surprisingly the result is not chaotic, but the eye is naturally drawn down the larger left column of text through the various blog posts.

Simple Blog Design

Icon Bakery
Another minimal blog design framed by a beautiful logo design. As this blog discusses icon design it seems appropriate that the visual point of interest is the elegant logo icon. The rest of the header and main content area is very simplistic, avoiding overly complex graphics and opting for clean icons and text. Rare splashes of color are used to guide the visitor’s eye down the page and emphasize key headings.

Simple Blog Design

Modernerd
One of my favorite blog designs there is just so much to love about this website! Everything from the logo to the menu and blog posts feels effortlessly minimal. Essentially the site would just be a boring three column textual layout. However, several aspects combine to make the page beautiful. Firstly, if you look closely the background using an incredibly faint, subtle pattern design, which adds an element of depth to the page. Then crucially the typography uses non-standard web fonts to make each heading, each menu link a work of art in it’s own right. The best element of the page has to be the genius logo design though, which perfectly sums up the blog’s audience.

Simple Blog Design

Eight Face
One of the simplest designs in this article, but one of the most effective. If we break down the page design it is essentially a single column of text. However, it’s another great example of how quality typography can make all the difference. The two carefully chosen fonts contrast and spark visual intrigue, as the clean logo/heading text combines with the more elegant menu/blog post text. Even the logo icon screams minimalism as it effortlessly communicates ’8′ ‘E’ and ‘F’ in a few simple lines.

Simple Blog Design

Josh Spear
Josh Spear’s site is so simple that it manages to feel like you’re reading a personal diary. There is no excess clutter on the page, instead giving focus to the content. The elegant typography is enough to make the page interesting, which is helped by a creative logo icon and some cool styling effects. The user’s eye is drawn straight to the text on the page and they can’t help but read.

Simple Blog Design

MNML
MNML’s tagline ‘simply disruptive’ is the perfect description of their blog design. The site is incredibly simple, comprised mainly of plain text over a plain background. However, unlike many minimal designs that stick to a single column or rigid grid, MNML’s opts for a deliberately disrupted layout. The various content areas are put out of alignment with one another which means that the user’s eye flows more in diagonals than directly down the page. An interesting design that shows what can be achieved by breaking the mold.

Simple Blog Design

Simon Collison
Simon Collison’s blog design became instantly infamous after launching. It is considering a very minimal design, yet spices things up with some awesome illustrations and some html5 responsive design magic. This design has plenty of details, such as the page background pattern, yet none of these detract from the content which remains at the forefront. Any visual details are very subtle, and take a back seat to the blog posts. The red color in the design is used sparingly to guide the reader’s eye down the page.

Simple Blog Design

Vaullt
There is a reasonable amount going on in this design, yet it still feels quite minimal. The monotone black/white color palette helps to keep things very simple, and the content, whilst prevalent is very well spaced and doesn’t feel overbearing. Even the typography is very consistent, using a single, primary font throughout the page.

Simple Blog Design

Jack Osborne
A design so simple that you really need to visit it and play around to appreciate it’s finer points. At first glance it’s simple a column of text with some relatively attractive typography. However, the beauty of this design are in the subtle details. Firstly, the top blog post takes precedence as the other lower posts are all collapsed (until you expand them). Upon hovering over these collapsed posts you’ll see a bar come up which varies based on the number of words in that article. It’s little touches like this that can distinguish between a boring design and a daringly minimal design.

Simple Blog Design

Bobulate
Bobulate is a wonderful, single column blog that utilizes some beautiful typography. The design has a presidential feel to it through the use of a blue/red/white color palette. Even at first glance you can identify a clear visual hierarchy on the page, as your eye is drawn down from the bold blue logo, to the smaller headline text, and finally to the lighter gray blog post text. It’s essentially a very minimal blog design, but the varying typographic elements help add a lot of visual diversity to the page and make it a very attractive design.

Simple Blog Design

Pat Dryburgh
Pat Dryburgh has one of the simplest designs in this entire roundup. However, as a very minimal design it really works. The attractive typography uses ‘Proxima Nova’ which has become synonymous with modern web design. The color palette is limited to black, gray and blue and the blue is used to draw your eye down the page through a series of key links. The real merits of this design are how the incredible photography embedded into blog posts is integrated into the page, but you’ll have to visit the site and check out below the fold to appreciate this!

Simple Blog Design

Cherry Pow
Cherry Pow is fairly content heavy, yet still feels overly minimal. This is partly due to the limited fonts in the design, yet also because of the non-obtrusive header background design. Besides the logo icon this faint background design is the main graphic element of the page, which is actually largely text-based. The reader is not presented with a load of unnecessary options when browsing the design, and rather naturally scans down through the prominent blog posts.

Simple Blog Design

What Do You Think?

We would love to hear your opinion. Do you have any favorite examples from this post, or did you perhaps find a design that stood out to you especially? Let us know in the comments below.

(dpe)


Metro UI CSS: You can have a tiled website too


  

Microsoft’s new UI, once known by the name of Metro, has caused quite some buzz in the tech world. Meanwhile the name has been dropped, which again caused quite a buzz in the tech world. We don´t know why this was done nor do we know if the next Windows will be a market success. What we know is, that Metro as a design style has its fans. If you are one of them, we have great news for you. Thanks to Metro UI CSS you can give your very own website the same tiled look, the interface of the next generation Windows will have. Go ahead!


Metro UI CSS

Metro UI CSS is actively developed by Sergey Pimenov, who proves generous enough to leave the tool for us to use free of charge under the MIT license. Pimenov not only copied the typical Metro design, but also implemented a variety of effects from the original Microsoft product, for example the fade-in of subtitles on pictures or the switch buttons.

Metro UI CSS: A feature-rich framework

Get your own impression of what Metro UI CSS is capable of by visiting the demo. You’ll find several pages with examples of how pictures, forms, buttons and the typical tiles, bound to substitute the former Windows icons, look and interact.


Metro: Tiles

Ever seen Metro on a tablet? On these devices, Microsoft implemented vertical scrolling as the standard scroll direction. That’s just the way Pimenov implemented it in Metro UI CSS. Using a touch-device you can elegantly scroll through your website. You’re not forced to, though, as mouse scrolling is also supported.


Metro: Buttons

Metro UI CSS: Made with, yes, CSS and JavaScript

Metro UI CSS is not pure CSS, but relies on several JavaScript libraries for advanced functionality. The foundation is, as it often is, jQuery with some complementing plugins and the new superstar Bootstrap. Pimenov wants it mentioned, that he also integrated some of his very own JavaScript functions.


Metro: Pictures

If you like to learn along the guidelines of a thorough documentation, Metro UI CSS is not for you. Because there simply is no documentation. The demo can be downloaded, that’s it.  But it contains all elements for which the Metro style is available and thus should be a good starting point for the first steps to your very own tiled website. Several effects are invoked simply by calling the corresponding classes. You can easily find out by sneaking through the source code. Metro UI CSS needs a modern browser. Microsoft’s own Internet Exploder is supported from version 9 onwards.

(dpe)


Get Your Form On: Modern Web Forms Tutorials


  

This article is designed to show you (through tutorials) how to create and better understand CSS forms. With a proper understanding of each element (radio buttons, checkboxes, textareas ..), CSS know-how, a little patience and some creativity you can create beautiful and appealing forms.

Having a website with beautiful and functional forms is vital for managing a web business. Keeping your visitors and potential customers satisfied and making your website more accessible should be one of the primary focuses to any website owner. As a designer, the contact form is the first step a client takes to communicate with you, but it can also be the final step a user takes on your website. Having a good and functional contact form is vital to convince the client you are the right choice.

Whether you are looking for tips and tricks for creating contact forms, sign-up / sign-in or checkout forms this article will help you find what you are looking for; or at least inspire you.

Below you can find a showcase of beautiful web forms tutorials:

Get Your Form On

Create a simple CSS form

This tutorial explains how to design a good contact form using a clean CSS design with only label and input tags to simulate an HTML table structure.

Create a simple CSS form

Postcard CSS comment form

This tutorial will show you how to create a stunning comment form using an old postcard image.

Postcard-like CSS Contact Form

Stylish Responsive Form With CSS3 And HTML5

This tutorial shows you how to create a stylish contact form in CSS3 and the details of working with gradients, drop shadows and rounded corners.

Stylish Responsive Form With CSS3 And HTML5

Facebook-like Registration Form with jQuery

Probably the most known registration form is the sign up form of Facebook. Learn how to create it.

Facebook-like Registration Form with jQuery

A simple and stylish HTML 5 and CSS 3 contact form

Step by step tutorial on how to create a beautiful contact form using Photoshop, HTML5 and CSS3. The tutorial starts from scratch with the Photoshop mock-up.

A simple and stylish HTML5 and CSS3 contact form

Build a Neat HTML5 Powered Contact Form

This form tutorial is built using HTML5 for the input elements and uses the browser’s built-in form validation. Also for older browsers the tutorial uses jQuery and Modernizr and PHP on the server side to validate the input.

Build a Neat HTML5 Powered Contact Form

Fancy AJAX Contact Form

AJAX contact form that uses PHP, CSS, JQuery, formValidator and JQTransform plugins to style input fields and buttons and make the form functional. In addition it uses the PHPMailer class to send out the contact form emails.

Fancy AJAX Contact Form

Floating Feedback button contact form

This tutorial features the creation of an AJAX contact form. The form is not visible initially and is activated by clicking on a Feedback button floating to the left of the website.

Floating Feedback button contact form

Sign-in dropdown box likes Twitter with jQuery

This tutorial helps you create a JQuery Dropbox sign-in box, just like on Twitter.

Sign-in dropdown box likes Twitter with jQuery

Cross-Browser HTML5 Forms

This tutorial teaches users to create beautiful HTML5 forms for modern browsers and how to use a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins for compatibility with older browsers.

Cross-Browser HTML5 Forms

JQuery and CSS3 drop-down menu with integrated forms

A jQuery and CSS3 tutorial that creates a drop-down menu where each sub-menu has a different form integrated (login, contact form or sign up).

JQuery and CSS3 drop-down menu with integrated forms

Modern Web Forms with HTML5 and CSS3

A beautiful sign-up form with rounded input boxes and button. Also each textbox includes a small icon relevant to the given field.

Modern Web Forms with HTML5 and CSS3

CSS3 forms with HTML5 validation

This form validates itself in real-time whether the completed data fits the recommended format for name, email or website.

CSS3 forms with HTML5 validation

Simple gradient CSS3 form

A simple CSS3 form tutorial explaining the usage of shadows and gradients in HTML5 contact forms.

 Simple gradient CSS3 form

Conclusion

Contact forms have come a long way in the past years, especially after the release of HTML5 and CSS3. You should always be up-to-date with technology and this is an essential part of your online presence. Hopefully you found these tutorials useful, maybe even convincing enough to change the ones on your own websites. We would love to hear your opinions below.

(rb)


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