BlogmyQuery – BMQ

Many websites these days have some form of welcome area on their homepage. Welcome pages generally act as an introduction for new visitors, explain the website and often prompt an action on the part of the user.

Website welcome pages are typically more prevalent at personal websites, portfolios, and traditional businesses. They are less popular on news websites (where the headline story acts as the introduction). Of course, welcome areas aren’t considered necessary on sites with a clear purpose and established audience – there would be no point having a welcome page at CNN.com, as their user base most likely already knows who they are.

Often a slogan can suffice to help establish what a site offers. If you are pushed for space, or consider a full welcome area to be obsolete then a brief tag-line explaining what your site does is a handy alternative.

Below is an outline of common traits that are seen throughout popular welcome pages:

• Large, bold typography. Welcome messages are easy to read and have more impact when the type is large, clear and legible. This means good contrast against it’s background, and often bold font choice.
• Plenty of color. In researching this article a definite trend of colorful welcome areas was noticeable. The reason behind this makes sense – the eye is drawn to color.
• Artistic/creative typography and graphics. Often the wider content will have more standard web-safe typography, but the welcome area will have elaborate fonts, complex graphics, lighting effects and imagery. This means that rather than just blend in as another area of content, the welcome area will act as a graphical composition in it’s own right.
• A simple and concise message. You can save the paragraphs of text for elsewhere on your website, a successful website should be summing up your website as concisely as possible, just a few sentences max.
• Informative photos. If a picture speaks a thousand words, then it makes sense to include photos in your welcome area. For a personal site a photo can add a nice human touch, or for a more corporate site a great product shot can speak wonders about the quality of the website/company.

Inspiring Welcome Areas:

To better illustrate these traits, here are some analyses of a range of successful website welcome pages below:

Syropia Labs
Syropia Labs use some really elegant typography in a retro style to create an engaging welcome area. The font choices are reminiscent of a 50s American diner, and the retro patterns and shapes used accentuate this theme. The text concisely and clearly summarizes the site’s content.

Olive and Twist
This welcome message uses bold typography to catch the users eye. The concise line ‘Creative design studio’ perfectly summarizes the site. The fact that this text is the lightest text on the page set against a predominantly dark background means that it really stands out.

Adrenalin Media
The bright, colorful imagery of this welcome area immediately draws the eye. This welcome message is part of an interactive slideshow area, constructed using jquery. The capitalized text is bold, with a subtle drop shadow to contrast it further against the bright blue background.

Luca Vercellio
Luca Vercellio uses a very minimal homepage design, where the welcome message comprises most of the page. The welcome area is relatively subtle, with a soft light effect, and white on light blue color palette. The typography varies quite a lot, but is all light and clear, fitting with the modern, clean website design. Nothing too elaborate here, just a nice simple message, with a personal touch ‘Hello I’m Luca’.

Somersby Cider
Much more a visual spectacle, than a typography welcome area. There is the basic welcome slogan ‘stay open-minded’ but the really impression is created by the beautiful photo manipulation, which features the product in an attractive way. The fantasy world presented creates a magical mood for new visitors, and a sense of intrigue and wonder that should encourage them to check out more of the site.

Sentel
A clean and minimal welcome area with a limited color palette. The key words ‘designing’ and ‘promoting’ which describe company’s key services are highlighted in blue in order to make them more prominent. The welcome message uses a light font, with a solid colored background to help contrast it against the main pixelated website background.

BeMobile
Be Mobile is a really bold website, combining black, yellow and white for a colorscheme with plenty of impact. This welcome message uses creative copy, starting each line with ‘Be’, leading up to their company name ‘Be Mobile’ at the bottom line. In addition to this is a bold, black call to action button, ensuring that the users eye is drawn first down the page, then into taking action.

Aleks Faure
Another example of great copy. This copy introduces the designer, establishes what he does, and adds a sentiment about his quality and work ethic. The welcome area is simple but effective, and uses @font-face to integrate a creative font.

Narax
A really engaging welcome area, with a moving animation of an origami arc to fit with the slogan. The simple slogan ‘Your ark to the web’ is a little ambiguous, and doesn’t really describe what the site does. However, it does create intrigue. It’s actually the under slogan which explains the services offered. The pastel colors and cross-hatched paper area give a feeling of creativity, which fits well with the design theme of the company.

Syropia
This welcome area uses a retro look to help draw in users. The typography is varied, but comes together well as part of a great piece of imagery to headline the site. The copy has a nice personal touch as the webmaster states ‘I’m here to help you get there’. Color is uses sparingly, but red is used to emphasize key words.

Giebe Graphics
Another great example of copy defining the welcome area. The welcome message is very personal, and the grayscale color palette is broken by splashes of blue on key words. The opening line in speech marks (“nice to meet you!”) puts across a lot of energy and really helps connect with the visitor. The font is large and bold, with a subtle indented design to help it stand out against the page background.

