Results tagged “Web Design”
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.
“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.
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.
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.
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.
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.
Decorative Logo Types
Texts as Images
Here’s a look at some of the inspirational images depicting the 9 ideas above.
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!
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.
Adobe: When were you first introduced to Adobe Touch Apps?
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.
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:
I’m excited to show you new features and enhanced features in version 1.5 of Adobe Proto. V1.0 was just porting Android version to iOS native version and this time we could implement new feature sets based on user’s feedback.
Mainly, we focused on easy to share files, copy & paste workflow. Here is the new feature sets.
Sharing zipped file easily
“Email” interactive wireframe (html.zip) as attachment
You can now email your interactive wireframe directly from Proto. Just attach html.zip file onto email and send it to your co-worker or client. The attachment is a zipped file and easily uncompressed and ready to use in Dreamweaver or any other HTML/CSS editor.
“Share” interactive wireframe via Dropbox and other Apps
If you have Dropbox application installed on your iPad, you can share your interactive wireframe zipped file right away.
Copy & Paste improvements
Copy & Paste objects to different pages
We added a clipboard icon in editor. Now you can copy & paste your object form one page to another from the clipboard menu, top navigation or context menu.
Paste and Pin objects across selected pages (i.e. share objects across pages)
Not only can you paste objects to a different page, we added a new function “Paste and Pin.”
Pin across pages
Select object and from context menu, you can set to paste the current object across all the pages. Once you did this, the object will show up to all the pages and whatever you modify this object will reflect change across all pages.
Global Menu (By default, Menu bar objects are pinned across all pages)
When you create menu and create multiple pages, the menu will automatically carry over all the pages. When you edit text inside menu, edit links to pages, the change will reflect across all the pages. There is another improvement for code generation for the global menu. Proto generate common.css that is used for all the pages.
“Bring Forward” “Move Backward” Z-order change via Context Menu
You can manage z-index order for overlapped objects from context menu.
Lock and Unlock object for editing
You can lock & unlock object. This helps you to avoid mistakenly moving object while editing another object closed by.
Show current page name while previewing a project in the App
At preview mode, you can see current page name in title bar right next to project name.
Rename project name in the action bar (title) of the editor
You can rename project name in organizer mode. You can now edit project name while in editor mode. Simply tap project name on top left corner to edit current working project.
Show undo/redo count
As same as Adobe Ideas, you can see the number of undo/redo count when you perform undo/redo
Objects should snap to both CSS Column and Design Grid
Now, it’s much easily and precisely snap object onto grid.
Better Code Generation
Code generated is now ordered according to the appearance in the page and so is now more structured hierarchically V1.0 generated divs based on the order of the object modification. V1.5 generates divs based on top to bottom order in the screen.
All pinned objects generate a separate common CSS file (common.css)
Since pinned objects are used in multiple pages, having separate common CSS make you easy to manage code.
We hope those new feature sets and enhancement feature sets will help you boost up your creative workflow.
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!
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.
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.
Follow Us on Twitter
Upcoming Create Now World Tour Events
Upcoming Ask a Pro Sessions
Previous Ask a Pro Sessions
- Leonie Rafter on Behance Creative Spotlight: Steve Simpson
- Nano Kanpro on Tools For the New Creative
- Chris Dickman on Tools For the New Creative
- Serendip7 on Tools For the New Creative
- Adobe Creative Cloud hits 1 million subscribers, Projects Mighty and Napoleon available in 2014 | tekifeed.com – Gadget Feeds, Gadget News and more! on Tools For the New Creative