Recently in Design
Today, Adobe is happy to announce an update to Adobe Muse CC that makes it even easier to create unique HTML websites without writing code.
Now designers can:
• Access the new Adobe Muse Exchange to download the more than 100 design elements that have been submitted by the Adobe Muse community, including starter templates, prototyping tools, interactive widgets, and more.
• Collect reusable design elements like icons, buttons, headers and footers, styles, and grids using the new Library panel, and share them with teams and other designers.
• Easily connect sites to social media with a dozen new drag-and-drop Social Widgets including Facebook, Twitter, LinkedIn, and Pinterest buttons, plus Google Maps, and Vimeo and YouTube videos.
• Choose from even more scroll effects options from the updated Scroll Effects panel, including the ability to apply opacity and fading to scroll elements and add scroll effects to Adobe Edge animations and slideshows.
• Set a full-screen slideshow that adjusts to the width of the screen whether on desktop or a mobile device.
This update is available to Creative Cloud members now: Simply open Adobe Muse and click Install Now from the updater screen. Then, check out the new training videos in Creative Cloud Learn to help you get started, also included with your membership at no additional cost.
Not yet a Creative Cloud member? Sign up for a free membership and get access to 30-day trials of every Adobe creative desktop app, including Adobe Muse. Free members also have access to the new training videos in Creative Cloud Learn to get started.
For a complete list of new features and updates, read the Adobe Muse CC Release Notes.
Dylan Roscover illustrates, programs and designs. Hailing from the Rocky Mountains of Colorado, and currently residing in Los Angeles, he bridges the gap between art and technology—man and machine—to take his work in thoughtful and timeless directions. We caught up with him after his session at our San Francisco Create Now event; he spoke with us about controlled chaos, working without the burden of time, and how things are always more epic when we’re young.
When did you know that you wanted to be an illustrator/digital artist? In the first grade I became obsessed with the story of the Titanic, so I drew a huge wall mural of the ship (everything seems more epic when we’re young; it was probably only six or seven feet) and illustrated a short book about it.
In the fifth grade I thought computers were awesome (and the future), so I started learning how to create with them. As Heinlein so eloquently wrote in Stranger in A Strange Land “…contemporary art always paints the spirit of its times.”
Of your pieces to date, which turned out exactly as you’d pictured it? Is it your favorite? I’ve never produced anything exactly the way I envisioned it because I envision all of my work perfectly, much like a program or code—abstract, unattainable, like Pi. If I told you I illustrated something perfectly, I’d be a liar; there is always a pixel off somewhere. Turns out da Vinci was absolutely right in his assertion “Art is never finished, only abandoned.”
What was your first paid assignment? I honestly can’t remember. It was during high school, and probably involved the design of a website with Fireworks or Dreamweaver. Oh, those were the days.
When knee-deep in a project, do you prefer solitude and silence or company and chaos? Why? I prefer solitude and chaos—solitude for focus (just me and the pen/tablet/camera; no interruptions to the workflow) and controlled chaos for energy (music, film, art, lighting, electricity).
Which Creative Cloud application, that you don’t already use, are you most interested in teaching yourself? Prelude CC. After seeing demos of what’s possible with it, I’m quite intrigued.
What social network do you use most often? Why? LinkedIn! Just kidding. I joined Facebook back in 2006 because it was designed well, and there is always plenty to learn from a well-designed application.
If you had to choose: creative freedom or a bigger budget? Bigger budget. So I could afford to take time off at the end of the project and focus on my creative freedom without the burden of time.
Whose work do you most admire? Stanley Kubrick. His masterpieces redefined filmmaking.
What one item in your studio (that’s not a tool for work) would you miss if it all of a sudden went missing? The rug. It really ties the room together.
What advice would you give someone just entering your profession (something you wish you knew when you started your career)? Never rat on your coworkers and when it comes to clients always keep your mouth shut.
You recently spoke at our San Francisco Create Now event… What’s one thing you hope people learned about Creative Cloud? I hope they learned more about the core philosophy behind Creative Cloud: the cross-pollination of ideas, between apps and the world at large. Just the simple fact that I can save a file directly from Photoshop or Illustrator and make it instantly available to the entire world is magical and empowering.
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.
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?
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.
Dublin-based illustrative designer Steve Simpson caught our attention with his whimsical approach to animal illustrations in the menu created for his client Fade Street Social. Learn more about his workspace, favorite Creative Cloud features, and how he created this work in the Q&A below:
What are you working on now?
I’m currently designing and illustrating a label for my favourite Irish whiskey. Can’t spill anymore about this one, except to say it’s a lot of fun with hand drawn type. I’m just finishing thirty 1 inch monsters for a ten foot roll of stickers for a client in New York, which will be great preparation for my next job; a 400 meter long mural. Thankfully, it will be done digitally and not on site.
What’s your dream project?
I really like a mix of illustration and design in a project; I love the control you have as an illustrator when you’re also doing the graphic design part of the project. There can sometimes, as an illustrator, be a tendency to create a piece that will primarily look great outside the context of the design; for instance in the portfolio. If the designer is also trying to create something that will stand alone, the whole design doesn’t exactly gel. As an illustrative designer, you can get a much better harmony, with neither side fighting for centre stage. (I’m starting to sound like an old hippie.)
I’m really enjoying packaging projects at the moment, so perhaps a beer label, tea or biscuits would be a fun project to work on.
What does your workspace look like…is it your personal studio, or a neighborhood coffee shop?
I work from a studio, but at the moment I probably have more used coffee cups than the neighborhood coffee shop. It’s a typical cluttered working studio, think less Zen, more punk DIY, but with wifi. I have a room to myself (usually) with a couple of tables, a light-box, iMac and piles and piles of paper. I sketch a lot, constantly (and quickly) redrawing ideas until I’ve exhausted as many options as possible. I hate it when a better idea comes to you when you’ve nearly finished the project, so I try to go through as many options as quickly as possible. Which does create a mountain of roughs and tidying at least twice a year.
Do you share your workspace with anybody? Furry friends count.
I’m saying goodbye to my summer intern Nikkie (Little Paper Forest), who’s off to finish her degree in Illustration back in Canada. In the garret there’s a web designer and another design/illustrator, a couple of Irish guys. It’s good to have somebody to talk ideas through with sometimes. I also like to have an occasional moan, which isn’t the same when you’re on your own.
How has the Creative Cloud changed your creative workflow?
I’ve been using Photoshop since about 1993/94 and it probably accounts for around 90% of my digital day. Other day-to-day essentials include: InDesign, Illustrator and Acrobat. I love exploring new stuff, seeing how it can add something different to what I’m already doing. Having all of the Adobe Creative Cloud apps available to download is very exciting. Currently looking forward to playing around with After Effects CC. Also loving the CC desktop client. Very cool being able to see updates as they become available and so simple to update.
What tools specific to Creative Cloud enable you to work more efficiently?
Really loving the hook up with Behance. I like to put some of my projects on my Behance work-in-progress page, great for instant feedback. The ability to do this straight from Photoshop CC is very cool and prevents me getting sidetracked by other online distractions.
What was the initial ask for this project?
I first met the client, Dylan McGrath, with the Creative Director Gary Gleeson, when we sat down in a Dublin bar to discuss the Fade Street Social menu cover. The building was still being renovated at the time. Dylan wanted a busy kitchen environment that reflected not just his own personal attention to detail but also the humor of the Irish. As a nation we’ve been through a torrid time lately with the rise and fall of the Celtic tiger economy and we appear to be going through a period of reflection; rediscovering what it is to be Irish. I think what Dylan is doing reflects this. It’s about quality traditional foodstuffs in a modern changing Ireland. It’s presented with creativity and flair and a touch of Irish humour. That’s pretty much what the cover needed to reflect.
How did the client’s vision match up to your execution?
Initially there were to be humans in the kitchen, but I thought it would work better with animals, so I took the food from the menu and made them the kitchen staff. As I’m drawing them they naturally develop as characters and by the time I’m finished often, privately, have quite elaborative back-stories. I think Dylan may have asked for one of the speech bubbles to be changed but otherwise they went with my initial pencil sketch. We printed a large tryptic version that is behind the reception when you enter and you can really see the detail when blown up. They were very happy.
Did you look at real animals for inspiration?
In my initial sketches I try to work without any reference material. I want to get as much of what I see in my mind down on paper. I try not to worry about whether a sheep looks exactly like a sheep at the early stages, it’s really not important. If the wooly beast is right for the space, if he has a good shape, if he is working well with the environment, if I’m happy, only then will I go and find reference material to make him more ‘sheeply’ accurate. If you look at the sheep in the centre, I think it’s his eye that really gives him his personality. If I hadn’t gone off and found photo reference then he would probably have just had a round dot for a pupil.
Where did some of the personalities come from for these animals?
I guess they are all either people I know or me, mostly they are me at the beginning and my different moods, but they change and develop into their own personalities the more I work into them. I did feature Dylan in the design, he has a chicken on his head. Vincent was the money man, he’s featured on a bottle of vino on the left.
Which animal is your favorite? And why?
I like Angus the bull, who was always called Angus, but the day before I handed the final artwork in I just happened to watch a documentary on cattle that mentioned Angus bulls were all black, and my Angus wasn’t, he was a really nice black and white. So I had to reluctantly change him. Looking back I think being black really makes him. I guess this proves that I don’t use photo reference as much as I should.
Thanks again to Steve Simpson for answering our questions and giving us insight into his illustrative design process. For more inspiration, be sure to keep in touch with Creative Cloud on Facebook and Twitter.
San Francisco-based CreativeDash wowed us with their photo-realistic take on the app icon. From sushi to eggs and even fuel-tanks – CreativeDash uses the world around them to spark inspiration.
WHAT ARE YOU WORKING ON RIGHT NOW?
Among other projects… Kewe, a social app commissioned by famous pop singer Taio Cruz, is definitely a big focus right now.
WHAT IS YOUR DREAM PROJECT?
Ideally, something that allows us to innovate/create things that have never been done before; A project that is free from the limitations. Internally, we’ve been mulling over the idea of something similar to the old text adventure games like Zork and Peasant’s Quest, but with a crazy spin on the “UX.” We want to remove the visual interface we are accustomed to and free your brain to create a world of adventure. That of course, is a topic for another day.
WHAT ARE YOUR GO-TO CREATIVE CLOUD APPS?
DESCRIBE YOUR STYLE OF WORK IN THREE WORDS.
Clean, Intuitive, Sophisticated.
WHERE DO YOU SEARCH FOR INSPIRATION?
Professional networks like Behance and dribbble, and the world around us.
WHAT DOES YOUR WORKSPACE LOOK LIKE?
A studio. Ninety-degree IKEA furniture throughout. We love it.
DO YOU SHARE YOUR WORKSPACE WITH ANYBODY?
Yes, the rest of the CreativeDash team. We’re looking into getting a plush giraffe to match our Swedish faux-shrubbery and make it cozier in our 16-foot high ceiling office.
WE LOVE YOUR CREATIVE APP ICONS – DO YOU HAVE A FAVORITE?
We have more than a favorite, but if we had to pick, we’d say The Cerberus icon.
This icon was made for an antivirus company. Fun project.
WHAT DOES THE HOME SCREEN OF YOUR PHONE LOOK LIKE?
Most would find it boring with just the default iOS 7 icons.
WE HAVEN’T SEEN ANY PHOTO-REALISTIC APP ICONS QUITE LIKE YOURS. WHAT INSPIRED YOU TO GO THAT ROUTE?
The world around us. We can go into the benefits of skeuomorphic design and how the user forms a connection between digital interfaces and real-life ones… but there are tons of articles out there about that. Some hate it, others love it, but for us it gave us a way to push the envelope of digital realism in our work, as well as entice users into using the product. Here’s some sushi.
FILL IN THE BLANK: I COULDN’T CREATE WITHOUT ______________.
Photoshop: The ink in-between our imagination and the screen.
Just over two weeks ago the Kuler team launched a new beta version of kuler.adobe.com with the top three user-requested features. That wasn’t enough for them so, since then, they’ve added two more:
Rearrange Colors in a Theme
- Easily reorder colors in a theme by dragging color chips to the desired slot.
- Change color values with sliders that show the associated values of each color in a theme. Previously one slider controlled the brightness level of each color; now four sliders for each color take the guesswork out of changes… entire themes can be altered by moving sliders to any point along the color spectrum.
To start using the latest beta features go to https://kuler.adobe.com/features/enable/newFeatures.
See the Changes We Made Last Time
To see the changes we made for the July 22 beta release read “Adobe Kuler Is Kooler: A Beta Release.”
Once you’ve spent some time with the beta, let us know what you think: http://forums.adobe.com/community/kuler_forums.
When Adobe commissioned Jessica Walsh and her creative partner, Stefan Sagmeister of Sagmeister & Walsh to reinterpret our Adobe MAX logo back in March, little did we know that Jessica was in the middle of a courageous, curious, and very INTENSE dating experiment: 40 Days of Dating. Jessica Walsh and Timothy Goodman, friends for years, each with different relationship histories (she: dive in; he: avoid), had decided to date each other for 40 days, documenting each step of the way, asking their friends to contribute creatively to the online project. Now, Jessica and Tim are sharing their experience with the world.
We’re hooked and wanted to know more. So we interviewed Jessica and Tim, along with their friend, Eric Jacobson, who designed and developed their site. Make sure to explore the site from the beginning. NO CHEATING!
So in reading about your 40 Days of Dating, it seems clear that the concept was batted around for months before formalizing it. Still, inquiring minds want to know: who initiated the project?
Tim Goodman: It was an idea I had about a year ago, but I didn’t really know the ‘what’ or the ‘how.’ Then one day on our way to Miami for Art Basel—when Jessie was heart broken about a guy, and I was dating too many girls at once—it became crystal clear. We ran with the idea, and it really became something entirely different after that.
Jessica Walsh: We were waiting in line for egg sandwiches at a deli in JFK en route to Art Basel when Tim mentioned an idea he had for a dating project. I instantly felt that doing a personal project around relationships was a great idea. We started throwing crazy, nutty ideas back and forth during the plane ride, and by the time we landed in Miami we had a pretty elaborate and crazy plan for “40 Days of Dating.”
There’s such an interesting design tension to this project: you both are putting yourselves out there in such an intimate, public way, sharing very personal, often spontaneous experiences. Yet at the same time, you’re both talented designers, highly aware of presentation, form and of course, design. So can you elaborate on this tension?
TG & JS: It was important to us that 40DD have an identity, but it wasn’t until the project was over that we designed the site, shot the videos, photographed our items, asked for lettering contributions, etc. We wanted to approach the project with as much honesty as possible, first.
We worked in tandem to finish everything. None of it was possible without the amazing help from our website developer, Eric Jacobsen (whiskyvangoghgo.com), as well as Santiago Carrasquilla (santiagocarrasquilla.com) and Joe Hollier (joehollier.com) who shot and edited all the videos. Furthermore, we are extremely honored to have so many talented friends and colleagues contribute to a typographic piece everyday.
For example, what design elements did you know you always wanted to include? What was discarded? Were there disagreements in the design stage between the two of you?
TG & JS: While we waited to make decisions on the design until afterwards, there were a few things we had to do before we started the experiment: 1. We decided it would live on a site with daily questions, so we wrote those questions out before hand. 2. We purposely kept things (tickets, gifts, etc.) along the way as documentation. 3. We wrote the synopsis and agreed on the dating rules before we started.
There were plenty of design disagreements along the way, but for the most part we worked extremely well together. We split up tasks, and assisted each other along the way.
In terms of the “public” presentation, you’re employing a variety of forms – video, type contributions from friends, and your own drawings, to name a few. Even with the vibrant variety, I’m curious about the gap between design and experience. To put it another way, having lived through the 40 days and dates, do you feel like anything is missing in what you experienced and how the public is receiving it?
TG & JS: Great designers make the audience see something wonderful through their own lens. This was our own experience, so there’s always a degree of sensitivity about this. Are we getting our story across efficiently? Are we being misunderstood? What if mom is judging me?
Obviously, we didn’t videotape our experience, so the audience is forced to experience the story through writing, photos and illustrations. Ultimately, it’s been difficult, but also very liberating to release it to the public. Our individual stories, issues and approaches aren’t very different from a lot of folks. We knew that if we were going to do it, we had to go the full distance. We’re happy that people are connecting so much to it.
Eric, when you were first told about the project, what did you think?
Eric Jacobsen: I thought it sounded a little bizarre, but very intriguing. I believe that “dating” in America is effectively broken, or at least in a painful stage of some sort of radical transformation, and am interested in anything that tries to creatively break down and analyze it.
How much of the final vision of the site was articulated and how did it evolve? For example, was the two-column grid included from the beginning?
EJ: The site was executed very closely to the submitted designs. I had a bit of input in the nuances of the transitions and animations, but really it was all quite straightforward.
Can you talk about the any web design and development challenges that you faced when building the site?
EJ: The challenges were perhaps a little mundane; the site is graphic-heavy, so a lazy-load script was necessary. I wanted the graphics to be retina-display-ready; Daan Jobsis came up with a solution wherein retina graphics could be generated both with greater detail and smaller file size than standard images.
Since its relaunch in May, people have been using our Kuler web app to create and share color themes and use them in their work. They’ve also given us ideas about how we could make it better. So the Kuler team got busy and incorporated some of those requested changes.
The new beta version of kuler.adobe.com includes the top three requested features:
Extract color themes from an image
- The original Kuler web app included the ability to extract a theme from an image. That feature is back. Just click the camera icon in the upper right corner of the Create page and choose a photo from your library.
A color wheel in two sizes
- When we updated the interface many of our long-term users thought we’d made the color wheel too large. Now, with a click, the wheel can be larger when you need it and smaller when you don’t.
Reduced borders around individual colors in a theme
- Now you can see more of each color and the play and interaction between them.
Some things haven’t changed
- The beta features are available at https://kuler.adobe.com/features/enable/newFeatures
- The current version of kuler.adobe.com will remain unchanged until we’re confident that the beta features and functionality are working for our audience.
- We’ve made no changes to the Kuler iPhone app or the Kuler panels in Adobe Ideas or Illustrator CC.
Ready. Set. Go.
To start using the beta features go to https://kuler.adobe.com/features/enable/newFeatures
Once you’ve spent some time with the beta, let us know what you think: http://forums.adobe.com/community/kuler_forums
To coincide with the launch of the new Creative Cloud apps, we paid tribute to the late, great Charles Eames by hosting our own Eames’ Chair Remix contest. The task: take the iconic Eames chair and using Adobe products (Illustrator and Photoshop) personalize a digital version and share it with us and the Behance community.
Among the impressive and creative entries we received (check them all out below), we’re excited to announce that ANDESIGN is our grand prize winner and will be receiving an Eames Molded Plastic Dowel-Leg Armchair, one year membership to Creative Cloud and an Eames poster for his impressive “Eames Nest” design.
Also, did you know that we put six top designers to the test as well? See what impressive designs they came up with.
All Eames’ Chair Remix Entries:
Looking at a normal object in a different way helps creatives bring a fresh perspective to everyday items. The Argentinian artist Leandro Elrich did just that in his piece titled “Dalston House,” turning a house on its side.
The piece uses a wall of giant mirrors, which reflects against a huge horizontal print of a Victorian terraced house. Visitors are then free to climb and jump around on the print of the house, which is reflected in the mirror above. Visitors hang from windows, skateboard along ledges, and crawl along walls in this optical illusion.
If you’re in London, be sure to check it out now through August 4, 2013. Check out the full article on Colossal. Also keep an eye on our blog, Twitter and Facebook for more spotlights on creative projects.