Tiny Verse
In my opinion this welcome area has too much text after the initial headline, and it’s not all that legible against the background. However, what really makes this welcome area successful is the exciting photo manipulation in the right. The welcome area background is also really eye catching, and the space age cloud theme is sure to entice people.

Noutes
A bold and bright welcome area that acts as a header to the rest of the website. This welcome area utilizes a large icon for imagery, which provides a shiny, professional touch. The typography is fairly basic, yet instantly and concisely sums up the aims of the website. There is also a large, prominent Facebook Connect call to action.

Touch Tech
Touch Tech uses a great memorable illustration, with relevant imagery of clouds and mobile devices. The typography is large, professional, yet with a friendly aspect to it, using rounded lettering. The copy is very basic, yet instantly establishes who the company are and what they do (‘mobile and cloud developers’).

Gabriel Aloysius
A wonderfully simple welcome area, with some hugely creative typography. Rather than use plain type, the letters act as a mask, letting imagery show through them. This imagery is constantly changing as part of a montage to showcase the photographers work, creating a welcome area with a double function. The way that the letter shapes contain her work acts almost like a window, where you’re wanting to see in.

Bear Grylls Live on Stage
A totally immersive welcome area experience. The jungle backdrop creates an enormous sense of depth, as does the huge 3D typography and foreground photographs. This welcome area perfectly captures the feeling intended by his live shows – that you as viewer are part of the action.

Goodsie
A simple but effective welcome area. The welcome beings with their mission station ‘Online retail should be easy’, which is effective as rather than trying to directly sell themselves, their selling point becomes their integrity and company values. The large, elegant white typography contrasts well against the dark blue background, and the bright call to action button attracts plenty of attention. Notice how the blue background also integrates silhouettes of retail products, creating a subtle but relevant backdrop for the welcome message.

Epic Fleet
A bold, striking welcome area with some nice copy. The emboldened text ‘you can afford’ underlines the central message of this company, which is value. The concise message also instantly states what they provide (‘web design’). Underneath this some examples of their work are attractively displayed in a fan pattern, in order to create additional visual intrigue.

We Are Pandr
A stylish welcome area in an illustrative style. The welcome copy is highlighted by using a simple black backdrop featuring white typography. The main green background uses simplistic illustrations and patterns so as not to detract from the central message. The colors are bright, clean but limited, so the eye cannot help be drawn to the welcome headline.

Bear Hat Studios
A classic example of a welcome area using HUGE typography. The simple textured background ensures that the large text is the central focus, particularly as it takes up 80% of the homepage. There are no fancy words here, just simple copy that clearly states what this company provides. The typography is made more interesting through subtle gradient overlays and faint drop shadows. All of these design features serve to emphasize the welcome text.

Made by Vadim
A creative welcome area with a stylized, abstract illustration at it’s center. The welcome message itself serves to introduce the designer and clarify exactly what he does. The personal ‘Hello’ message is emphasized through the use of scripted typography and large text. The abstract illustration of the designer not only provides a personal insight into his world, but helps to show off his design skills.

Putra Roeung
Another welcome area that concisely states what the website owner does. The subtle background design of this welcome area really works well. If you look closely you’ll see examples of their work and design processes behind the main text. The logo badge is a nice grungy touch to add creativity to the design, and the two call to action buttons are accentuated by sketchy arrows pointing to click them.

Spout Creative
A quaint, easy-on-the-eyes welcome area, this site utilizes pastel colors and soft illustrations to provide a friendly welcome for people. The typography is well organized and uses reasonably informal fonts to add to the casual mood of the website. The illustration of the girl using the megaphone gives the text more of an auditory aspect, as she is clearly announcing the welcome message.

CMYK08
A great example of a highly personal welcome area. This designer combines a personal photo, an informal greeting (‘hello folks!’) and some nice grungy/sketchy touches to reflect his design style and personality. He has manipulated his own photo to fit with the limited color palette of the website, where blue, light gray and black combine to result in a stylish welcome page. The tagline by his photo ‘I think I need a haircut’ is another insight into his humor and presumably approach to design.

Chapter Three
A reasonably formal welcome area, this design uses bright teal colored lettering for the main welcome headline, which contrasts effectively against the dark gray background. Key words are highlighted in orange, and their location (San Francisco) is integrated very creatively into the shape of the Drupal logo (which of course is relevant to the services they provide).

Masswerks
A very simple but attractive welcome area. The copy is a friendly greeting, followed by a description of the firm’s services. The bold black text contrasts well against the bright orange backdrop, and is emphasized further by use of a thin white drop shadow. The fact that the logo and welcome message are on a single line gives a unified sense to the design, and visually connects the company’s brand with the sentiments of their welcome message.

