Adobe Systems Incorporated

Contemplating The Universe… in A Browser

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:

JoshWorth

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

You said you learned a bit about Javascript, SVGs and viewports along the way? Anything else? I got a better sense of how the DOM (Document Object Model) works and gained a deep respect for front-end developers who have to deal with device and browser incompatibilities on a daily basis. (By any chance is Adobe working on a universal browser emulator that lets you preview your work in every possible browser on every platform without having to switch to a virtual machine? The world would be forever in your debt.)

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.

 

7:14 AM Permalink

I AM THE NEW CREATIVE

Art directors are becoming animators. Print designers are becoming web designers. Illustrators are also photographers and editors who also shoot film. They are the New Creatives, and we are celebrating their work.

With the Creative Cloud our product teams have removed the barriers to creative expression: Designers can build parallax HTML5 experiences. Illustrators are making EPUBs. Photographers are using their cameras and Adobe technology to become filmmakers. And coders have the tools to make beautiful design.

It’s an amazing and interesting time in our industry; people have the ability to self-express, in any discipline, without boundaries. I Am The New Creative promotes the amazing work our community is producing and marks this moment in time as a movement and a celebration of creativity.

One of the most incredible aspects of this program has been watching creative professionals merge their mediums and their portraits to produce “New Creatives” versions of themselves.

There’s something magical about the compositions. As a designer there’s always a part of me in my work, but to personalize my work in this way, to make my work more representative of me, presents an alternative perspective. All of the artists we’re working with are enjoying this experience and are appreciative of our desire to promote their amazing creative output.

Our new site highlights the New Creatives, their disciplines, their work, and their stories.

Visitors to the site can join us and become New Creatives (submissions are made through Behance and curated by our team); we’ll be choosing a number of artists and celebrating them and their work throughout our social properties and on Adobe.com during the coming year.

 

site-1024x844

Be sure to check out the work of the New Creatives, get inspired, and join us.

AJ

Graphic Designer / Executive Creative Director / Maker of things

 

 

 

4:00 PM Permalink

Motion graphics in a mobile world

The spectacular popularity of mobile devices means interactive designers need to extend their skills beyond the desktop to embrace the universe of HTML5. Among mobile devices, including tablet computers, smartphones, and interactive books and magazines, HTML5 is the common denominator.

With HTML5 comes the need to find new ways to integrate interactive media. Specifically built to meet web standards, Adobe Edge Animate provides a way to create interactive and animated content using HTML, CSS, and JavaScript with confidence that it will look and behave how you want it to no matter what device you’re using.

Now I know there are a lot of people who don’t think HTML animation is very robust. They imagine type and div boxes animating and fading in and out, which I agree is less than optimal. But when you start combining that functionality with CSS3 and some of the styling and imagery, it starts to get compelling— you’re only limited by the browsers. Android and iOS devices have latest CSS3 capabilities that support features such as blurring, so it’s possible to offer a more sophisticated animation experience on these devices.

Animated illustrations in HTML5

Recently I created a course for the annual conference of the Association of Medical Illustrators that covered how to simulate illustrations in HTML for use in iBooks and digital magazines or for viewing on websites or mobile devices. While the subject matter experts were all medical illustrators, the session itself focused on making content today—easily digestible to readers—something that spans across industries. How do you capture your consumers’ attention with animation, and across various devices?

figure_01

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

 

For the class, I created an animated interactive graphic that compares a healthy eye to an eye with glaucoma. The illustration shows how an eye with glaucoma can’t properly drain fluid, and includes a vision simulator that displays the effect of this condition on a person’s vision. The animated droplets are actually a series of nested animated symbols that create the constant, flowing effect. Edge Animate is able to replace a time and labor intensive coding process with one that is both easy and affordable.

One of the keys to easily creating interactive components in Edge Animate is how the symbols talk to each other via targeting. You can associate an interactive element, such as a click, with a symbol. In the glaucoma example, the user clicks the words Affected by Glaucoma, which then tells another symbol (in this case, the sunset photograph) to change its state. It is this ability to combine the functions and the order of symbols—each with their own timelines—that enables us to create these engaging animations. In the relatively short two hour class with 20 participants, it was exciting to see how quickly attendees were able to create their own animation projects using Edge Animate.

Animation is fun again

A few years ago, the web was full of animations and cool interactions, but those faded away as more attention turned to offering content that behaved consistently across devices and platforms. But people are starting to get excited again about adding it back into projects, and with Edge Animate we can combine styling and imagery with cascading style sheets and simple animation to once again create content that is exciting, engaging, and fun.

Watch a Demo

