Recently in Web
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.
Now designers can:
• Experiment with scroll motion effects quickly using the new Scroll Effects panel
• Make long, single page sites easier to navigate
• Have confidence that sites with scroll motion effects will work more smoothly on tablets and smartphones, including iPhones and iPads
To see these updates in action, watch this video.
With over half a million websites created with Adobe Muse, there are a lot of great ideas for inspiration to get started. Visit the Adobe Muse Site of the Day to see some of the more engaging sites Adobe Muse users are creating.
The Adobe Creative Cloud gives you access to features as soon as they are released. Learn more about the benefits of joining Creative Cloud here.
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.
“I work without seeing what I’m creating. Programming is like writing words.”
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.
Adobe Creative Cloud for teams allows you and your team to get the entire collection of latest and greatest CS6 tools, along with lots of team-specific features that make working together easier than ever. So the question is; is it right for you? This series helps Adobe customers, such as creative directors and IT professionals, understand if Creative Cloud for teams is a good fit…
- Size Doesn’t Matter – Design agency? Growing startup? Regardless of your workgroup situation, Creative Cloud for teams fits.
- Cloud collaboration + latest creative tools = staying ahead of the curve – Creative Cloud for teams makes it happen. That’s right –you and your team receive the latest updates as soon as they’re available.
- Changing needs = changing team – With Creative Cloud for teams, adding and removing licenses for team members is a walk in the park.
- HELP! – Creative Cloud for teams provides you with help when you need it. Enjoy two deep-dive expert support instances (per seat per year).
Interested in hearing how Creative Cloud for teams is benefiting Scott Kelby’s own Kelby Media Group? Check out this video to see how Creative Cloud for teams allows them to reach millions of people all over the world through websites, podcasts, online training, magazines, and more:
Adobe MAX -The Creativity Conference, is less than a week away! While you’re planning your sessions at MAX, be sure to add Denise Jacobs to your schedule. She’s the ultimate modern creative web speaker, an expert on both CSS, web design and all things creative. With publications such as The CSS Detective Guide to her most recent work on creativity, we can’t wait to hear Denise speak on “The Importance of Storytelling in Web Design” and “Unfolding Your Brain: Catapult Your Creative Productivity” at Adobe MAX next week. So dive in and get to know Denise a little better in the below Q&A, she’s pretty amazing!
Adobe: You’ve recently announced that just delivered your last article on front-end development: no more CSS for Denise. Could you expand on this professional transition you’ve undertaken?
Denise Jacobs: This transition has been a long time in the making, but my efforts over the past 2 years have finally come to fruition. Right after I finished my book, The CSS Detective Guide, in later February of 2010, I had a major epiphany that what I truly wanted to focus my work on is around creativity. It was at that time that I came up with the title “Creativity Evangelist” (and promptly bought the domain). However, my plan was also to really get established as a speaker at web design conferences, and the topics in my book were a perfect vehicle for that. Once I started to become known as a speaker, then I started shifting my content more towards my true area of interest: Creativity. So, while it looks like somewhat of a dramatic change, for me, that has been the goal all along.
One of your talks focuses on the ”The Importance of Storytelling in Web Design,” this is a ideal topic for Adobe MAX. We love your focus on reverse engineering a project to come up with the story that the website or app needs to tell. Do you find web designers often overlook the storytelling framework when approaching a project?
Absolutely. I think Storytelling is a lot like Accessibility still is and User Experience Design used to be: something that is tacked on to the end of the project in the mad rush to just get the thing built. But also like Accessibility and UX, if Storytelling is to be incorporated into a project, it really needs to be done from the start. I truly believe that it gives projects and finished products more depth and richness.
The Importance of Storytelling seems to dove-tail with Content-First framework often heard in Responsive Web Design discussions. How do think Story-telling and Narrative can specifically help web designers going down the Responsive Web Design route?
One of the things I will talk about in the presentation is how Storytelling in web design can be incorporated on the visual, content, and ux levels. From a responsive standpoint, Storytelling will inform the design visually, which means that how the site will change visually when it responds will be richer. I also fell that Storytelling can help you understand your audience better and their needs, which will then inform how you structure your responsiveness on a technical level as well.
Your other MAX session, “Unfolding Your Brain: Catapult Your Creative Productivity” delves into the fascinating neuroscience of creativity itself. What has surprised you the most as you delve into the literature?
One of the things that has surprised me most and that I am now the most fervent about is how at odds current work culture is with nurturing creativity. Working long hours and weekends, meetings, micromanagers, cubicles, multitasking, and working in isolation all are the enemies of creativity and innovation. And yet, they have become the standard of corporate work culture.
Fortunately, there are more and more forward-thinking companies are working to change this by structuring offices that encourage creativity and playfulness, innovation, and flexible work schedules and other methods. My goal is to be an additional force of driving this change forward by working with more teams and companies with even more suggestions and practices for supporting and fomenting creativity and innovation.
The first one is to single-task instead of multitask. I’ll reveal my secrets for that in the talk. The second is to find others to generate creative synergy instead of constantly trying to work by yourself and holding all of your ideas close to your chest instead of sharing them with others.
And what would you recommend to a starting-out web designer?
One thing is know that you can’t know everything. Things are coming out new all of the time and it can become overwhelming to try to be on top of all of it. My strongest encouragement is to keep following your deep interests, even if they don’t seem related — you never know where it will take you. Just look at Steve Jobs’ commencement speech to the Stanford graduating class. It’s a great testimony to what following your interests can do for a person.
Your talk seems focused on some very practical tips and insights. What’s surprised you as you’ve implemented these ideas into your own creative life?
What has surprised me is how many creative ideas I have. There was a point in time in my life where I wondered if I was a creative person and if my ideas were “any good.” These days, it seems that once I acknowledged my creativity and started initiating practices to encourage it, ideas flow constantly. It’s a good problem to have!
Ah, you want me to reveal my secrets! Right now, I would say that the most pressing obstacle to creativity is fear. Fear inhibits the flow of creative impulses in the brain and keeps you stuck in place with no neurological juice to feed the creative flow.
Thanks so much for taking the time for answering these interview questions. Any final jokes or humor to share with your fellow creatives?
Thank *you* for the interview! Any jokes or humor? I can’t think of any that would be appropriate to share! However, I will share two of my favorite Flash mob dances: Liverpool Station, and Can’t Touch This, and a website that I created about the dangers of spontaneous dancing. Enjoy!
Thinking about attending Adobe MAX to hear Denise speak? Register now and don’t forget to use promo code MXSM13 during registration for $300 off!
When you think of creativity and gaming, Richard Hilleman is a name on the top of any list. He’s an American computer game and video game producer best known for his work creating the original Madden Football game for video game consoles for Electronic Arts. Today, Rich Hilleman works for Electronic Arts as Chief Creative Officer, and currently works in the internal University at Electronic Arts on specialized education for Producers and Development Directors. We are excited for Richard to speak on “The Magic Bullet of Web Gaming” at Adobe MAX, sharing his unique insider knowledge covering over 30 years in the industry. Check out our Q&A with him below to get a better sense of how Richard came into his great gaming success.
Adobe: As a kid what did you want to be when you grew up and did you ever imagine that you would be making video games that are so ingrained in American culture?
Richard Hilleman: Videogames showed up for me in High School. My exposure was more to computers. I was lucky enough to get to spend time on computers at a very early age in a very early time. I was pretty sure computers would change the world, but not in the ways I have seen. How quickly computers have become situationally aware has been a big surprise.
How did you get started in gaming? Was it be accident or by design?
It depends on what you call games. Unlike a lot of people in my industry, I played sports, and my grandfather raced cars. We played a lot of board games, and I took Chess very seriously. I never really got the war game or D&D bug, and my interest in Videogames was mostly centered on simulations. When I came to Electronic Arts, I came to focus on computer science. Over a couple of years, I discovered I was pretty good at game design and production. Probably because I wasn’t making games for just myself.
Obviously the tools you use to create games are different from when you first started but is there something about game creation that hasn’t changed?
People. The most surprising thing about the last thirty years is how much people’s taste and interest has endured. I talk all the time with kids in school for our business, and the most important advice I give them is to fall in love with people, not machines. The technology moves so fast, that educational investments in specific tech almost always has less short term value than you think. By comparison, understanding people, and the culture they occupy, will transcend the technology and give you a lifetime of returns.
What keeps you up at night or what drives you to keep making games?
Mostly my kids. I have been lucky enough to spend most of my career at the bleeding edge. I still can’t wait for the future and what we can do next.
To be successful sometimes you need to fail. Can you recall a project you worked on that did not turn out as planned and what did you learn from that process?
I think I have failed a lot. I remember a few years ago there was an Edge magazine article about the 500 best Videogames of all time, and the Worse 100. I had enough entries in both lists to keep me humble. Most of the time, when things go wrong, it was because something I knew was a risk, didn’t work out. Usually, it reminds me about taking appropriate and balanced risk. There are a far number of happy accidents, including some of my most successful titles.
What’s the best part of your job?
The kids that are doing the job for the first time. They reinvigorate me every day.
You grew up playing hockey so is that your favorite sport? What’s your favorite team?
Hockey is one of my favorites, and I still play it. I also played a lot of Baseball (Hockey and Baseball are perfect season compliments), and I love motor sports. I grew up a North Star and Twins fan, and then the NStars moved. I have been a Sharks season ticket holder since they were founded, and I had Giants Season tickets for a decade.
If you could start over again, what sport would you like to try or master and why?
Might have started motorsports earlier. Might have tried harder at Golf. I think I made pretty good choices.
Do you play any non-sports related video games? Which ones or do you go old school and play board games?
I play everything. I truly love Chess. I still think it is the best game ever invented, and I find the games of Morphy, Fischer and Kasporov to be as interesting and wonderful as any game I have ever made.
This will be your first time attending Adobe MAX as a speaker or attendee. Can you tell us what inspired you to talk about this particular topic at MAX?
I think I wanted to talk about how different game play expectations are inherited from the platform and gaming context, and how those expectations are increasingly a part of the design of Mobile and Web games. We have a lot of new customers on new platforms. Getting these experiences to match their expectations will decide how long we keep these new players.
Is gaming your thing? If so, it’s not too late to register for Adobe MAX to attend Richard’s session titled, “The Magic Bullet of Gaming” and so much more. Don’t forget to use promo code MXSM13 during registration for $300 off!
Stephen 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.
Interested in winning a full Adobe MAX conference pass, a complimentary annual subscription to Adobe Creative Cloud and VIP seating at our MAX Bash? Here’s your chance! Join our Adobe MAX Speaker Challenge on Twitter and weigh in on which one of these two sessions you’d prefer to attend at MAX this year; Terry White’s session Creating an Engaging Web Design with Adobe Muse or Kevin Hoyt’s session, Animating the Web with HTML – to vote for Terry’s session use #TerryandMuse and to vote or Kevin’s session use #KevinandWeb. For more information on how to enter, check out our full MAX Speaker Challenge Sweepstakes official rules.
For details on our Adobe MAX conference, visit MAX.Adobe.com and be sure to use promo code MXSM13 to get a $300 discount when you register.
Like Marvel’s Avengers, you’ve put together a stellar team. So now what? Creative Cloud for teams not only puts the best tools in the hands of your team, but also enables them to seamlessly share files from any device. Since this offer is still new, we wanted to educate you all on the benefits of joining. We’ve recapped five educational updates about Creative Cloud for teams that we’ve shared on the Creative Cloud Facebook page and Twitter channels. Check them out and embrace the learning.
- Enables better collaboration
You can share files with colleagues inside and outside of your organization.
- Low TCO, best way to stay current
Keep your members up-to-date with the latest software at a low cost
- Members have 1:1 access to Adobe product experts
As a member, you have 1:1 access to Adobe product experts to ensure workflow support.
- Centralized purchasing and license management tools
Creative Cloud for teams makes it easy for your IT department to centrally purchase and manage Creative Cloud
- Users get 100GB cloud-based storage
Don’t let storage limits keep you up at night. Enjoy 100GB of cloud-based storage per team member