It is widely accepted that responsive design is needed to accommodate mobile, tablet, PC and a growing proliferation of devices and situations where a ‘website’ needs to be both functional and beautiful. However, spare a thought for the poor graphic designer who needs to design and carve up all those different PSD files for the many layouts and visual elements needed.
In such a world, what are the tools we’re looking to at Link Digital to make the process of generating a responsive design easier and more effective?
Well, the short answer is we are still working on a new non-linear design process for responsive design. But, here is a short round-up of what graphic designers can look into to get their own web design processes looking more responsive.
For Adobe PhotoShop users
- Sliced PSD files are on the way out.
- PhotoShop is moving back to being more visual/image based.
- Adobe are moving the tools around the platform and making brand new tools (Muse etc., see below).
For Adobe Illustrator users
- Artboards are used in Illustrator so in theory you could use these at different sizes to produce different graphic versions – But it will not produce HTML files – just the graphics.
- You would use Illustrator to produce SVG – a HTML5 graphic standard – example would be http://svg-wow.org/camera/camera.xhtml (requires no plugins etc.)
- So in Illustrator you can…
- “Save for web” exports parts of a site in JPG/PNG/SVG etc
- Produce the raw SVG files for animation
- New Document Profiles for web and devices - Set up new documents with pixel-grid alignment from web and mobile device profiles, which also include relevant dimensions, colour groups, and more.
For Adobe InDesign users
- InDesign has better interactive features – Exporting to HTML, EPUB3, or .folio for Adobe Digital Publishing Suite.
However… The real game for responsive design is over with Muse
and Dreamweaver + PhoneGap 2
Adobe Muse
- See http://www.adobe.com/au/products/muse.html
- Create HTML websites without writing code with Adobe Muse software.
- Right now it’s mainly tied to Business Catalyst – but there should be a Dreamweaver version coming soon…
Dreamweaver + PhoneGap
- For the Dreamweaver part see http://www.adobe.com/devnet/dreamweaver/dreamweaver-mobile.html
- And for PhoneGap see http://www.phonegap.com/ - an open-source development framework for building mobile applications.
For the record, the design process we followed for the Department of Human Services was based on a primary set of PSD files and we are using that same approach for our work to improve the responsive design for the Canberra Theatre Centre and a new website for Prime Minister and Cabinet. However, we can see that the end is nigh for this approach with PhotoShop.
Being pixel perfect is just not viable when those pixels are all over the place. Time to build a new school approach.
35 Comments
I agree. Why would you bother?
Well… design is kind of important. So I’d start with the baseline that you would bother to design a great site. From there you then look at improving your process as you want to be able to develop effective design using an efficient process.
I don’t at all dismiss using PSD files even now, as careful attention to the detail will definitely generate a great result. I’m suggesting that this approach will just need to evolve rapidly in order to meet the responsive design requirement.
More than what I can think off, I leave design to someone else
I haven’t designed a website in Photoshop for a while now just because it’s so simple to do it with 3rd party platforms like WordPress, but sometimes it’s a must. There are a lot of great ways to outsource the coding of it if you’re just a designer too. There are even some talented people on Fiverr.com that do an amazing job of even turing a PSD into an editable WordPress template.
haha – some talented people here too
Its all about endless possibilities
I agree as well, but I think it is all good news for everyone as Adobe (yes Im a fan) and everyone evolves to give people what they need/want/demand.
Yep – learning is fun. New challenges keep it all fresh.
Very interesting
Good Stuff. Do Designers Care About Spelling? Like Dreamwearver
I’d say they do, but it isn’t a primary concern
I must admit it’s been a long time since I sliced up a site, with all the alternatives I’m surprised anyone still does it.
Yeah, we don’t literally slice sites – such as some designers might do with Adobe Fireworks. But, using a grid overlay in a PSD to orient and align a site around primary regions is still a pretty typical approach for many I’d say.
The translation from such concepts to a website depends on the CMS being used and in some way the way the development project needs to run.
How wonderful to learn here……thank you kindly.
Actually some learning for me. Thanks for the post
I haven’t designed for a website but using some build in web design like wordpress, webspawner,,, and found there a lot of interesting way to build the design !!
People have no idea how much work goes into a good website. I’m typically involved more in the strategy/content/wireframing stage of very large sites as we work with complex national organizations. Creating sites in WordPress is fine for new sites and smaller companies, but big groups need much more — and, often, they already have huge sites that have grown like bamboo. Which makes it so much harder since they need to develop responsive sites now. I’m hoping that groups take the opportunity to stop and think about how users actually interact with their sites — smart organizations see that this is the perfect time to redesign and streamline for today’s web.
Its true, there is a lot of work and it should never end. A vibrant and active site should always be up for scrutiny, especially is it fails to deliver or falls behind in what is required over time.
Content strategy over the long term is also extremely important, to both nurture growth and to cut back the ‘bamboo’, as you put it.
Nice post, but usually people starting business must outsource web design, So this way webdesigners would have some work. WordPress give a lot of possibility to use 3th party scripts web design different tips and tricks. So if you are designer is good to learn all that stuff. If you are able to do alone is good.
WordPress is far from the best solution for every situation, even if it is a great choice for many. It is better to understand things from first principles and then let your tools be selected based on an deep knowledge of what you want them to do for you.
Where does a design start money wise ? Probably not with a fiverr except for an initial chat over a cappuccino ?
Good design costs money. It is hard to do it cheap because there is no end to where you can cut corners, and yet each corner cut is a decision to not invest in a better potential outcome.
I’ve dealt with a number of clients who just want ‘X’ and they want to know how much that would cost. We’ll, I’m sure it would be pretty cheap if we sold 2,000 of them all the same. The trouble is, they aren’t all the same, each site needs to be an answer to a new set of questions and the process of asking those questions is fundamental to the quality of the design outcome.
In some cases, due to the confabulation of experience, I’ve presumed to know what a client will want and I’ve pitched them on a design outcome without leading them through a design process. Those jobs might turn out OK, but they will never exceed expectations as you have created a false limit on the outcome right from the outset.
This is why I outsource design. Have learned the hard way some time ago that being able to code and use photoshop doesn’t make me a designer.
I used Dreamweaver a long time ago (5 years) not recently, keeping it simple now.
Beats me!!
Finishing touches and testing are all part of good design!
I have taken part in the web design process. In fact, I am in the process right now. I have a couple of designers that still slice up a site design but nowadays I just outsource it to a 3rd party and they do whatever it is they do. I’m not concerned with the products they use, but rather the end result.
I only ever used Photoshop and Fireworks to edit my graphics and images. I never sliced my websites and preferred to use HTML. Honestly, however, it has been a while since I worked for a client. I started professional blogging instead and gave up designing a long time ago. It sounds like things are really changing.
Over my head, but will pass this on.
Takes a lot of work.. I have been both involved in content and design.. So ,uch work in cintent.. designers make it look easy even thought I never designed any in code!!
I do not get involved to much in the design.
Don’t use sliced files for websdesign. Very bad for search results
Definitely a nice guide on using the Adobe Suite.
Hey mate,
Personally i find that splicing in photoshop is that much easier. I tend to give this task too the new graphic designers and as we need them for more “fun” jobs then they get passed up and the new interns get these jobs. FInd it makes them respect their new jobs all that much more.
Josh
A bit beyond what I do. I’ll pass this along to a friend of mine who mainly uses Corel but is up for anything.