“Pictures in books, planetarium models, even telescopes are pretty misleading when it comes to judging just how big the universe is. Are we doing ourselves a disservice by ignoring all the emptiness? I thought I would see if a computer screen could help make a map of a solar system that’s a bit more accurate.” —Josh Worth
Last week, we stumbled across “If the Moon Were Only 1 Pixel: A tediously accurate scale model of the Solar System.” Also known as Josh Worth’s explanation of the universe, it was a project inspired by his five-year-old daughter. When he mentioned that he’d used Creative Cloud to design and build it, we jumped at the chance to hear more:
So, Josh, it’s the Solar System… How did you decide where to start? The sun, of course! Even though the moon was the main point of reference for the scale, the big bright thing in the middle seemed to be the best place to start. Solar system maps often seem to show the Sun at the left so I wanted to build off a conceptual model that most people are familiar with.
And, when you were designing it, did you imagine an audience, in addition to your daughter? My daughter actually turned out to be more the inspiration, rather than the intended audience. I wanted it to be for curious people in general—more casual and approachable than something you might encounter at a science center.
Which Creative Cloud apps did you use? And which features proved most useful? I used Dreamweaver and Illustrator and a little bit of Photoshop.
I based the initial calculation of the size of the map on a moon diameter of 1 pixel, which came out to a width of about 1.7 million pixels. I wasn’t even sure a browser could handle content that wide so I started by defining a single div using Dreamweaver and it seemed to work. I also tried it as a single .gif in Photoshop—which would have technically worked, since the black space compresses down to a relatively small file size—but that would’ve made it a little more difficult to make quick edits to the text. And it seemed like cheating.
I used Illustrator CC for the typography that appears at the beginning. I wanted it to scale, and look crisp in the browser so I exported it as a .svg. I had to experiment with various settings in the SVG dialog and try it in various browsers before I eventually settled on a purely outlined version with no embedded fonts, since variations in font rendering kept messing with my character alignments. I doubt anyone would’ve noticed, but I’m careful about such things (and a bit fearful that typophiles will laugh at me).
Once the vector graphics were created, the rest of the work was done in Dreamweaver CC. The CSS Designer tool came in very handy when I couldn’t remember how to define a particular attribute. Code-hinting and instant syntax checking were also invaluable for someone like me who often puts brackets and semicolons in the wrong places. What really surprised me was that I could compose the copy right in Dreamweaver. Usually I need some kind of stripped-down text editor for writing, but toggling between code view and live view allowed me to see the sentences floating on a single line out there in space. It allowed me to get into a nice zone where I could contemplate the subject matter.
Tell us about some of your design decisions: We like that you chose a less, well, “scholarly” approach for your copy; why did you choose that style? For starters, I’m in no way an expert on astronomy, so I wanted to avoid any pretext of authority. Scientists are in the business of standardization and objectivity, which is great when you’re communicating straight data but I was more concerned with the emotional impact of all the emptiness in space, which seemed to call for a more personal interpretation of the data. I thought people might better relate if the information was coming from just another puny human contemplating his place in the universe. Plus, the copy is more or less my usual writing style; I enjoy making light of heavy ideas and finding hidden depth in frivolous subjects.
How did you decide where to put the comments? The positive and negative space of the Solar System has an inherent emotional quality that I thought would be fun to try and match: I started off light where the territory is more familiar then used the bigger expanses of space for more expansive ideas; the thoughts got deeper as the distance became greater.
How did you decide on the color of space and the planets? I just went with the most obvious color associations, or at least the color that I felt was most indicative of each planet—Mars is red-orange, Neptune is blue-green and, of course, space is #000000.
Tell us about the design of the planet icons. I figured there needed to be some kind of shortcut in case the scrolling became unbearable. The astrological symbols seemed like a subtle way to incorporate that, since text links would have been too inviting. I found examples, through Wikipedia and a Google image search, to use as reference, then re-drew them in Illustrator to give them a uniform stroke width. I’m happy that the functionality is also decorative.
Why the distance counter? With just ruler ticks, movement (through space) wasn’t obvious enough and it got boring. I added the distance counter to help convey a sense of progress and motion; to make it work, I got some help from Kyle Murray (Krilnon), a member of the scripting forum on Kirupa.com. I eventually hope to make a mechanism that enables people to switch between different units of measurement
What’s been the response? Are people finding it useful? Will there be a v2.0? And, most importantly, how did your daughter respond to it? I just think the coolest thing about being alive today is that so many people are in the business of designing and sharing mind-blowing ideas and work. I was just happy I could find a way to be a part of that. According to Google Analytics, I’ve had over one million visits since Colin Devroe of Spacebits.co first posted a link on Hacker News on March 4.
I’ve gotten tons of thoughtful feedback from Twitter users and website visitors. Astronomers, physicists, UX developers, and general users have chimed in with some great suggestions. A number of science teachers showed it to their students, a lot of parents said they liked sharing it with their kids, and a museum in the Netherlands has asked to use it in an exhibit (a number of lovely people have volunteered to translate the text). Multi-language support will be the main feature of the next version, along with a few other ideas that people suggested.
As for my daughter… She seemed to get it, though she got pretty antsy between Jupiter and Saturn. I think kids are actually better than adults at handling big ideas. For them, it’s all imagination anyway, and their brains are still elastic, so it’s fun to see just how far they can stretch them.
What’s your favorite bit of it? Prior to building the site I hadn’t spent much time thinking about the emptiness inside of atoms in the midst of the Solar System.
And, because we always want to know… How do you like working in Creative Cloud? I love Creative Cloud! I move between a Mac Pro desktop system and a MacBook Pro laptop at least once a day, so it’s great to know I have access to the latest versions of so many great apps wherever I go. The paradigm shift from individually licensed applications to a single, cloud-based, all-access account completely renovated the way I think about my workflow. Web designers can no longer get away with just doing static mockups in Photoshop and handing them off to coders, so I really like how Adobe keeps creating tools to help designers bridge that knowledge gap.
We were on pins and needles during Interaction14 in Amsterdam, where we were presented with the award:
Which, by the way, looks like this:
Thank you IxDA jury. We’re honored. And thrilled.
That was the short story; here’s the long(er) version:
Because inspiration doesn’t always hit when we’re in front of our computers, and the colors of the world are not always right outside our windows, Gabriel Campbell (lead designer), David Ericksen (product manager), and the rest of the Adobe XD team created a way for people to take some of the functionality of the desktop version of Adobe Kuler into the world:
It’s called the Adobe Kuler iPhone App.
With it, users can sample colors and create color themes. On the go. With an iPhone. It’s functional, it’s fun and, when the Kuler app is combined with an Adobe ID and synced with Creative Cloud, the color themes are available in Illustrator CC, Flash Pro CC and Edge Code CC in the Kuler Panel (with no need to save them as Adobe Swatch Exchange files).
So, not only does the Kuler app capture colors, it organizes them in a way that makes them useful and usable. It’s why, after launching the app in May 2013, the proud Adobe XD team submitted it to the 2014 IxD Awards. And, well, the rest of that story is… We won!
As if that weren’t enough, jurors Aaron Siegel (Fabrica) and Anab Jain (Superflux) discussed the category and why the Adobe Kuler app stood out among the nominees. Our favorite bits from their three-minute video: Aaron’s comment, “We selected this primarily because the range of creative outlets for this particular application is unforeseeably unlimited,” and Anab’s acknowledgement that she finds the app as useful as we do, “In a sense it becomes an enabler for people to start doing things they would not do otherwise.”
But, really, don’t just take our word for it (or, for that matter, the word of the jury), the Adobe Kuler iPhone App is free in the iTunes store. Download it. See for yourself why we, and the 2014 IxDA jury, love it so much.
With the breadth of digital tools available in Creative Cloud, our members have access to applications they’ve never used before… or never even thought to try. Maybe you’re a web designer interested in learning to use our pro video tools; maybe you’re an illustrator who finally wants to learn to use our digital imaging software; or maybe you just want to get the most out of Behance and Typekit.
No matter what you want to learn, or why you want to learn it, now’s the time to try the Adobe tools you’ve never tried before:
The 30- to 90-minute courses will be available from 3:00pm to 6:00pm PST (6:00pm to 9:00pm EST and 11:00pm to 2:00am GMT). The courses are free to the general public for three hours and available on-demand to KelbyOne members.
So block off your weekday evenings in February. Then decide whether you’d like to learn more about Typekit, Illustrator CC and InDesign CC; Photoshop CC, Premiere Pro CC and After Effects CC; or Behance, Muse CC and Camera Raw. And, finally, remember to head over to KelbyOne on Mondays to check on the courses for the week.
Monday February 3
Photoshop CC Basics for Photographers with Matt Kloskowski
Tuesday February 4
Illustrator CC Basics with Pete Collins
Wednesday February 5
Premiere Pro CC Basics with Brandon Ford
Thursday February 6
InDesign CC Basics with Terry White
Friday February 7
Adobe Typekit with Corey Barker
Monday February 10
Getting Started with Acrobat CC with RC Concepcion
Tuesday February 11
Adobe After Effects CC Basics with Corey Barker
Wednesday February 12
Getting Started with Bridge CC with Mia McCormick
Thursday February 13
Illustrator CC: Beyond the Basics with Corey Barker
Friday February 14
Lightroom 5 Basics for Photographers with Matt Kloskowski
Monday February 17
Premiere Pro CC for Photographers with Terry White
Tuesday February 18
The Essentials of Typography with Scott Kelby
Wednesday February 19
Getting Started with Audition CC with RC Concepcion
Thursday February 20
On Using Behance with Pete Collins
Friday February 21
Premiere Pro CC Beyond the Basics with Brandon Ford
Monday February 24
Muse CC for Photographers with Terry White
Tuesday February 25
Camera Raw Basics with Scott Kelby
Wednesday February 26
Getting Started with Kuler with Pete Collins
Thursday February 27
Getting Started with Prelude CC with RC Concepcion
Friday February 28
Photoshop CC for Designers with Corey Barker