Alan Power
This welcome area avoids being overly busy, but creating a great visual hierarchy, drawing the eye diagonally down the header. The bold, large typography of the welcome area is really eye catching and the splashes of red work nicely. The simple gray background helps foreground the welcome message, which is emphasized by the examples of the company’s work to the left. Ultimately the eye is drawn down the header to the nicely textured call to action button, encouraging client contact.

New Concept
This welcome area uses photography to enhance the message within the copy. ‘Beautiful & Elegant’ describes their designs, but is also depicted by the beautiful, elegant butterfly to the right of the welcome text. When you hover over the butterfly image a magnified circle pops up, providing an interactive element to the welcome area, which helps maintain people’s interest.

Uproar PR
A great example of effective typography in a welcome area. Not only is the welcome type large and eye catching, but it impacts upon the surrounding environment. In this case we see the word ‘NOISE’ actually cracking the surface that it rests on, which creates a much more real environment for visitors. The lens flare effect and metallic sheen also draw the eye. The imperative nature of the copy ‘make some noise!’ is a much more aggressive message than other examples in this post, yet fits with the cut-throat nature of the PR industry.

Joe Guarino
Another designer who uses an informal welcome approach for potential clients. Rather than hide behind a false corporate mask, Joe presents himself honestly and openly, through a fun self portrait illustration and some funky typography. The informal copy ‘Hi, man!’ establishes a friendly vibe for potential clients and helps draw them further into his site.

Kendra Schaefer
This site uses photography as the principle feature of the welcome area. The typography is reasonably large, but isn’t all that legible, and doesn’t provide a huge amount of information. It’s more there for a humorous, abstract message. The photography is the real gem of this welcome area, as it’s dark, moody and emotion, and captures a lot of attention. As a visitor we want to know more about the figure depicted, and as a result browse around the rest of the page for clues.

Shout Digital
A bright, colorful welcome area with a crazy Flash animation. The actual text of the welcome area comes below this animated area, but the quality of illustration and animation is so superb that the site has already won you over.

Convax
This welcome area integrates examples of the company’s work really creatively, by positioning them as a billboard in amongst a sketched out cityscape. The call to action button ‘get in touch’ is creatively integrated into the background, sitting within a sketched cloud shape.

Amit Tishler
A welcome area that’s highly appropriate for an animated, showcasing an awesome vector backdrop for the page. The welcome area includes a Youtube video, which showcasing the animator’s work better than a static image could.

Jeremy Man
This welcome area has an awesome western theme that fits well with the overall site. The welcome text actually isn’t an image, and uses @font-face and some cool css effects to style it. The indented illustrations and background textures create an authentic cowboy aesthetic, as does the copy (‘Heckuva’ Frontier Wranglin’).

NorthEast Creative
North East Creative use some great background lighting effects to foreground their concise welcome message. The colors of this area compliment each other well, and the bright yellow text stands out against the deep purple background. There is a central fan design displaying examples of their work, which works to create depth and a visual attraction for visitors.

Web Munky
Web Munky use their cheeky mascot and colorful logo at the centerpiece for their welcome area. However, the tagline ‘we craft online experiences’ provides an informative sub text for the area. The bright, vibrant colors draw the users eye, and the visual hierarchy effectively prompts you to scroll down the page and find out more about their services.

Media Germ
Another great example of text masking. This media company lets their work show through the shape of the welcome area lettering. The typography is really bright and eye catching, although the legibility is slightly hindered by the busy fill. The length of each line of text means that the eye is naturally drawn down the block of text to the smaller call to action button.

Raven Tools
Raven Tools use a relatively reserved color palette for their welcome area. However, the great background lighting and creative typography adds a lot of impact. The copy is concise and immediately lets users know what the company does: ‘A powerful internet marketing platform for agencies and professionals’. The screenshots beneath this help showcase how the platform works, followed by a bright call-to-action button.

Crssrd
A really artistic welcome area that shows off the artist’s talents. The grungy illustration fits in perfectly with the surrounding textured website and typography. Even without analyzing the copy of this welcome page it had to be included as an example of how a great central design can make a welcome area memorable. Remember – a picture can often be worth 1000 words, and in this example no text is required to showcase the designers skill.

(rb)

With so many free fonts available on the web today, it is easy to miss out on some true gems in the typographic arena. It is hard to stay on top of the latest developments and releases when there are so many outlets to turn to find your fonts. Today we aim to help you out with this charge, by showcasing some grunge laden free fonts, most of which are less than a year old.

Looking around for fonts, it became fairly clear, that most designers (be they makers of fonts or featurers of fonts) tend towards clean, sharp typography. We wanted to take things in a different direction. So we went for a little walk on the grunge side as we searched for free fonts to feature for our readers. We hope you enjoy!