This 10-minute video demonstrates the power of nesting symbols in Edge Animate, and shows how I achieved the fluid, seamless, animation in this medical illustration. Learn more about this project in the December Issue of Adobe Inspire Magazine, titled Creating interactive illustrations with Adobe Edge Animate.

Learn the essentials of Edge Animate

Learn even more about Edge Animate with Chris Converse on lynda.com with a free 7-day trial for:
Edge Animate Essential Training.

 

 


chris_converse_colorChris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.com, Udemy.com, Amazon.com, and HOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.

11:25 AM Permalink

Creative Spotlight: Artist and Web Designer qubibi

“I work without seeing what I’m creating. Programming is like writing words.”

– Artist and web designer, Kazumasa Teshigawara aka “qubibi

If qubibi’s words rings true for you, you might want to dive a bit deeper into his story. qubibi’s inspiration spurs from his observations around his home city Tokyo, Japan. He uses the city’s energy to craft his designs, emphasizing in animation. When asked how he turns an idea into art, he reveals, “I begin by writing and then I imagine music. After that, I start using digital tools like Photoshop without making any sketches, I just work directly on the computer and see how it evolves… In my case I can’t create art without Creative Cloud.” Check out his recent redesign of the Creative Cloud logo and more background on his work in the video below:

The Creative Cloud provides designers like qubibi with built-in shortcuts for everything from debugging to simple animations so they can spend less time on tedious tasks and focus on what makes web design fun, creativity. qubibi uses Creative Cloud to access his work from any computer at any time and benefits from sharing his work with fellow designers on Behance. Find out more about Creative Cloud and the future for web designers like you.

Be sure to follow us on Facebook and Twitter for more web design news, tutorials, inspiration and more.

 

2:09 PM Permalink

Adobe MAX Speaker Stephen Gates of Starwood Hotels Talks Adobe Edge Inspect

phones1Stephen Gates, Vice President and Creative Director for Global Brand Design at Starwood Hotels & Resorts will be joining us at Adobe MAX this year to share design and development secrets behind building Starwood’s mobile roadmap. Prior to MAX, he sat down with our Adobe Edge Inspect team to discuss how the tool has been helping his team come up with new ways to best show off their nine hotel brands. They’ve managed to accelerate their production and gain buy-in from a dispersed global team of designers, developers, strategists and stakeholders. Pretty impressive, right? Learn more about their success and get to know Stephen in our Adobe Edge Inspect Team Blog Q&A.

Want to hear more from Stephen Gates? Attend Adobe MAX and hear him talk about the “Secrets to Creating a Successful Mobile Roadmap, Apps, and Mobile Websites.” Don’t forget to enter promo code MXSM13 when you register to receive $300 off.

1:33 PM Permalink

What Is Adobe MAX? – Why You Should Attend

MAX

We’re making Adobe MAX (May 4-8) bigger and better this year. For those who are wondering, “What’s MAX?” – it is THE conference for creative pros. It’s an opportunity for designers, developers, video professionals, photographers, and more to come together to learn about the latest technologies, techniques, and strategies for delivering your best creative work – not to mention the idea exchange and networking opportunities that exist. And it doesn’t stop there.

Agenda

We have an agenda packed full of amazing speakers, tracks, sneak peeks (yes – you don’t want to miss this!) and more. Choose from over 300 sessions and labs taught by industry leaders and Adobe experts to maximize your creative experience, and even customize your MAX agenda by mixing and matching sessions from all five MAX tracks:

If that’s not enticing enough, we’re throwing a cherry (or two) on top to get you to L.A. Register today using this special promo code: MXSM13, to receive $300 off AND get your hands on a free 1-year Creative Cloud membership.

Be sure to follow Adobe MAX on Facebook and Twitter as we’ll be announcing keynote speakers and other exciting information soon.  We hope to see you there!

1:01 PM Permalink

Ideas That Changed Graphic Design

Fast Co.Design’s recent piece, “9 Ideas That Changed the Face of Graphic Design,” summarizes the outlet’s favorite ideas that made graphic design what it is today. Inspired by the book, 100 Ideas That Changed Graphic Design, authored by Steven Heller and Véronique Vienne, below is Fast Co.Design’s shortlist.

Body Type

Pictograms

Pointing Fingers

Decorative Logo Types

Metaphoric Lettering

Texts as Images

Supreme Geometry

Dust Jackets

White Space

Here’s a look at some of the inspirational images depicting the 9 ideas above.

Graphic-DesignWhat do you think? Any you’d add to this list?

11:51 AM Permalink

Great Designs from United States Presidential Election 2012

