Adobe Systems Incorporated

Translating Design… with Code

The sixth installment of I Went to Adobe Creative Camp at SXSW 2015… And all I brought back is a series of blog posts, the firsthand account of a first-time Adobe SXSW Creative Camp attendee.

Going from Design to Code without Going Insane with Ryan Stewart and Sarah Hunt

Adobe product managers Ryan and Sarah both have design and development in their blood. Ryan’s a front-end developer who codes design. Sarah’s a graphic designer and web developer. You could say they understand each other.

DesignCode_1

Design. Code. They’re different. (Obviously.)

Designers finesse every detail (spacing, kerning, colors). Then they hand their work off to developers who, despite notes and explanations, don’t really seem to “get it.” It’s not that developers aren’t doing the best possible job interpreting; it’s because design doesn’t equal code. And because the transition—from design to code—isn’t always a smooth one.

“Photoshop Archaeology” is how Ryan refers to the time a developer spends inside of Photoshop looking at what’s there, trying to figure out properties, dimensions, colors, and fonts; using measurement tools; and ensuring that design decisions will translate to the web. There was no alternative to “doing it by hand.” Until now.

Enter Creative Cloud Extract. Where design is translated for coders. And, just like that, the designer developer collaboration improves.

Extracted from the content of the PSD is a style guide; used forever in print, they certainly aren’t a new concept, but it’s at this point that a designer can collaborate with a developer to determine which design decisions are most important and begin to understand the relationship between a final design and the code used to create it. And since Extract has been added to Brackets, an open source code editor, the style sheet can be opened and worked with inside Brackets in the browser—a place developers are very comfortable.

Also inside Brackets it’s possible to select a layer from a PSD inside the code editor to get contextual code hints to see how designs translate into CSS. In addition, developers can isolate individual layers and trim them. All in one step. Trying to go in and isolate individual layers, crop around them, and manually adjust the canvas used to be a super time-consuming process. Not anymore.

DesignCode_2

Between the break points

It can be difficult for designers, who can get carried away with design perfection, to remember to design for the responsive mediums they’re targeting, and to create assets that can be used on different screens and still look right. Although there’s actually more control now over how things look on the web, developers are hyper vigilant of the capabilities of the medium and it’s critical that designers are too. Content needs to flow and design needs to stand up between standard break points (not just for desktop, tablet, and phones but for things like smaller browser windows).

DesignCode_3

Who’s watching the assets?

Designers obviously create the assets, but it’s developers who have to be aware of how they’ll perform and make sure they’re as small as humanly possible. And, who’s responsible for updates? Actually making changes that get uploaded? Those things vary from team to team. So communicate. About everything. Use whatever works: Slack, Trello, GitHub Issues, Creative Cloud folder collaboration.

Then talk. And talk again. Have conversations. Walk someone through something. It’s the only way for everyone to be happy with the end result.

And designers… start learning about CSS. Look at the code. Try to determine what it means and how to communicate about it. It will enrich collaboration and the design work will be so much better because creative decisions will be made inside the box of the medium. Most importantly, though, it provides the technical knowledge to champion and defend design decisions.

My conclusion: Designing and coding. It’s a complicated collaboration. Extract makes it an easier one.

Read the wrap-up of Session 5: The Evolution of the Web with CJ Gammon

8:39 AM Permalink

Pushing The Web Forward

The fifth installment of I Went to Adobe Creative Camp at SXSW 2015… And all I brought back is a series of blog posts, the firsthand account of a first-time Adobe SXSW Creative Camp attendee.

WebForward_1

The Evolution of the Web with CJ Gammon

“The web connects us globally and it’s hard to imagine a future where we aren’t more connected because of the foundation of it. Given that technology and the web changes so fast, it’s not difficult to imagine the web of the future looking very different from the web of today.”

CJ Gammon works at Adobe creating interactive experiences and applications focused on web technologies. His session posed the question: How do we simplify the creation of complex content, make it easier for everyone to create, and also raise the bar for developers who are pushing the web forward?

WebForward_2

Rich experiences and dynamic graphics

“When we think of native platforms, we often think of native games and the rich 3D experiences that are created on them. What if I want more, what if I want direct access to the GPU to create really amazing experiences?”

The web has consisted, for a long time, primarily of high-level extras and lower-level APIs (like CSS and SVG). But what about taking full advantage of the hardware?

  • WebGL Specifications: From the Khronos Group, it enabled developers to use canvas elements to create rich, complex 3D web graphics.
  • WebGL: For rendering the rich textures and effects of native consoles (unfortunately, difficult to write).
  • Three.js: One of the most popular cross-browser WebGL libraries for the display of animated and 3D graphics. It simplifies the code-writing process.
  • Leap Motion: Released with a JavaScript library, it enables people to gesturally interact with content and software. A unique experience right inside of the browser.
  • Hybrid applications: The web is getting really good at providing access to hardware (cameras, phones, and game pad APIs) that expands the potential for native-type experiences.

WebForward_3

“Peripherals offer experiences that we’re able to integrate using the web’s APIs.”

Thanks to devices like Oculus Rift and Google Carboard, it’s impossible to talk about the future of the web, without mentioning Virtual Reality (VR). It can be achieved on the web with WebGL and rendering in stereoscopic view, but it requires access to the application data (so the application moves along with someone moving their head).