The Fonts

Silent Hunter III

Download

Special Elite

Download (@font-face compatible)

AA Typewriter

Download|Donate to Creator

Rock Salt

Download (@font-face compatible)

Sears Tower

Download|Donate to Creator

Protest Paint

Download Win TrueType|Download Mac TrueType|Download Mac PostScript

Orwell

Download

Geekriot v1.0

Download

Olivetti Type 2

Download

Bad Cargo

Download

When it Rains

Download (free for personal use only/ commercial license $5)|Donate to Creator

Wicked Grit

Download|Donate to Creator

Remnant v1.0

Download for Mac|Download for Win

Fueled by Schlitz

Download|Donate to Creator

Leander

Download (@font-face compatible)

The Missus Hand Oblique

Download

Permanent Marker

Download (@font-face compatible)

Catenary Stamp

Download|Donate to Creator

DCC Sharp Distress Black

Download

Static Buzz

Download|Donate to Creator

Smash Punkers

Download

Secret Stick

Download

Coloroyd Bastard

Download

Amalasuntha

Download

Carbon Blade

Download|Donate to Creator

Extrakrebel 1987

Download

Ed Gein

Download

(rb)

One of the topics that the design blogging community touches on from time to time, concerns the saturation levels of the blogosphere with regards to design blogs. There are so many design centric blogs filling the landscape that the chances of capturing enough of the available audience out there so that you can generally consider your blog a success amongst the rabble are decreasing with every new RSS feed introduced into the mix. This can paint a fairly grim outlook for the future of the online design blogging community.

Could many of our beloved design blog’s futures be as shattered as this monitor? Image Credit

Now some will dismiss these claims, discounting the threat that we as an entire community are facing. Perhaps they are right. Perhaps the growing number of design blogs is a sign of industry strength and market stability. But what if it is not? What if these alarm bells and red flags that seem to be sounding off in some of our heads, are in fact valid? There are those who not only believe this is an issue that we either will face, or are facing now, but who also believe that there is hope.

And that hope, lies in a much more refined focus for our design blogs. Now there are a number of blogs in the design community that have an area of design that they tend to focus on. For example, Pro Blog Design tends to only focus on blog design, and for the most part WordPress. Many in the ranks focus purely on logo designs or on strictly inspiration, and you can even look to the Envato network of specialty sites to see more of this focusing in action.

And though many of us have a specific direction in mind, we have to wonder if it is enough? Are these focuses the keys to keeping ahead and keeping our audience? Is the future of the design blog in the finding an extreme niche to serve? With sites like Media Queries and We Love WordPress, is the landscape changing on the design front? Is this a necessary evolution?

The Discussion

The online audience is a finite group. Growing? Yes, but still finite. So at some point, we are going to reach the level where this simply becomes a numbers game. With a finite audience, also comes a maximum level of content consumption. If the audience only consumes a maximum number of blog offerings per day, and the blogosphere continues to grow and oversupply that demand on a weekly basis, then how long before the majority of the content being produced is simply wasted time and effort from the community? At what point does the growth of the design blogging field, actively begin hurting the community and the content? And the bigger question, have we already reached it?

Are we slowly tipping the scales out of our favor? Image Credit

There are many who think that we have already passed this proverbial breaking point, and that the design blog ranks will undergo something of an evolutionary die-off. Numerous blogs will simply disappear from the landscape, while others stagnate and simply cease to update. Without an active audience to appeal to, many bloggers will essentially just be screaming into the dark. Hoping that someone might happen by and hear them. A select few powerhouses will remain among the virtual ruins and ghost towns, those who have already established themselves as a valued resource. So what will be left for the rest of the design blogging community? The niche!

Trying to compete with these titans, is known to be a fruitless and frustrating venture, so in order to stay relevant after the die-off, most blogs will need to be niche focused in order to keep an active, sizable audience, and be able to label themselves as a success.

Defining Success

Now we understand, that what constitutes a successful blog is extremely interpretive. Many bloggers have established benchmarks for themselves to highlight their progress and ensure that they are in fact on a path of forward mobility. However, forward movement only tends to matter if you have some sort of endpoint in mind. An actual goal that you are moving towards. And we understand that it is really up to each individual, what that goal will be. So when we talk about having a successful blog, we cannot possibly know what each design bloggers endgame is. So we are speaking about success in terms of audience attention. Basically, in these terms, having a number of regular followers and content consumers.

After all, visibility and awareness tend to be two of the main reasons that we blog, so if the targeted audience is not responding to, or even seeing what we are doing, then our blog is not going to be much of a success. This is why the over-saturation of the design blogosphere is as pressing a matter as it is. For if we create content that is meant to benefit and improve the design community, but we have no audience reach, then our content is not so beneficial or improving anything. Much like the tree that falls in the woods without a witness, our content does not make a sound.

