Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (7)
Recently uploaded
Recently uploaded (20)
Beyond Photoshop: Modern Tools for Modern Web Design
- 1. BEYOND PHOTOSHOP Modern Tools for Modern Design Teams
- 2. The web has changed a lot in the last 10 years.
- 4. Apple – March 10, 2005 (I totally still have this iPod.)
- 5. Apple – March 10, 2015 (I’m totally not getting this watch.)
- 6. A List Apart – March 10, 2005
- 7. A List Apart – March 10, 2015
- 8. Booz Allen Hamilton – March 2006
- 9. Booz Allen Hamilton – March 10, 2015
- 10. Siteworx – March 10, 2005
- 11. Siteworx – March 10, 2015
- 12. Browsers have changed a lot in the last 10 years.
- 13. 6 1 7.5 1 0 11 8 27 36 41 7 12 33 39 42 0 5 10 15 20 25 30 35 40 45 Version in '05 Version in '15 # of Releases
- 14. The tools we use to build websites have changed a lot in 10 years.
- 15. 2005
- 16. 2015
- 17. The tools we use to design websites have changed a lot in 10 years. Not.
- 18. 2005
- 19. 2015
- 20. Photoshop is not an ideal tool for web design. Pros: • It’s great for bitmap editing • We’re all super comfortable with it Cons: • It can be slow and sorta clunky • File sizes get huge • It’s hard to keep UI elements consistent between files • It doesn’t include a built-in grid • It’s expensive • Can’t show interactions or animations easily
- 21. Photoshop is not an ideal tool for web design. Pros: • It’s great for bitmap editing • We’re all super comfortable with it Cons: • Vector handling is sad. 3 words: Rounded rectangle editing • You can’t put multiple borders, backgrounds, gradients, or shadows on the same object – but you can with CSS • It doesn’t auto-save that frequently • It doesn’t have version-control
- 22. We need new tools that better reflect our medium. The web.
- 23. great in theory, not super realistic. Design in the browser: • Demands a different, vastly wider skill set for visual designers. • We need ways for designers to do what they do best without getting caught up in code. • We need ways to show multiple ideas, variations, stages, content differences, etc. • We need a way to get client sign-off.
- 24. great in theory, not super realistic. Design in the browser: • But we also need tools that foster a web/browser-oriented way of thinking. • Tools which encourage modularity, the use of flexible grid systems, visual consistency, and consideration of dynamic content. • We also need ways to design and demonstrate interactions. (Besides hand gestures, sound effects, and other people’s code.) (my personal favorite.)
- 27. Pros: • Unlimited projects, team members, storage • Secure and managed by an internal admin • Advanced prototyping tool with mobile and desktop support and a low learning-curve (does not require additional skills) • Really nice presentation tool which could be customized with Siteworx branding • Could basically replace Confluence as a place where we store and manage project assets – has better project visibility and is nicely organized
- 28. Pros: • Commenting on designs would be a nice way to provide additional information or specs for dev team • Seamless integration with JIRA • Designers are not limited in their choice of design tool – supports PSDs and Sketch file types along with all the regular ones (jpg, png, etc.) • Automated version control and updating with InVision Sync Mac application – you wouldn’t have to upload files to confluence and then replace them within your prototype. This is all managed within a single tool and automated when you save your source file.
- 29. Cons: • It’s not a panacea – designs will still need to be produced in a different tool, but with automated file sync, it’s easier to keep InVision projects updated • Prototypes are not as sophisticated as what can be produced in Axure • Enterprise version isn’t cheap
- 32. Pros: • Cheaper than Photoshop – Single license is $99 and you can purchase multiple licenses and volume discounts are available. (I plugged in 20 users to get a general quote and it ended up being about $70/user, before tax.) • All the properties you use on your designs are possible in CSS, so it’s more realistic to the browser • Dimensions, ratios, positioning and styling is all more visible and easily accessible within a single inspector panel • It’s similar to Photoshop – designers will be familiar with overlapping features like consistent keyboard shortcuts, layer blending, styles, blur, noise, patterns, ect.
- 33. Pros: • Large and expanding community – there are tons of articles, videos, and training tutorials online and available for free • Native application – don’t need to be online to use it • Fast and lightweight • Focus is on interface design – more realistic to our medium • Built-in device previewing with Sketch Mirror • Automated integration with InVision
- 34. Cons: • Does not have all the filters and photo editing capabilities that Photoshop has • Does not have built-in prototyping or collaboration • Sketch Mirror is an additional $5 app • There will be a learning curve and for a time, we may need to use a combination of both Photoshop and Sketch
- 37. Pros: • Combines features of Sketch and InVision in a single tool • Can wireframe, design, prototype and collaborate • Browser-based – designs can be accessed and edited from anywhere and they’re already in their intended medium • Built-in version control and branching supports multiple variations of a design concept and it’s easy to mix/match assets • Designers with CSS knowledge can tweak design elements in actual code, then had this off for the devs to use as a reference
- 38. Cons: • Browser-based – you can’t use the tool offline • Cost is unknown • It’s not ready yet. Currently in private Beta
- 39. In conclusion… • The present is bright – the future’s even brighter. • Photoshop isn’t an ideal tool for responsive, modular, interactive, interface design. • Sketch is ready for professional usage right now. • So is InVision, and both are already key tools for a lot of well-regarded forward-thinking design teams
- 41. Our field has changed in every aspect – why shouldn’t we? With open-mindedness and a willingness to try new tools, we may find ourselves surprised and empowered.
- 42. Thoughts?
- 43. Thanks.
Editor's Notes
- Hi everyone! Today I’d like to talk about some new tools that I think we should consider incorporating into our design workflow. We’re all really comfortable using Photoshop. And it was a great tool for web design 10 years ago, when sites were static and browser capabilities weren’t as advanced as they are now. But there are some new tools on the market that are made specifically for UI design whereas Photoshop is, and has always been, a great bitmap editing tool. So let’s just jump right into it!
- The web has changed a lot in the last 10 years. Now, I know what you’re thinking. (click)
- But seriously, if we take a look at some of our favorite websites, then and now (click)
- We can see how drastically they’ve changed. (click)
- We now have responsive web design (click)
- And our designs have to be flexible enough to be viewed from any device (click)
- Websites used to look a lot like brochures. Where the content was pretty static and every site was made up basic images, links, and text, in pretty predictable patterns.
- Now, our designs are immersive. They’re interactive. They tell stories and engage the user. They have dynamic content, personalization, and media.
- One last one here, cause I thought it was kinda fun to see how far our own company website has come in 10 years. Probably the most innovative thing about this design is that the logo is on the right. (Edgy!) My apologies if anyone on this call designed Siteworx 2005. It’s really nice. For 2005.
- But 2005 Siteworx never could have imagined with 2015 siteworx would be like. Modular, CMS-driven, responsive, with web-fonts and video and podcasts and parallax! We’re largely able to do all this cool stuff because (click)
- Browsers have changed a lot in the last 10 years. (click)
- In 2005, Microsoft was rockin IE6, Safari and Firefox were on their first releases, and Chrome wasn’t even a thing yet. (click) Now, in 2015, we’re on IE11, Safari 12, and (click) Firefox and Chrome have had 39 and 42 releases. I realize this bar graph is a little misleading…this is why I don’t make the all-hands presentations. So as browsers have evolved, (click)
- So have the tools we use to build websites.
- In 2005, developers were using a handful of tools to write HTML (or DHTML or XHTML or whatever version it was back then), CSS, and javascript. Flash was pretty big. It was the only way to do really cool animations and effects and Actionscript was a coveted skill. Now, we did have dynamic content with PHP and AJAX and XML, but the tools to write and render these things were pretty limited.
- Flash forward to 2015.(click) Not only have html5 and css3 changed the way the web is built, (click) we have javascript libraries like jquery and jquery mobile. (click) MVC Frameworks like Angular, Ember, React and Backbone. (click) We have CSS preprocessors, (click) front-end frameworks like foundation and bootstrap. (click) We have task runners and automated scaffolding and cross-browser plugins and polyfills and localized servers and way better code editors and collaborative dev environments. And the number of content management systems out there has exploded and I got tired of finding logos to put on this slide. You get the point.
- Likewise, the tools we use to design websites have changed a lot in 10 years. (click) (click)
- In 2005, (click) most designers were using either adobe photoshop or fireworks. (click)
- In 2015, (click) most designers are using either photoshop or… oh wait (click) There we go. (click)
- But the truth is, photoshop isn’t an ideal tool for web design. (click) It was never made for this and even though it’s come along way in 10 years, it’s still oriented toward it’s primary, original purpose of being a great bit-map editor. (click) And it is a great bit-map editor. And that was fine when websites were static and we had to rely a lot on bitmaps to realize our designs. (click)
- But as we just saw, with the advancements in browsers and front-end dev tools, now our designs can, and should be incorporating things that code can do, but photoshop doesn’t natively support. Stuff like designing for a global grid system, and relying more on vectors like SVGs and icon fonts. Photoshop doesn’t let you put multiple gradients or backgrounds or lighting and border effects on the same object – but CSS does. Oh, but you can still get in plenty of trouble with layer effects in photoshop. Ask a front-end developer how much she loves it when she’s handed a design that absolutely depends on multipled overlays – which is not possible to reproduce in CSS. So there’s a disconnect here. Our designs are being realized more with code – namely css and javascript – and less with bitmaps. But we’re still using a bitmap editing tool to design them, and not always keeping what modern browsers can, or can’t do, in mind.
- Bottom line: we need new tools that better reflect our medium: the Web. Which is responsive, and dynamic, and interactive. How can we capture, design, and communicate a realistic browser experience, with static photoshop mock-ups? More and more often, the answer is, we just can’t.
- Now real quick I just want to touch on something here. A lot of people talk about design in the browser, and how mockups should be thrown out completely. That idea’s a lot like communism. It’s great in theory but not super realistic.
- But just because we aren’t ready to completely throw away static design tools, doesn’t mean we shouldn’t seriously consider using some which foster a more browser-oriented way of thinking.
- So let’s talk about some of these new tools. I’ll start of with InVision before moving on to Sketch and Atomic.
- Invision is a prototyping, collaboration, workflow /project management and presentation tool. I know we’ve used the free version a bit in Raleigh and I think you guys in Reston are familiar with it too. (play) Some of it’s key features are – You upload your designs and add hotspots to create interactive prototypes. The prototypes support gestures, transitions, and animations and they’re supported on desktop, tablet, and mobile devices. Then you can share a link for collaborators and clients. They also have this feature called LiveShare, which is an online real-time presentation and collaborative whiteboarding tool. Invision includes version control for all your design files and with and additional Mac application called InVision Sync, your prototypes are automatically updated every time you save your source file on your local machine. Interactions are retained. The enterprise version includes workflow integration with JIRA, Enterprise-grade (256 bit) security and VIP customer support. You can also have SSO (single sign-on) integration, Custom branding, and Unlimited asset storage and sharing. And it supports all file types from storing your font files to SVGs, psds or Sketch files, etc. As you can see, some really great forward-thinking design teams are using Invision to help bring their ideas to life and collaborate and share their designs.
- Some of the pros, I think with InVision, and particularly their enterprise edition, is that you can have (bullets)
- So with that, the next tool I’d like to discuss is Sketch. Unlike InVision, this is actually a design tool and could be considered an alternative or used in addition to photoshop.
- Sketch bills itself as Digital design software for Mac. It has a lot of really great features which both make it really similar to photoshop, so designers will feel comfortable using it, but also which distinguishes itself from photoshop by being more geared toward interface design. (play) First of all, it’s 100% vector – great for designing for responsive sites and retina displays. Designs will be vector-based, flexible, and resolution independent. But, it also provides pixel information and has snap to pixel – no more ½ pixels yay! The Reusable elements idea is what has me incredibly intrigued and what I think really sets this program apart from photoshop. Sure, you can do some of these things with smart objects and character styles, but in sketch, elements are synced across your artboards and you define pieces of your design as symbols, which are then really easy to use and refer to in other places. When you make a change to a symbol, those changes are reflected everywhere that symbol/layer/text style is used. The Inspector panel is where you manage all aspects of an object in one place. So everything from dimensions and positioning to opacity, blend modes, etc. It also includes a robust export feature. You can export entire designs or artboards, but also individual elements as symbols, and there’s also an option to export at 2x which again, is great for things like logos and icons for retina displays. What’s great about Sketch, is that everything you can do in the tool, can be recreated in code on the front-end with css, so it’s more realistic for our medium. This means you can easily translate things like borders, gradients, and drop shadows because we’re basically using the same language in our designs, as dev will use to code them. I also really like Sketch’s Dynamic grid settings – you can automatically create centered grid overlays with custom and adjustable settings, all within the app. This seems like a really basic feature that Photoshop doesn’t have, but which is crucial to web designers. Couple more things, they’ve boasted about improving their bitmap editing tools in the latest version, but we may still want to rely on photoshop for any heavy lifting. Sketch includes CSS style exporting on shape and text objects which could make a really good reference for front-end developers on some of the finer points of a design, like typography. It also Includes auto-save and versioning. Sketch Mirror is a cool add-on which allows you to preview designs on iOS devices while you’re working on them. I’ve used a tool called live preview in the past, but it’s neat they’ve incorporated this as a program add-on.
- Atomic is the last tool I’m going to talk about today. This is a brand new tool which combines features of both Sketch and InVision. It’s a design tool, AND you can do prototypes and collaborate.
- When I started reading about Atomic, this was my reaction. If you don’t mind, they had a nice, short video on their homepage that I’d like to show you, which gives a nice overview of it’s main features. Gif clicks through to atomic.io homepage with a video.
- (video) It’s scary to step out of your comfort zone. But lots of professional designers and design teams are doing it and living to tell the tale. Enthusiastically.