The 2012 Presidential Election has now concluded and all the campaigning can finally be put to rest. Since we’re four years away from the next wave of campaign art, we wanted to reflect on some pieces that caught our eye during this year’s U.S. Presidential Election. So take it in, savor it, and use it for inspiration – we’ll be looking forward to your designs come 2016!

Infographic: How Both Presidential Candidates Grossly Outspent Their Predecessors

Infographic-DesignCo

 

Randy-Hensley

Infographic: The 507 Different Paths To Presidential Victory

Infographic-Presidential-Victory 

Image created by Matt Stevens

Image created by Matt Stevens

 

Image created by Simeon Elson

Image created by Simeon Elson

Get even more in Design, Development & the Elections?.

12:15 PM Permalink

Creative Spotlight: Adrian Franks on Adobe Touch Apps

We’d like to introduce you to Adrian Franks (@afranks3) – a creative who celebrates friends, historic figures and admired current icons by creating silhouette sketches using the creative trio of Adobe Touch Apps, Creative Cloud, and Creative Suite! We stumbled upon one of Adrian’s impressive sketches on the Adobe Ideas Facebook Page and reached out to learn more about him and his work as we knew that Adrian would have a great story to share.

Get to know Adrian – find out where he likes to create, his ideal travel destination and how Adobe’s products have helped streamline his digital workflow in the full Q&A below. Also, visit both our Twitter and Facebook channels to see his work on display.

a adrianfranks adrianfranks1 adrianfranks4 adrianfranks5

 

Adobe: When were you first introduced to Adobe Touch Apps?

Adrian Franks: I started using Adobe Touch Apps when I first discovered Adobe Ideas in January 2011.

What was the very first creation you made with Touch Apps and Creative Cloud?
My creative endeavors with Touch Apps is a line of silhouette drawings called FEARLESS that highlights various people that I admire whether they are close friends, historic figures, or current pop culture icons. Currently, I use Creative Cloud to store my vector-based silhouette and download them to my Mac for further design work in CS6.

Where’s your favorite location to create?
My favorite place is at my studio, which is broken down into 2 places. One, being my physical studio in Red Hook, Brooklyn, the other is out in the world on the go. Whether I am on my bike, riding the train, the bus, or random coffee shops, I consider that as part of my studio. It helps influence my work.

How has the integration from Touch Apps through to the Creative Cloud features changed your creative workflow?
Creative Cloud has allowed me to produce my ideas faster because I have fewer steps to take. I love the fact that once I am done creating in Ideas it auto saves, syncs to the Cloud where I can download the file back to my computer to further manipulate in Photoshop or Illustrator. Once done, I can post to social or send to a printer. All of this has streamlined the process into a digital workflow. I love it!

Which pairing of the Touch Apps and the applications within Creative Cloud (i.e., CS6), are most instrumental to your creative process and why?
I love the combo of Ideas + Photoshop + Illustrator for creating illustrations and designs. I also love Proto + Photoshop + Illustrator for web design and UX projects.

How much of a difference has direct touch input made to your creations?
The Touch Apps give me the freedom to create and concept like I used to before the computer. It replicates the functions of pen and paper, but maintains ease of use on digital.  Touch is the present and future creative.

If you had the opportunity to travel to anywhere in the world with your Touch Apps, where would it be and why?
Africa, especially South Africa. Design there has been in a boom for a couple of years now. Events such as the World Cup and its rich political history have caused a shift in how the world perceives South Africa and its people. With that said, things such as creativity, design, art, and photography have pushed the thinking of South Africans. I would like to be a part of that, I would need to be mobile and believe Adobe’s Touch Apps and CS6 would allow me to do that.

Can’t get enough of Adrian’s work? Visit his Creative Works website to check out more of his work. If you have great work to share, send your creations our way for chance to be featured in an upcoming Creative Spotlight. Reach out to us on Facebook, Twitter or in comments here.

11:31 AM Permalink

Announcement Recap of the Create the Web Tour Kick-Off in San Francisco

Monday (Sept. 24) was quite a day for web designers and developers and Creative Cloud members! We kicked off the first leg of the Create the Web Tour in San Francisco, where we shared a number of updates and announcements. If you weren’t there for the action or able to tune in to the live stream, no worries! We’ve recapped all of the news for you:

Dreamweaver Updates – Exclusively for Creative Cloud members

Creative Cloud Dreamweaver users will be excited to hear that we’ve introduced six new features for easier authoring of HTML5-based websites, new support for compositions from Adobe Edge Animate, more robust FTP transfers, and more. Check out this video for a quick run-through:

(more…)

6:09 AM Permalink