A Matter of Monetization

In this equation, does money matter? Image Credit

Perhaps one of the biggest measures of success for some bloggers, is their ability to monetize their site. This tends to be done via selling space to advertisers, which tends to depend on traffic. After all, there has to be some incentive for the advertisers. Focusing on a niche can actually have both negative and positive impacts as far as ad sales go. It can help because advertisers know that you have a specific target audience, and those who wish to reach more directly into that market will appreciate such a niche focus. Unfortunately, this is the same reason it can hurt your ability to sell ads. Those who wish for a broader audience reach may be turned off by this finely focused approach.

So when it comes to setting up a niche, you may have to also rethink your monetization strategy for your design blog, and attempt to redirect your efforts to yield more positive results. However, to survive when the divided online audience tires of wading through these saturated information byways, and a sort of purge occurs throughout the blogosphere you are going to have to realize that it is not all about the Benjamins as we have been programmed to think. What a lot of bloggers are going to have to realize, is that a money driven mission statement, can often drive your blog into the ground.

Those who set up their sites just to make money, tend to have subpar quality sites that reflect their desperation for monetization. They heard about the potential for revenue, and like the gold rushers of the past, they thronged to the web. Logobird had an article lamenting about some of the issues with monetizing your blog, The Shady Side of Design Blog Monetisation that is certainly worth a read.

Not only does the content of your blog begin to reflect this mission statement, but your drive will begin to diminish if the returns on your efforts are coming in lower and slower than you would like. Readers will feel this coming through, and in the end, it could actually cost you. Those who tend to be focused on the experience and the community enrichment, will tend to be the ones whose content has more appeal to the masses. Having an extremely niche focused blog, tends to show that you have a passion for the field, and for improving it. Not just grabbing for numbers. Not to mention, it allows you to worry less about blogging for advertiser’s visibility, wherein frequency wins out; and focus instead on blogging when you have something of quality to add to the overall design dialog.

The Road Not Taken

“…Two roads diverged in a wood, and I- I took the one less traveled by, and that has made all the difference.” – Robert Frost Image Credit

Finding a nice design focus that is being somewhat overlooked by the rest of the online design community, that proverbial road less taken, can not only improve your blog’s chances of surviving in this overly saturated market; but it also improves and strengthens the community. Suddenly, designers have a resource to turn to for specific areas of their needs, rather than having to search through expansive archives for a single piece that perhaps touches on the subject. When we set ourselves on a focused path such as this, we tend to dissect that area of design fully. Rather than just brush the surfaces every now and again.

And when you look at it like that, we can see the inherent value in this niche approach. It sort of borrows on the Less is More theme. When you have less of a subject to cover, you have the ability to cover it in much more detail. Also, when we regularly dissect our niche area of design, it alters our perspective. We begin to relate to the subject in a whole new way, and as a result, we can also make it more relatable to others. The more angles we view the subject from, the better we understand it as a whole. This makes dissecting it, and explaining the sum of its parts much simpler. When we try to take on the entire field of design, we get a much less comprehensive exploration of each of its numerous deep facets.

You Are Not Your Design Blog

Now one reason that some designers are leery of adopting this approach is because they feel like this somehow limits their own design work. Like their own focus has to be limited to their blog’s niche. But that is not the case. While you have to ensure that you have a good grip on your niche so that you can blog about it accurately, that does not mean that your entire design career now has to fit within that niche as well. You are not your design blog. And you are not limited to only contributing to your niche focused site either. You can still guest on other sites with a different or simply wider design focus.

In conclusion

Yes, there are both upsides and downsides to adopting this niche approach for your design blog. But in the end, if it means that your blog will remain standing and relevant after the over-saturation induced die-off occurs, then aren’t the costs worth paying? Doesn’t it make more sense to refine the focus of your design blog so that the content still reaches those who need it, rather than investing time and effort to develop content that falls through the cracks? This is no Field of Dreams, and just because we build it, doesn’t mean that they will come. Not when there are thousands of other fields that they can go to.

Needed Web Design Niche Coverage

Below are a just a light handful of some of the areas of web design that the online community to could a little more niche coverage on. So if you do decide that this route could potentially prevent your blog from becoming one of those lost to the proverbial wastelands, then perhaps one of the niches listed here might just be the perfect fit for you and your blog.

Mobility

Make no mistake about it, mobility matters! Image Credit

One thing that no web designer can deny is that the future of web design is gong to be heavily influenced by the mobile market. Since it burst onto the scene, the mobile web has exploded by leaps and bounds, promising to take the web into a whole new direction. Now whether this market becomes the dominating direction for the web design industry or not, it is clear that it is going to be a major player in some form or fashion. It’s here. It’s taken root. It’s not going anywhere. So this creates a huge opportunity for designers to get there niche blogging on.

