Bad presentations are painful—for both the presenter dying a slow death in front of a crowd and the bored audience members who have to sit through it. If your task is to create or deliver presentations that don't suck, here are five common presentation pitfalls to avoid and tips on making presentations that can instead inspire and inform. More »
If you’re a designer, especially for the web, a color picker or color sampling tool is almost certainly part of your arsenal. But did you know that OS X actually already includes one?
DigitalColor Meter is a tool that lets you sample colors on your screen to get their color values that you can then copy and paste for use elsewhere.
In this TechUniversity DigitalColor Meter screencast (subscription required), I’ll show you the in’s and out’s of the app and how you can use it in your design workflow.
View full DigitalColor Meter screencast on TechUniversity (subscription required)
Wandering around Home Depot until inspiration strikes is a terrible idea. If you’ve got a loose idea for a redesign, re-arrangement, or physical improvement to your house, apartment, or even a dorm room, we recommend these computer planning tools for the job. More »
The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but what if you just want to design a site or form that looks like a native iPhone App?
This is where iWebKit comes in. iWebKit is a free framework package for creating websites and applications that are optimized for the iPod Touch, iPhone & iPad. The bulk of the framework is CSS3 which can work its magic to makeover any dreadful site and make it look fresh.
I will be covering the web-form aspect of creating an optimized site, but iWebKit has many deeper features that can communicate directly with the OS. Its documentation is excellent, so dig around or check out the demo site on your iPhone to get inspiration.
When designing for the iPhone OS, you should use the iPhone simulator available in the SDK to get an idea of where your design is heading. You can also use Safari to get a pretty close representation, but nothing beats using a real physical device. It’s amazing how cool it feels and you really do get the impression it’s a native application.
Here is what the form looks like on the iPhone before we optimize it.
It’s pretty dull looking, to say the least. Below is the original HTML code being used. We’re going to get Apple-blood running through it and give it a makeover.
<html><head><title>Test Form</title></head>
<body>
<form method="post">
Name: <input type="text" size="12" maxlength="12" name="name">
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>
This code needs to be in an HTML file in the same folder as the iWebKit framework. I called it index.html.
The first step is to add these lines between the <head> tags.
<meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /> <link href="css/style.css" type="text/css" /> <script src="javascript/functions.js" type="text/javascript"></script> <link rel="apple-touch-icon" href="homescreen.png"/> <link href="startup.png" rel="apple-touch-startup-image" />
These lines tell the iPhone browser that this page is designed for it. It also references the CSS, JavaScript and images for the iPhone Home Screen and a startup image.
To create the top title bar we need to enter the following code immediately after the <body> tag.
<div id="topbar"> <div id="title">Test Form</div> </div>
If you load up the page in your iPhone simulator browser you will see this bar at the top.
Now we need to start our main content with the following <div> tag.
<div id="content">
All the form fields will be inside of this <div> and we won’t close it till the end of the form. The first form fields we want are the Name and Password fields.
Replace the original code:
Name:<input type="text" size="12" maxlength="12" name="name"><br /> Password:<input type="password" size="12" maxlength="36" name="passw"><br />
With this:
<ul class="pageitem"> <li class="bigfield"><input placeholder="Name" name="name" type="text" /></li> <li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li> </ul>
Our Name and Password fields have now been transformed.
The <ul> container represents the white box while the <li> tag is to signify separate sections inside of the white box. You could also put each of these fields in their own <ul> containers and they would look like two separate boxes. To save screen space, I group similar items together. Now lets replace those old fashioned radio buttons from the Gender question.
Replace this:
Gender:<br /> Male:<input type="radio" value="Male" name="gender"><br /> Female:<input type="radio" value="Female" name="gender"><br />
With this:
<span class="graytitle">Gender</span>
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Male</span>
<input name="gender" type="radio" value="M" />
</li>
<li class="radiobutton">
<span class="name">Female</span>
<input name="gender" type="radio" value="F" />
</li>
</ul>
The radio buttons are changed for the better.
Next up are the checkboxes under the Favorite Food question.
Replace this:
Favorite Food:<br /> Steak:<input type="checkbox" value="Steak" name="food[]"><br /> Pizza:<input type="checkbox" value="Pizza" name="food[]"><br /> Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
With this:
<span class="graytitle">Favorite Foods</span>
<ul class="pageitem">
<li class="checkbox">
<span class="name">Steak</span>
<input name="steak" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Pizza</span>
<input name="pizza" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Chicken</span>
<input name="chicken" type="checkbox" />
</li>
</ul>
Now instead of check boxes, we get those pretty on/off sliders we’re accustomed to inside the iPhone OS.
The textbox is pretty simple since it just creates a nice white box around the textbox.
Replace:
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
With this:
<ul class="pageitem">
<li class="textbox">
<textarea name="quote" rows="5">Enter your favorite quote!</textarea>
</li>
</ul>
Lets move on to the dropdown menus. Dropdowns always use the iPhone’s built-in method and help create the feeling of a native app.
Replace this:
Select a Level of Education:<br /> <select name="education"> <option value="Jr.High">Jr.High</option> <option value="HighSchool">HighSchool</option> <option value="College">College</option> </select><br />
With this:
<span class="graytitle">Level of Education</span>
<ul class="pageitem">
<li class="select">
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select>
<span class="arrow"></span>
</li>
</ul>
Notice the arrow span class adds the down arrow to the right of the selection box.
As far as the form goes, all that’s left is the Submit button and to close the <div> tag.
Replace this:
<input name="Submit" type="submit" value="Submit" />
With this:
<ul class="pageitem">
<li class="button">
<input name="Submit" type="submit" value="Submit" />
</li>
</ul>
Now close the content <div> tag with the following:
</div>
Finally, we may want to put a footer at the bottom of our page. It’s nice to also support the iWebKit folks.
<div id="footer"> <a href="http://iwebkit.net">Powered by iWebKit</a> </div>
That’s it for the HTML portion. Two nice little touches you can do are for when someone adds the page to their home screen. When browsing the page, click the “+” button and select the Add to Home Screen option. You will see an icon that, by default, is a screenshot of the page. You can customize this by making your own 58×58 pixel image and referring to it in the <head> section. Mine is named homescreen.png and I’ve already included the code at the beginning of the article.
Now when this page is added to the Home Screen, it will look and feel like a native app. Why not have a startup screen displayed while the page loads? iWebKit also has this feature and you simply need a 320×460 pixel image that again, is referenced in the <head> section. I have called mine startup.png.
That’s it, we’re done! iWebKit has many other features that you should check out. You may get some inspiration for an app or at least look good to your boss when you pretty up that old form that’s been around for years. All the files used in this article are also attached for your viewing pleasure along with a short video walkthrough of this tutorial.
Project Files: iwebkit-tutorial-files.zip (94 KB, ZIP)
Whether you’re putting together a portfolio web site or just slapping together some slides, knowing how colors affect the minds of your audience makes your message more appealing. Smashing magazine offers a post that serves as Color Psychology 101 for would-be designers.
Beyond explaining which colors work as “warm” and “cool,” how primaries play off secondary colors, and offering lots of keen examples of every kind of color design, Smashing’s post offers some clues on how colors are perceived when images are translated to mental impressions. Here’s a little primer on orange that caught me unawares:
Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
Hit the link for a deeper read. While you’ve got your monocle and draft paper out, tell us what color schemes you like, and which have never appealed to you, in the comments.
There are a lot of nice bookcases out there, but many of them don’t fit your exact walls, and most can’t be installed in an apartment. That can be worked around in crafty style with plumbing pipes and some weekend time.
Using actual plumbing pipes and wood boards of their choice, a couple with really high walls but not a lot of leeway for in-unit construction built a perfect set of shelves for their stuff. Using a previous Apartment Therapy how-to, Elizabeth and Mike, with the help of handy friend Roger, bought and designed custom shelves for a price that’s not all that shocking:
In order to keep costs down, Roger designed a unit using standard measurements, so that no pipe or pine boards would need custom cuts. They found everything they needed at Home Depot for $250 (including all basic supplies, like tarps, tools, and brushes). The black matte finish of the pipes wasn’t exactly what they had envisioned, but they loved the result.
Hit the link for a full photo walkthrough. What have you used to make your own shelves in your own apartment or home before? Tell us—or, better yet, show us—in the comments.
Some bedrooms catch a lot of sleep-disturbing light at night, but many sleepers like to wake up with a bit of natural light. Meet the morning halfway with a hotel-style setup of curtains over sheers, as suggested by Apartment Therapy.
The home and design blog isn’t talking about the magnetic-latched, absolute blackout curtains you’ll find at some motels with too much light. Instead, find a pair of heavy drapes that match your decor, and run them over some gauzy, privacy-providing sheers you can pick up fairly cheap at your local general merchandise store. As Apartment Therapy suggests, this setup blocks the majority of street lights, passing headlights, and other sleep-disturbing lights at night, but gradually lets in an adjustable amount of light each morning to help you wake up.
You could also combine this treatment with another measure, like the DIY window frosting Jason showed us. If you’ve found the beautiful mid-point between sound sleep and natural light mornings, tell us your own solution in the comments.
Ubuntu isn’t the only Linux operating system, but it’s where the dream of a usable, completely free desktop is closest to reality. If every Ubuntu developer were assembled at one place, here are five things we’d ask them to accomplish.
Image by Andrew Mason.
Ubuntu’s not a single service or application developed by one team, so our wish list is a bit broader than just asking for five new features or improvements. Ubuntu is an open-source distribution of Linux, developed and fixed by thousands of developers around the world. It incorporates the efforts of many of the projects it relies on, like the GNOME desktop, open-source drivers, apps like Firefox and Pidgin, and many more.
But let’s pretend there happened to be a worldwide summit on how Linux could become a viable, convenient desktop for more people, and let’s pretend I had a panel approved at said summit at which I could present to all the interested parties. I wouldn’t argue about hardware compatibility, or pretend that high-end games are an ultimate issue. I’d confess that I’m biased toward thinking about Apple computers more than Windows, because Apple has gained ground with a surprisingly similar product, and because some corporate, locked-down environments will never switch from Windows.
Then I’d ask for these five things:
One of Linux's most touted advantages over Windows and Mac systems is that, on distributed systems like Ubuntu, you can install thousands of applications right from your system, without having to Google, download, double-click, and Next, Next, Next through installation screens. That advantage is lost if you put all your applications in a big pile of searchable stuff labeled "Graphics" or "Sound & Video"—or, even worse, ask users to copy-paste repository sources and installation commands into text files and terminals. Those are great backup and uber-geek solutions, but terribly off-putting to those just trying to get a system up and working.
New users are coming to Linux looking for their Windows or Mac equivalents—Photoshop, iTunes, Winamp, AIM—and they're wondering what other users like them recommend in very particular areas. They're in a position similar to that of a new iPhone owner when it comes to software. Only certain applications will work on this very particular software setup, and they must be sought out. Apple's iPhone App Store is an utter mess when it comes to organization, search, and layout, but even its simple Top 10 Paid and Top 10 Free are more guidance than what Ubuntu users are being offered. The default, installed Ubuntu applications are okay, maybe a little esoteric in spots, but Ubuntu's builders and coders shouldn't be the taste makers.
Create a clean, tagged, search-friendly database of everything that runs on a standard Ubuntu desktop. Offer wiki-style, group-edited write-ups, reviews, and (maybe) ratings of what the applications do and what non-Linux apps they are similar to, and put it all on the freely accessible web. This kind of thing is already possible with Ubuntu's apt-url handler—all that's missing is the common URL.
Show up fresh-faced at an Apple Store and ask how your copy of WordPerfect would run on a Mac, and a T-shirted Genius will gradually guide you into Parallels or VMWare Fusion, or possibly suggest using Boot Camp to occasionally run Windows when needed. Ubuntu isn’t really any different. If Ubuntu wants to reach beyond the technical-minded, it should eliminate the need to learn about partition tables to fit a Windows installation next to Linux.
Create something less imposing and more visually appealing than the default GRUB menu. Keep improving on the Ubuntu installer to better explain what one’s multi-system installation options are. Do your best to make something like installing and running VirtualBox easy for a beginner, or break apart its open-source guts and integrate it so tightly into Ubuntu that an “Open in Windows 7″ right-click command isn’t some laughable dream.
The achievements of a network of left-brain-oriented, technical-minded developers in creating a Unix-based system that installs on just about anything with a processor can never be truly appreciated. Apple created a Unix-based OS that installs on a smaller subset of computer hardware, but has a history and tradition of investing a whole lot of right-brain thought into making technically advanced features look clean and simple. Projects like Mac4LIn are mimicry at its finest, and interfaces like GNOME-Do Docky theme bring both Quicksilver and Dock functionality to Linux. What Linux and Ubuntu really need now, though, is something new.
Palm's Pre smartphone received generally rave reviews for its "deck of cards" interface, which was actually new and not hard to get used to. While it doesn't seem to be winning a sales war against the iPhone, Ubuntu has a distinct advantage—it's free. Something free and designed to look kinda-sorta like XP out of the box once did won't win hearts and minds. Something with a useful but new look, with advantages in speed, openness, and hardware support, will get notice. To paraphrase what Mac guy John Gruber said about the Android opportunity—set your goals such that you can claim victory with just a fraction of Windows and Apple's installation base.
When the Linux-based Chrome OS drops, one thing we know it’s going to try for is starting up in “a few seconds.” Ubuntu’s next release, meanwhile, is aiming for 10 seconds. Unless they’re both pitched primarily for mayflies, that’s not an insurmountable difference, but Chrome OS will also offer no-worry backup of all of a user’s documents, emails, SMS messages, and whatever other webapps, because it all gets done through a web browser, or, more likely, a browser running inside a stand-alone application shell.
There are a significant number of folks who aren’t cool with having everything they do in the cloud, and might want hard copies of everything. More likely, it’s probably wise not to use Google as the linchpin of one’s entire productive life, because account lock-outs and password hacks do happen. Backup, however, is one of those things that’s more powerful when there’s a copy far away from your system. Ubuntu already has Ubuntu One, but right now it’s a less convenient Dropbox look-alike, because it’s accessible only through Ubuntu or the web. It’s open source, so Windows and Mac synchronization tools may eventually show up, designed by committee. But if a backup service is getting accolades from true geeks for being paradigm-shifting and mind-freeing, you’d do well to learn its lessons, or potentially open talks in the interest of open-sourcing it.
This one’s a bit more fiddly, but definitely worth mentioning. Trying to edit a video so that continuous sound played over different clips, two Lifehacker editors found themselves amazed at how difficult, or at least hard to find out, iMovie ’09 had made such a task on a Mac. On Windows, there’s the free Windows Movie Maker, which has actually lost features since the XP version, and then professional packages starting at $450 dollars. In Linux, there are a range of options, almost none of them with a finished feel, and all of them front-loaded with codec, dependency, and interface headaches galore. OpenShot seems like a step in the right direction. While Ubuntu isn’t in the video software business, the many folks who contribute time, thought, and sometimes money to the project could consider this a serious missing link in the Linux application space.
A while back we asked whether cursive handwriting is dead. More recently, the New York Times chimed in by saying that, at a minimum, cursive writing is in “a woeful state” and has offered some potential ways to improve it.
Authors Inga Dubay and Barbara Getty argue for the return of italics as “an emergency first step to improve American handwriting” and suggest that we think of cursive in a new way. (Specifically, it “does not necessarily mean continuously joined or looped letters.”) The writers then go on to offer an alternative hold as a way to enhance otherwise illegible handwriting.
Try an alternative hold by placing the pen or pencil between your forefinger and middle finger, with those fingertips and thumb resting near the pencil tip. This can help alleviate an aching forearm as well as wrist or thumb pain.
Browse the full post for some sample exercises if you’d like to improve your script. If you’re completely over that whole by-hand writing craze, you can get the handwritten feel by turning your handwriting into a personalized font with previously mentioned YourFonts.
Chalkboard paint is a childhood-recapturing tool and a great way to repurpose cruddy furniture. Finding it, and finding it in non-black colors, can be a challenge, so two different sites write up recipes for mixing your own.
Photo by Francis Bourgouin.
The Craft at Home blog has a recipe that makes any acrylic paint of your preference chalk-friendly, though darker colors are still more effective as an actual writing surface. That recipe requires powdered tile grout and glazing medium, which you can usually find at your local hardware store.
If the glazing medium is hard to get at, or you just want fewer steps, Martha Stewart's site explains how to make DIY chalkboard paint with just the tile grout. What's more, her site offers some seriously inspiring ideas on how to implement chalkboard paint in all sorts of spots around your home—we're staring somewhat jealously at the calendar-like pattern shown here.
Tell us how you’d implement custom-colored chalkboard paint, or show us pictures of how you already have, in the comments.