WebVR makes that possible. The experimental API uses JavaScript to provide access to the data in VR devices through a browser. MozVR, Mozilla’s Virtual Reality team, is exploring how to bring WebGL and game-like experiences to VR and playing around with what traditional web experiences might look like through a VR headset.

What kind of experiences could these technologies enable in the browser? As an example, something like Google Street View might look VERY different: Right now, it’s mapped photos that create a 360-degree view. Very cool. But static. Although there are logistical issues, the technology exists to attach VR cameras to drones that capture images in flight that people can experience through VR headsets.

WebForward_4

Designers and their tools

“What about designers? How do designers create content for these more complex experiences. Not everyone is going to be able to write their own tools, so how do you tap into the tools that designers are already using?”

Designing is visual. And the tools designers are used to working with have rich GUIs that accelerate their ability to create:

  • 3D: The rich models, textures and animations of 3D applications can be combined with WebGL. A plug-in for three.js, packaged with the three.js library enables use of Blender, an open source 3D modeling and animation tool. Designers can work where they’re comfortable and developers can work where they’re comfortable.
  • Photoshop for graphics: Adobe Generator for Photoshop CC, essentially a node server running inside Photoshop; developers can write JavaScript scripts that actually tap in to the application.
  • Animation: Flash changed animation by enabling designers to easily create and share animation everywhere. With support for custom platforms, developers can write plug-ins that allow the export of anything in any format.

My conclusion: New workflows. Existing tools. Collaborations. Hybrid applications. A mass approach to simplifying the creation of complex content on the web.

Want to hear CJ’s talk in his own words? He recorded his session.

 
Read the wrap-up of Session 4: How to be a More Inefficient Designer with The Made Shop

5:50 AM Permalink

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

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

Adobe Edge Animate, Preview 7 and Muse Updates Now Available in Creative Cloud

For our Adobe Muse and Adobe Edge users, we have some exciting updates to share – and if you’re a Creative Cloud member, consider it good news times two with the applications available to all Cloud users!
edgeAdobe Edge Animate, Preview 7 

First up, Adobe Edge – a next generation tool for creating content with motion and interactivity for the web, using web standards like HTML5, CSS3 and JavaScript – is now Adobe Edge Animate with the release of Preview 7. We’re thrilled to announce that the latest preview of Adobe Edge is now available in the Creative Cloud.

Edge Animate Preview 7 is a major update, with significant new features like resizable layouts, which can adapt to different screen sizes, rulers and guides, shadow effects, timeline and keyframe improvements, enhanced text features, and much more. Watch Preview 7 in action below, and for more about this release and for a complete list of features, visit the Adobe Edge Blog.

You can also check out Edge Animate in action over at the Edge Showcase.

 

Muse

Adobe Muse Updates 

Today, Adobe Muse announces new features and updates available to Adobe Muse subscribers and Creative Cloud members, including availability in Japanese, and new built-in support for contact forms.

Find out how to easily add, configure, and style contact forms into website designs without having to embed HTML code from third-party online form providers in the video below.

This is just the beginning of a longer-term effort to bring more extensive content management capabilities to Adobe Muse users through tighter integration with the Adobe hosting solution, Adobe Business Catalyst. Get the complete list of other great Adobe Muse features and enhancements, including the ability to add HTML5 animations created with Adobe Edge Animate here and in this post, What’s New in Adobe Muse 2.0, by Evangelist Terry White.

9:13 AM Permalink

Q&A with Youngest European Web Developer, Jordan Casey

jordan-casey-150x150

Adobe: When did you first start developing and what inspired you to get started?

Jordan Casey: I first started developing when I was nine, I was playing a flash multiplayer game called Club Penguin and saw that other kids were building websites and blogs about it, and I saw that this could be fun, so I learned three languages: HTML, Actionscript 2.0 and CSS and went ahead and made my site.

(more…)

12:15 PM Permalink

New Touch Apps: Adobe Proto and Adobe Collage for iPad

Adobe_Proto_icon_RGB_512px_no_shadowAdobe Proto and Adobe Collage have been available for Android, and we’re excited to share that they’re now available on iOS!  You can now create interactive wireframes and prototypes of websites and mobile apps using Proto or capture inspirational images, drawings, or other content with Collage –all on your iPad.

We have also updated Photoshop Touch and Adobe Ideas for iOS.

 

(more…)

12:40 PM Permalink

Creative Cloud and CS6 Ask a Pro Launch Week Recap

AAP_regsite_header-2

We had great Ask a Pro sessions with our Evangelists last week. Each day we learned more about the Creative Cloud and Creative Suite 6 offerings for the design, web, photo and video communities.

If you happened to miss any of the sessions, not to worry! Below are recordings of each for your viewing pleasure! Once you’ve had a chance to check out the sessions, be sure to let us know what CS6 and/or Creative Cloud features you’re most looking forward to working with below in the comments, or on Facebook and Twitter(more…)

2:15 PM Permalink

Creative Suite Artist Profile Videos

CreativeLayerImage

We never cease to be amazed by the stunning work created by artists around the world, using Adobe products to help make their art a reality. For our new Creative Suite 6 imagery, we searched across the globe for artists who value creativity above all else, and tapped into their skills and vision to create a humanized interpretation for each of our products. To give back to these artists who devote themselves to their craft, we captured their stories in our Creative Suite Artist Spotlight video series.

(more…)

12:00 PM Permalink