Given that this market is still in what some would consider its infancy, that means designers are going to be looking for authoritative voices and sources for nurturing its growth. The blogosphere could certainly use some focus in that direction, so perhaps that would be a route you might entertain.

Usability

Now as the web evolves and changes, both in scope and direction, one vital design field that must also evolve is Usability Design. Interfaces and user bases are an extremely fluid area, and keeping the web design community up to date on the latest and greatest advances in UI and UX is not only a noble cause, but a much needed one. There are some really great blogs that focus on usability, but given its nature, we could always use more. Usability is beyond a fundamental aspect of web design, it is the structural framework that we build our entire designs around. So if you are looking for a niche for your design blog, perhaps this is one that you should seriously consider.

Marketing

Everything evolves, and so do our marketing strategies need to as an industry. Image Credit

Another area of web design that could use so more focus and attention, would be the marketing aspect of the industry. Not just marketing the client’s site and maximizing their potential for traffic, but marketing ourselves and our field. Web designers often lament about the way that the entire industry is undervalued and under-appreciated. Part of that impression comes from the way that many market themselves to the masses. Devaluing others in the community in order to make themselves look better in comparison. With bargain basement belittlers effectively crying out, ‘Don’t pay those over inflated prices. Pay for design not ego. Starting as low as $49.99!’

This actually reflects poorly on the industry as a whole, but without anyone telling us otherwise, we think this is the best way forward. But perhaps if we had some blogs dedicated to nothing more than helping designers find better marketing practices things could stand a chance at getting better. This could also lead to more sound industry marketing practices all around. Getting us away from SEO and Social Media Marketing, which some in the community would like to see gone as it is. This is another potential impactful niche for you to focus on your blog on.

App Design

Also, with the rise of the mobile web, and the push for a much more enhanced, and in some cases a browserless way to experience the web, apps are a big wave of the web design future. Application design is another area that the community tends to focus too few resources towards. Especially with not just the web’s evolution, but with OS’s as well. As Google continues to develop their new wave of web technologies, pushing Chrome more and more towards an independent operating system of sorts, we see new opportunities for this design focus to move even more to the forefront beyond just for mobile devices and development. Apps are effectively changing the way the game is played, and web designers need some guiding forces in that arena to help show us the way.

Anything Other than WordPress

Don’t get us wrong, WordPress is a powerful CMS, and one that is put to use in countless contexts. But if you were to take a look around at the web design blogs, you would think that WordPress was the only content management system out there. Or at least that was worth checking out. But that is so not the case. With wonderful alternatives like ExpressionEngine and Drupal, just to name a couple, the web design blogosphere seems to be completely missing out on these opportunities. So there is always potential for your niche in those arenas as well.

That’s All, Folks!

That wraps things up on this end, but this conversation is hopefully just getting started. Use the comment section below to fill us in on what you think this growth means for the future of web design blogs. Are there any niches that you think the community could use more focusing on? Do you see any positives to this sort of saturation or any negatives that we failed to mention?

(rb)

Design without functionality is useless. With the resources needed to design websites, videos and graphics at the fingertips of those who crave them, the value of communication today is evident. Many factors will shape the future of the creative design industry, so the more we share ideas the better. We would all benefit from interoperability. Our job is getting harder, because as the problems we try to solve become more intricate, so must our methods become. Less time spent catching up on the principles of design means more time to experiment with what we know.

The Art of Typography

When it comes to type, beauty is in efficiency and simplicity.

In the study of graphic design, typography has been the most difficult aspect to implement in my studies. It’s the most complex and time-consuming, yet it provides the strongest foundation. If a design has strong typographic organization, the rest falls into place.

Minimalist design is captivating and projects a sense of economy; it’s clear that the designer has mastered the basics. Simple design is also a key element in the brilliance behind proportional units of measurement, such as ems and percentages.

We can transplant typefaces, principles of organization and grid-based design from print to the screen by having a couple of Web-design tactics handy.

Letterform

The original movable type.

Old-style, modern, sans-serif, slabs: typeface elements vary in size, weight, form and structure. An old-style serif typeface might evoke feelings of warmth and elegance, class and extravagance. For something contemporary, a sans-serif typeface like Helvetica or Lucida—with a high x-height and uniform weight—would convey simplicity.

When using a combination of fonts, contrast helps readers differentiate between them, with their opposing structures and forms. Type is a matter of personal preference. Stick to a small variety at first so that you can learn to recognize the differences. Here’s a good exercise: choose one font and experiment with different weight and size combinations in that family.

Grid-Based Design

Cuidad de las Artes y las Ciencias in Valencia, Spain

