Picture this: You're a designer at Fancy Design Firm, charged with
building out a design that another group will implement. You might never meet this group, you don't know how adept
they are with buildout, and you're not entirely sure what they'll want to do
with your CSS/HTML.
Even worse, maybe you're only delivering a sliver of the site, just one or two pages, and this team will need to finish out the other
90% of the markup. You'll be credited with the buildout or blamed for
it, but the final results are out of your hands. What do you do?
Or, imagine that you're a client who's hired Fancy Design Firm to
design the site, and you want your Stressed-Out Internal Team to
develop it. You need to make sure that S.O.I.T. can correctly implement the
stuff you get from F.D.F., and you even want them to expand on it,
stretching the design into a full site with new styles.
The trouble? You don't know how F.D.F. codes or what to expect from them.
Whatever you get from them will be final - you can't go running back
every day until launch and asking them for stylesheet tweaks. You're
not a CSS/HTML expert, so you're not sure you'll be able to tell what's good or not. What
do you do?
A Bad Place To Be
Both parties are in a spot here: Designers are hoping their work
doesn't get mangled, and clients are hoping their deliverable isn't
crappy and inflexible, but neither party has a sure-fire way to get what
they want.
I've been delivering buildout a lot recently, so I've been reflecting on what works best in this situation. In the interest of helping designers and clients agree on deliverables, I've written this little reference list. This is by no means a "client
bill of rights," simply a set of topics clients and designers should discuss when expecting a CSS/HTML deliverable.
What To Expect from CSS/HTML/JS Deliverables
Reusability - Styles should be named and implemented with re-use in mind. Simple utility classes like "right", "left," "intro,"
and "hide" let clients quickly achieve design effects, and more specific classes like "feature-set" can be reused sitewide and modified to client needs. In contrast, "fall-2009-promos" is a dead class: a set of styles that the client will need to basically rewrite in order to copy.
Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.
Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).
However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...
WHAT THE CLIENT WANTED
Recently, a client who was using the Brightcove video hosting
platform to house their comprehensive video library came to us with concerns. They were not completely satisfied with how the players looked and they wanted more functionality than what they were getting out of the existing player components.
The first and main concern was that the components (like tabbed views of custom lists of videos) were not making their videos visible enough. The second concern was that the look of the players weren't customizable enough and the client felt like they weren't getting the visual integration they needed with the rest of their site.
USER INTERFACE
The player we created consists of two views. In the first view, we needed to take into account the large number of videos, so the goal of the design addressed choice and selection. On the main video dashboard page, the user can see a truncated selection of videos in the "Featured…
A design exercise that has been making the rounds lately, one I can't get enough of and have to share with anyone who'll listen, is the re-imagining of modern video games, movies, albums, and so on as worn out, classic book and album covers. It takes a product completely out of its element and reinterprets what makes it memorable in the first place. The result being that oftentimes these "remixes" are more elegant and precise solutions than their original designs. They're also just plain fun. The craze seems to have started earlier this year with Olly Moss's series of video games as book covers inspired by Penguin Classics covers and Saul Bass illustration. Just to show a couple:
From there the idea spread to other designers, mostly through
Flickr, and took on a life of its own. Soon more Penguin Classics versions of modern media popped up. The best of them all take a
familiar piece of pop culture and embody it in the simplest, most
memorable illustration possible. The classic, simple imagery of 60s and
70s book covers like Penguin's gives designers free reign to get
abstract in their interpretations. The results not only present the
content in a completely fresh way, but many of them are very clever and
funny. One of my favorite examples is Mitch Ansara's I Can Read Movies series,
covers for fake novelizations of famous movies. The covers are simple
and graphic with iconic imagery, and often perfectly encapsulate the
movie. Here are a couple typical examples:
M.S. Corley's redesigns for the Harry Potter series are another perfect example of making a cover that's both abstracted but instantly recognizable for Potter fans:
It's also fun to see how this anachronistic approach has evolved
in the past few months. Designs based on classic album sleeves, rather than book covers, are becoming the latest trend. Most recently Logan Walters took rap album
covers and redesigned them in the style Blue Note Records jazz covers:
After much debating about purchasing the recent MacHeist 3 Bundle I broke down in the last 30 minutes of the promotion to order the bundle of software advertised as 14 Mac apps worth around $500 for $49. To be honest I didn't know much about MacHeist or many of the apps they were promoting but the thought of trying out Espresso among the mix of apps appealed greatly. To my delight, it wasn't Espresso that captivated me. Instead, an unassuming screen capturing utility called LittleSnapper caused me to forget the other 13 applications in the set.
There's also been a fair amount of buzz about Skitch lately. The combo of the two got me thinking about what else might be out there for capturing, editing, saving and sharing images. At the urging of Peyton Crump, our fearless Design Director from our Durham, NC office, I took to task comparing the two apps. Soon enough, I realized a comparison among a wider breadth of apps might be useful. Thus, this post was born, a comparison of six screen capturing utilities. From a bare minimum of features to some truly groundbreaking ones, these tools are listed by order of complexity (features not ease of use): Screengrab!, Paparazzi!, Web Snapper, Skitch, LittleSnapper, and Evernote
Please note this less of a comprehensive review of the products than it is a glance at some useful aspects of each.
I often revert to the simple keyboard shortcut shift+command+control+4 to activate the crosshairs built right into the Mac OS to copy screen selections directly to the clipboard. This is fine until I need a full screen capture of a web page without having to splice it together in Photoshop. That's where Screengrab! comes in. Its really nothing more that a screen grabbing utility for web pages but its power is in its ability to offer multiple ways to capture snaps including a full screen option. To my knowledge it is only available as a Firefox add-on.
Editing/Notation: no
Public Sharing: no
Personalization/Cataloging: no
Full Web Page Snaps: yes
iSight Integration: no
Companion iPhone App: no
Browser Plugin Available: Screengrab! is a Firefox Add-on
Which is more important, driving traffic to your website or encouraging as many people as possible to see your content? Believe it or not, they are not one and the same.Too often, we as website owners live and die by web analytics applications. We fret about bounce rates, unique visitors and dwell time. However, when we focus so heavily on the performance of our website, we miss a fundamental point: we should aim to expose users to our content, not our website. The website is a tool to showcase our content, but it is not the only tool that does this.
Organizations with truly successful websites understand this principle. Take, for example, the following: Amazon’s primary objective is to sell stuff. YouTube aims to use video content to carry advertisements. Twitter facilitates “tweeting.” (Who knows what its business model is!).
In each case, the content matters, not the website. That is why each company provides numerous ways to access its content beyond the website. From Amazon’s affiliate scheme to YouTube’s embed feature, these companies can reach audiences that may never visit their websites.
Twitter is probably the best example of all. How often do you actually read or post tweets via the Twitter website? If you are like me, the answer is very rarely.
The majority of users do not read tweets via the Twitter website.
The lesson here is obvious: as website owners, we need a broader Web strategy to release our content from the shackles of our websites. How do we do this? Below are 10 opportunities that you can integrate into your online strategy.
While the points mentioned below will refine your strategy to deliver content to more people, they can not serve their purpose without an appropriate environment. In the age of social media and the rise of interactive web-applications such as Facebook, Twitter etc. building a community around your website is the most important way to drive traffic and keep the users coming back.
Using forums, polls, comments and engaging users in the global conversations via external services turns out to be a silver bullet for gaining more exposure and winning more loyal visitors. Once you are building a community around your site, it’s time to think about more refined strategy that will help you to put your content in front of more people – and…
Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.
In this selection we’re glad to present you Junction, Nadia Serif, Nilland, CartoGothic Std, Bergamo Std, Comic Serif, Birra Stout, Vegur and a couple of other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.
You can find over 80 more free fonts in our section Fonts.
15 Fresh High-Quality Free Fonts
Junction [ Download the .zip-package ] Designed by Caroline Hadilaksono, Junction is a humanist sans-serif typeface. It has elegant, clearn and very sharp glyphs, but contains only 100 most common symbols. Like Gentium it perfectly fits to body copy, but can also show its strengths, balance and beauty in headlines. Here are some insights from the designer:
“Inspired by my favorite humanist sans serif typefaces, such as Meta, Myriad, and Scala, Junction is where the best qualities of serif and sans serif typefaces come together. It has the hand drawn and human qualities of a serif, and still retains the clarity and efficiencies of a sans serif typeface. It combines the best of both worlds.” Available as OpenType. Released by The League of Moveable Type, an open-source type movement.
Nadia Serif [ Download Mac (Postscript) | Download PC (TrueType) ] This serif typeface is available for free download; the only requirement for using it is to send a PDF or any other copy of the work using this typefaces to its designers.
Nilland A beautiful slab-serif typeface, designed by Manfred Klein. The family consists of 6 weights, regular, bold, extra bold, black, small caps and small caps bold (link and images via DerSven.de).
CartoGothic Std A legible sans-serif typeface, in the opentype format; 4 weights are…
Many have us have spoken to people who will soon be entering careers in web design related fields this year, and this led us to have discussions with each other about what we thought was important for those people to know. Each of us had different advice to share based on each of our own unique perspectives, so we thought it would be helpful to put it into a blog post. Some of the questions we wanted to respond to were:
What trends have you noticed in the past year?
What advice do you have for people entering the field?
What are some resources to help people get started?
Many of the students I’ve taught and worked with want to hit this field’s ground running, but tend to be confused and overwhelmed by all of the various titles, processes and disciplines involved in working on the web these days. If you’re feeling this way, remember that you don’t have to pick a definitive career path or niche in the web just yet (if ever)! Instead learn about and try all of these disciplines as your work allows. You can always dive deeper into those that really strike a chord. Until then, don’t sweat those fancy terms or titles too much. And here’s a secret, some of the strongest web professionals are “generalists” instead of “specialists” in a particular area.
Advice: Work Smarter
Find ways to automate repetitive tasks for yourself – its usually an enjoyable problem to solve for yourself and will reward you with more efficiency. Finding and tweaking a series of applications and services that help you achieve is crucial. Some of my favorite set-ups include:
LittleSnapper + Dropbox + A Dedicated Flickr Account = A quick and great way to organize (with tags) design inspiration across multiple computers and to share online.
Delicious Subscriptions RSS + Delicious Network RSS + Flickr Design Inspiration Sets and Groups + select blog/site RSS Feeds all in Google Reader or Feedstitch = A good, portable start to having your ear to the ground on what’s happening around you (for extra points, you could add Twitter to…
We love desktop wallpapers. And we love beautiful ones most. And although we monthly publish desktop wallpapers of our readers (desktop wallpaper calendar feature), we thought that it would be nice to provide our contributors with some fresh inspiration and our readers with some nice wallpaper update for a lousy Monday.
The wallpapers for this post were selected over a long period of time; they cover mainly nature, abstract and digital art (further collections will be coming if you are interested). We’ve tried to pick only the most beautiful ones and hopefully you won’t be disappointed.
Below we present a showcase of over 50 fantastic wallpapers that will blow your desktop away. Most of them are in HD and will make your desktop look as nifty as it is possible. Because the resolutions are so high, if one doesn’t fit your screen, use your favorite image editor to refine its dimensions.
You may also be interested in the following related posts:
Today we are glad to release “Toys”, a retro icon set that was designed by Helen Gkizi and released with Smashing Magazine for its readers. The set contains 9 “toys” icons (png, 128×128px) that may come in handy in a variety of settings – e.g. in projects related to children and family.
The files are transparent PNGs, and the source file (.eps) is included as well. As always, the set is completely free and may be used for any private or commercial project without any restrictions whatsoever.
We express sincere gratitude to Helen for her great work. Please let us know in the comments if this release meets your expectations. And if not, please let us know what we could improve in the upcoming releases!
Related posts
Please take a look at other high-quality freebies as well:
Instead of getting into the heads of successful designers, we should be getting into the head of the audience we’re designing for. There are many ways this can be done, one of which is music. Relying on senses other than your vision can evoke a greater comprehension for what feeling must be conveyed through a design.
In my early years as a student, I had a difficult time adjusting to the thought process of a designer. I’m a hands-on learner, and developing design ideas is more of an abstract art. Being able to recognize a good design versus a bad design was never the problem, but creating unique designs was for me much like an artist trying to draw purely from memory that doesn’t have that capacity. For a couple of years I treated design as purely an art, simply because I lacked guidance in this area and didn’t know any better, hitting the ground running with a project without methodically seeking out inspiration appropriate for the task at hand.
That system didn’t prove to work well in many instances, and my failure caused me to question my skills as a designer. Instead of giving up, I fought to find my own way through the thick fog that clouded my vision of what was truly standing in my way: a lack of a methodical design process. As soon as I had realized where I went wrong, I dug right in to finding out how to do it right.
After finding a process that worked for me, I started finding inspiration in ways that I never would have thought to turn to. I quickly got sick of thumbing through the CSS galleries and the like and started trying to look at the world in a different light. One of the most inspirational things for many people is music, designers especially. Elliot Jay Stocks has even released an EP. That’s all good and well, but how can music specifically bring design inspiration?
Outside the [Music] Box
Music and art seemingly go hand-in-hand. Many different forms of art, design, or creation use music to enhance the experience. Here are just three examples:
Movies use a soundtrack to enhance the visual experience and the content of the script, to create or develop the mood.
The Web has grown into a real jungle, and finding cool new sites nowadays isn't always the easiest thing in the world. If you have a Website yourself, you're dealing with the other end of this issue. How do you get noticed online, and is there anything you can do to increase your popularity?
There certainly is! Here are the top five ways you can strengthen your site and increase your online visibility.
1. Strong Hosting
This first point is mostly important for those who don’t have their own Website yet but eagerly want to create one. After you have selected your domain name, the next step is to choose a hosting plan. There are many good, affordable alternatives, but what professionals usually recommend is specialized blog hosting. This form of Web hosting allows you to set up a professional-looking Website in no time at all. Why is this important to mention when it comes to making your site more popular? Well, without strong hosting, you won’t be able to handle a traffic to your new Website, which means you’ll have no chance at all of becoming well liked.
Of course, finding strong hosting is often easier said than done. The hosting industry has grown very popular in recent years, and this has lead to large numbers of companies offering various hosting services. But don’t be fooled by their tricky ways of making it sound as if they are the best in the industry. We would recommend you partner up with a company that has a strong reputation and experience in the business. You might start at Web Hosting Search for reviews and other information to help you find the right fit.
When it comes to hosting, you should compare the different features included with the plan. Make sure you are guaranteed at least 99.9% uptime and that customer support is easy to get hold of. You never know when you could need them. Likewise, it is also good to know exactly what kind of numbers in terms of disc space and bandwidth will you be allowed to use and manage. Some providers also forbid their clients to upload music or video files to their servers even if it is for personal use. It's important to ask customer support to resolve such issues before purchasing a plan. Some other things you might consider asking are whether your domain name…
It's easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it's enough to make you want forego punctuation altogether.
Well, back when it was alive and kicking, the Latin language did just that — and it didn't stop there. Written Latin also omitted spaces between words or lowercase letters.
It sounds kinda nice, doesn't it? No more worrying about whether that comma is in the right place, and on the flip side, no more embarrassing urge to whip out a red pen and correct restaurant menus. What's not to love?
A lot, it turns out. The result of all this grammatical simplification looked a little something like this:
You don't need to be discipulae lingua Latina to understand how nightmarish that sentence is. Now let's see how it looks when we apply our modern grammatical conventions:
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
Behold the power of punctuation! Interword spacing, commas, and a period have helpfully transformed a terrifying sentence-monster into five easy-to-digest compartments.
Like it or not, punctuation is necessary. So what to do about all those hard-to-remember rules? Well, the trick is to make the same allowances for punctuation that we do for people. We all blatantly contradict ourselves in one way or another. It's these little exceptions to the rules we set for ourselves that make us that much more interesting and unique. Punctuation is no different. Rather than getting frustrated by all the exceptions to the rules, try embracing "punctuationality" — the personality of punctuation.
Naturally, a comprehensive guide to all the available punctuation in the English language is a bit beyond the scope of a single article, so instead I'll concentrate on the stylistic uses of a few commonly used marks over the course of two articles.
Ellipsis
I like to think of ellipses as industrious workers who don't particularly enjoy what they do for a living, but take pride in doing a good job. But when they get home, they like to unwind Michael Phelps style — and I'm not talking about swimming laps.
Most ellipses find work in the scripts for cheesy daytime soap…
If you're looking to collect information from your users, there isn't a much easier or more straightforward method than a Web form. If designed well, Web forms provide valuable information; if not, they may scare users away. With this in mind, here are a few key tenets of Web form design that every designer should know.
Let's face it: No one likes spending a long time filling out a form. Keep it short and simple and eliminate elements that aren't absolutely necessary or that don't offer a tangible benefit. Make sure every part of your form is pulling its weight, and your users will thank you.
The structure of your form should serve just as much of a functional purpose as its elements. When laying out your form, keep in mind that, at least in the Western world, people read from top to bottom and left to right. They also often use the Tab key to move around the form. Your design should reflect this through intuitive labeling and natural placement of elements. And, of course, your form should never look scattered or haphazard — make sure everything is evenly spaced and neatly arranged.
Here are a few standard form layouts that you should use as a starting point for more creative designs:
Left-Aligned Labels With Vertically Stacked Fields
This form features left-aligned labels with neatly ordered fields stacked on top of one another. This gives the eye an easy-to-follow path down the form, which is especially helpful if you're asking questions users may not be familiar with. Because they're able to read down the list of questions without the visual interruption of an input field, they'll be able to concentrate more on what you're asking. This layout does tend to make for longer form completion times because of the amount of time it takes for the eye to move from the label to the input field.
Right-Aligned Labels With Vertically Stacked Fields
Right-aligning your labels can help make them easier to distinguish and quicker to read, and also eliminates awkward spaces between labels and input fields. However, this can…
It's one of Thoreau's most enduring witticisms, and with good reason. When faced with the ever-increasing barrage of information that is modern life, many people find solace in minimalism. This trend has taken an especially strong hold on the Web.
Minimalism and simplification draw attention to important page elements. Using lots and lots of empty space makes content stand out. The overall effect is calming and sophisticated, a welcome break from the typical gauntlet of advertisements and traffic and television and whatever else screams incessantly for your attention.
For your inspiration, here are 25 beautiful minimalist designs. Some are charming, some powerful, some stunning, but they’re all linked by the same idea: simplicity, simplicity, simplicity.
Part two of last week's examination of the personality of punctuation. Click here to read Part 1.
Em Dash and Hyphen
Em dashes and hyphens are sisters, and whenever they go out together, they get stopped by strangers.
"Are you twins? You all look so much alike!"
At this, they roll their eyes. Sure, they look similar, but it's obvious — to them, at least — that they're each completely unique.
The em dash is the eldest. She’s taller than her sister, more graceful, and a bit more aloof. She needs her space — specifically, one space on either side. Some people misinterpret her attitude as snobby because of her near-encyclopedic knowledge of famous quotes. However, since em dashes are used to indicate attribution, ("The mass of men lead lives of quiet desperation." — Henry David Thoreau) she’ll demurely credit her knowledge to her job.
No, the real reason she's distant at times is that she's insecure about her place in punctuation society. She has two main jobs, one as a sort of watered down parenthesis (see the third paragraph in this section), and one as a sort of watered down semicolon (see the fourth paragraph in this section), and sometimes she wonders if she's even necessary at all.
The hyphen doesn't have this problem. She's the baby, and like most younger siblings, she's a total ham — and a total copycat. Whereas em dashes link a phrase to the rest of a sentence, hyphens link words to other words. Far more social than her aloof older sister, the hyphen doesn't mind being right next to the words she links, and sometimes within the word itself.
One of her favorite games is jumping around a phrase and seeing how she can change the meaning. Take "three month old puppies," for instance. The hyphen might jump between "month" and "old" — three month-old puppies — and then squeal over the idea of three puppies, each of them a month old. Then she might jump between "three" and "month" — three-month-old puppies — and squeal again over the idea of a number of puppies, all three months old.
Whenever the hyphen plays this game, the em dash just smiles and pats her head.
Commas
We're not done with the sibling metaphor yet. I want you to think back to middle…