Typographic grids, like architectural blueprints, lay a solid foundation, which is necessary in the initial stages of design. Rigidity in structure has defined grid-based design throughout its existence, and movement occurs when a viewer is led along a particular path through a composition. Fluid Web content has changed this by introducing the element of adaptability, which makes a static medium responsive to a rapidly changing environment. Basic print and Web structures exist on the same planes: the x and y axes. Columns and gutters lie perpendicular to the baseline grid and can be measured and organized the same way. When combining the two, pay attention to the details that make each unique, such as the CSS that enables fluid content and the solid structure that print media has perfected over time.

Divine Proportions

The Fibonacci Sequence is a naturally occurring phenomenon that has intrigued man for centuries.

The Golden Ratio, which is based on the Fibonacci Sequence, underlies international paper sizes (the “A� series: A1, A2, A3, A4, etc.). Unlike American paper sizes, international sizes are uniform in symmetry and (metric) measurement. Paper size doesn’t necessarily bear on Web design, but proportion does. Graphic design is visual organization, and the beauty is in the details.

“The end result is the sum of all the details.�

– M. Vignelli

Making These Principles Work On The Web

Sketching on paper can be a refreshing and inspiring break from the screen.

Responsive Type

By using relative units as the focus of a design’s typographic structure, every word on the page can react as one to the display size. Readability issues are thus resolved in the early stages of programming, and adaptive functionality is added, creating unity.

Fluid Content

Applying the principle of responsive type to every element of a Web page makes the content capable of adapting to a variety of issues that might otherwise compromise compatibility and readability. Proportional units of measurement free a Web page from static size and can be used to design content for mobile browsers—one of the major areas guiding the direction of Web design right now. Using proportional units of measurement in CSS makes content fluid and ties in the math and proportions that have allowed traditional typography to become a means of expression and an art form (instead of mere rules to dictate what cannot be done).

Media Queries

Screens come in a thousand different sizes and resolutions. What I like about the CSS3 media query feature is the option to design for different media. With the specifications in place, you can add advanced variables in response to different types of output, not just a screen: projectors, printers and mobile phones are just the beginning. And conditional CSS declarations allow for progressive design.

Example

I developed this print format (one of many) for the mass reproduction of a singular style.

Here is an example of a print media style sheet. The format can be adapted for Web development if you know a few basic elements of CSS. In the type treatment, the heading is set to 72 points and the body to 12 points. This means that the heading is six times the size of the body text. By using ems as the relative unit of measurement in your CSS declarations, you can maintain every text size setting as a pre-formatted style:

body { font: normal 100% Georgia, Garamond, serif; }

h1   { font-family: Helvetica, sans-serif;
       font-size: 6em; }

This same principle will keep elements on the page fluid. Set CSS declarations for page ids that tell the HTML to act this way (do this for ids, not classes, because ids occur once per page, while classes can occur more than once):

#page { margin: 40px auto;
        padding: 0 1em;
        max-width: 60em; }

That’s what CSS does: it defines the way you want the HTML to act. Set ems again as the unit of measurement to make it behave uniformly. How did I know which em values to use? It’s in the math and percentages.

First, convert the body-text setting (12 points) to 16 pixels. Then, because everything is based on that setting, you can use it to convert the margins and font sizes to conform to your grid.

Further Resources

These are available as PDF downloads:

• Choosing Typefaces
  Literature from Susan G. Miller on the core elements of typography.
• Liquid Layouts
  A CSS tutorial for adaptive layouts.
• The Vignelli Canon
  The monograph of M. Vignelli, one of the founders of modern graphic design.
• Perfect Your Kerning Skills
  A tutorial on kerning and how to use it effectively.

Common Terms of Design

• Movement
  The visual flow that directs a viewer’s eye through a design.
• Proportion
  The relationship in scale between elements and their size, shape and quantity.
• Emphasis
  The varying degrees of dominance in a design, usually defined by weight, space and perspective.
• Unity
  The quality that makes a design complete; the degree to which the parts of a whole come together and resist falling apart.

(al)

Design without functionality is useless. With the resources needed to design websites, videos and graphics at the fingertips of those who crave them, the value of communication today is evident. Many factors will shape the future of the creative design industry, so the more we share ideas the better. We would all benefit from interoperability. Our job is getting harder, because as the problems we try to solve become more intricate, so must our methods become. Less time spent catching up on the principles of design means more time to experiment with what we know.

The Art of Typography

When it comes to type, beauty is in efficiency and simplicity.

In the study of graphic design, typography has been the most difficult aspect to implement in my studies. It’s the most complex and time-consuming, yet it provides the strongest foundation. If a design has strong typographic organization, the rest falls into place.

Minimalist design is captivating and projects a sense of economy; it’s clear that the designer has mastered the basics. Simple design is also a key element in the brilliance behind proportional units of measurement, such as ems and percentages.

We can transplant typefaces, principles of organization and grid-based design from print to the screen by having a couple of Web-design tactics handy.

Letterform

The original movable type.

Old-style, modern, sans-serif, slabs: typeface elements vary in size, weight, form and structure. An old-style serif typeface might evoke feelings of warmth and elegance, class and extravagance. For something contemporary, a sans-serif typeface like Helvetica or Lucida—with a high x-height and uniform weight—would convey simplicity.

When using a combination of fonts, contrast helps readers differentiate between them, with their opposing structures and forms. Type is a matter of personal preference. Stick to a small variety at first so that you can learn to recognize the differences. Here’s a good exercise: choose one font and experiment with different weight and size combinations in that family.

Grid-Based Design

Cuidad de las Artes y las Ciencias in Valencia, Spain

Typographic grids, like architectural blueprints, lay a solid foundation, which is necessary in the initial stages of design. Rigidity in structure has defined grid-based design throughout its existence, and movement occurs when a viewer is led along a particular path through a composition. Fluid Web content has changed this by introducing the element of adaptability, which makes a static medium responsive to a rapidly changing environment. Basic print and Web structures exist on the same planes: the x and y axes. Columns and gutters lie perpendicular to the baseline grid and can be measured and organized the same way. When combining the two, pay attention to the details that make each unique, such as the CSS that enables fluid content and the solid structure that print media has perfected over time.

Divine Proportions

The Fibonacci Sequence is a naturally occurring phenomenon that has intrigued man for centuries.

The Golden Ratio, which is based on the Fibonacci Sequence, underlies international paper sizes (the “A� series: A1, A2, A3, A4, etc.). Unlike American paper sizes, international sizes are uniform in symmetry and (metric) measurement. Paper size doesn’t necessarily bear on Web design, but proportion does. Graphic design is visual organization, and the beauty is in the details.

“The end result is the sum of all the details.�

– M. Vignelli

Making These Principles Work On The Web

Sketching on paper can be a refreshing and inspiring break from the screen.

Responsive Type

By using relative units as the focus of a design’s typographic structure, every word on the page can react as one to the display size. Readability issues are thus resolved in the early stages of programming, and adaptive functionality is added, creating unity.

Fluid Content

Applying the principle of responsive type to every element of a Web page makes the content capable of adapting to a variety of issues that might otherwise compromise compatibility and readability. Proportional units of measurement free a Web page from static size and can be used to design content for mobile browsers—one of the major areas guiding the direction of Web design right now. Using proportional units of measurement in CSS makes content fluid and ties in the math and proportions that have allowed traditional typography to become a means of expression and an art form (instead of mere rules to dictate what cannot be done).

Media Queries

Screens come in a thousand different sizes and resolutions. What I like about the CSS3 media query feature is the option to design for different media. With the specifications in place, you can add advanced variables in response to different types of output, not just a screen: projectors, printers and mobile phones are just the beginning. And conditional CSS declarations allow for progressive design.

Example

I developed this print format (one of many) for the mass reproduction of a singular style.

Here is an example of a print media style sheet. The format can be adapted for Web development if you know a few basic elements of CSS. In the type treatment, the heading is set to 72 points and the body to 12 points. This means that the heading is six times the size of the body text. By using ems as the relative unit of measurement in your CSS declarations, you can maintain every text size setting as a pre-formatted style:

body { font: normal 100% Georgia, Garamond, serif; }

h1   { font-family: Helvetica, sans-serif;
       font-size: 6em; }

This same principle will keep elements on the page fluid. Set CSS declarations for page ids that tell the HTML to act this way (do this for ids, not classes, because ids occur once per page, while classes can occur more than once):

#page { margin: 40px auto;
        padding: 0 1em;
        max-width: 60em; }

That’s what CSS does: it defines the way you want the HTML to act. Set ems again as the unit of measurement to make it behave uniformly. How did I know which em values to use? It’s in the math and percentages.

First, convert the body-text setting (12 points) to 16 pixels. Then, because everything is based on that setting, you can use it to convert the margins and font sizes to conform to your grid.

Further Resources

These are available as PDF downloads:

• Choosing Typefaces
  Literature from Susan G. Miller on the core elements of typography.
• Liquid Layouts
  A CSS tutorial for adaptive layouts.
• The Vignelli Canon
  The monograph of M. Vignelli, one of the founders of modern graphic design.
• Perfect Your Kerning Skills
  A tutorial on kerning and how to use it effectively.

Common Terms of Design

• Movement
  The visual flow that directs a viewer’s eye through a design.
• Proportion
  The relationship in scale between elements and their size, shape and quantity.
• Emphasis
  The varying degrees of dominance in a design, usually defined by weight, space and perspective.
• Unity
  The quality that makes a design complete; the degree to which the parts of a whole come together and resist falling apart.

(al)