Parameter name: request
Translate Request has too much data
Parameter name: request
Adobe Illustrator isn’t the design tool of choice for most people who make the web. Interface design, bitmap creation, pixel perfect image manipulation; all tasks which have typically been better handled by other applications. The web is undergoing big changes, however, and the role Illustrator can play in a web design workflow is changing too. Let’s find out how!
Recently I wrote about Photoshop’s Role in a Web Design Workflow, an article prompted by changes to the industry and what we know as “best practices”. I recommend you go and read it (obviously), but let me quickly summarise.
A decade or so ago, during the transition from print to web design, Photoshop was a very helpful tool which allowed designers to continue the workflow they were familiar with.
Classic graphic designer’s workflow This workflow comprised a few simple stages; designing, presenting a proof to the client (perhaps a PDF for example), then after a few rounds of feedback outputting as a final product. It worked for print and it would work fine for the web.
However, this approach led designers to push for a pixel perfect version of the final product, before even thinking about building. These PSD comps (comprehensive layouts) gave designers the opportunity to fine tune every last detail, before committing to the ghastly process of recreating a facsimile for the browser.
Amplius – PSD Template on Themeforest It turns out this was an imperfect process, but it’s only since the rise of Responsive Web Design that we’ve really started to appreciate that fact. Responsive web design allows websites to flex and alter to their surroundings; the same website can appear vastly different on a large desktop screen compared to its mobile counterpart. It can even appear differently in different browsers on the same screen – and that’s okay.
How does this affect the design process we’ve just discussed? It means that, in order to demonstrate a product to the client, we would need to produce proofs for a variety of resolutions:
Printgram on mediaqueri.es That’s not the end of the world though – we’ll just spend the extra time (I’m sure the client will foot the bill) and work a bit harder. What about the feedback loop though? If the client decides they don’t want search functionality, we’ll have to erase it from all the various comps! Nightmare!
And there’s no set range of standard resolutions either. We know how big an iPhone 5 screen is now, but that will change when Apple release a new phone – and in the meantime there’ll be four thousand other new devices on the market. We simply don’t know how big screens are, or how our websites are being accessed.
We all have tools which we’re most comfortable working with, and there are web designers who use Illustrator for that reason. It’s not as common to see full blown comps produced in Illustrator, but it’s perfectly possible (Illustrator even offers us the dreaded slice tool) so why not? We’ve featured tutorials on Vectortuts+ approaching things in that very way.
Use Adobe Illustrator to Create a Clean Website Layout For the workflow reasons outlined above however, it just doesn’t make sense to approach things in this way any more. It’s inflexible. Again, if you read my previous article on Photoshop’s role in web design, you’ll find this discussed in more detail.
We need to find a more flexible workflow, which means going modular. The web design process can be split into logical sections:
Wireframing which lays out elemental relationships, visual hierarchy and basic levels of interactivity. Wireframes can be extremely simplistic, through to more detailed (hi-fidelity), but never break beyond the boundaries of their core purpose. Read A Beginner’s Guide to Wireframing for more information.Aesthetics which define how things will look. Branding, colours, typography, textures, even the voice and tone of a project. Sketching can form an important role here, as can mood boards and Style Tiles.Prototyping takes a lot of the information decided in the previous steps, building into a rudimentary, but functional browser-based model. Using frameworks such as Zurb Foundation and Bootstrap allows rapid prototyping to give solid, working results in relatively little time.Splitting the process into modules such as these allows clients to give feedback and sign off on each stage individually. Diving back into the mood boards and altering the branding colours is much easier than editing the same aspects of several detailed comps.
Once the process has reached a suitable conclusion, everyone’s happy and the final product can be built. Of course, this process can include a load of other modules too, which leads us (finally) to talk about Illustrator’s role in this arrangement.
Illustrator can easily turn its hand to a number of aspects in this workflow, so why not use it? Wireframing with Illustrator is possibly the best match here; shape tools and highly controllable typography make Illustrator ideal for quick wireframe layouts.
Frameworks such as Zurb Foundation, which I mentioned earlier, often offer vector kits with all their interface elements, ideal for wireframing. And if the frameworks themselves don’t provide one, you can bet someone in the community has built one anyway!
Zurb Foundation’s PDF stencil set 
Twitter Bootstrap Illustrator file Leverage symbols too, so that you can work in a non-destructive way. Saving resuable elements as symbols enables you to drag and drop, making changes across the board if needed. Having whole regions (such as the footer, navigation, comments area) available as symbols will save you bags of time.
Janko Jovanovic’s free wireframing kit is an oldy but a goldie Character and paragraph styles help your non-destructive workflow even further. Set certain styles for each typographic element within your wireframe (size, weight, font) and apply it to all relevant pieces of text. If you need to alter the size of your headings, do it within the character styles panel and watch the changes take effect across your whole document. Just like CSS and web pages, when you think about it..
Improvements to Adobe’s Creative Cloud have seen Typekit (their recently acquired web font service) integrated into many applications. From Illustrator’s characters panel it will soon be possible to select any number of web fonts, to give hi-fidelity wireframes extra detail if needed.
Lastly, while still on the topic of wireframes, come multiple artboards. These will help you display different states, different resolutions, different pages, all within the same document. Save your artboards out to a single PDF if your client favors that method of presentation.
I’ve been using vectors for years. Good old reliable vectors. I first encountered them thanks to CorelDraw! back in… I’ve no idea when. My first business was in signwriting, using dubious vector software to cut sheets of vinyl for stickering up boats and vans. Later on, I moved into web design, which at the time included Adobe Flash (hmm) so also, to a degree, vector tools. Eventually the transition was complete and I shifted into code editors and forgot about vectors to a large extent.
Why am I boring you with all this? Well, because the Circle of Life™ has come around once more and vectors are again playing a role in what I do for a living; web design. Wahoo!
You can thank Apple for this. Although they weren’t the first to manufacture a hi-pixel-density screen, their Retina Display certainly took the concept mainstream. Consumers across the globe grinned ear to ear at the prospect of super-crisp displays; web designers wordwide gasped in horror as their bitmap-based websites turned to pixelated rubbish overnight.
This was just another example of websites behaving in ways we hadn’t expected. More evidence that we need to be as agnostic as possible in the way we build.
Happily, browsers are good at handling vectors these days (although very complex, million-noded mayhem will impact performance). We can use SVG (Scalable Vector Graphics) which allow us to output our vector artwork directly to the browser, just like we’ve always been used to with bitmaps.
SVG files are effectively XML at heart, so the more daring amongst us can open them up in a code editor and play around with the inner workings – even hiding multiple images within the same file for display under different browser circumstances!
In order that our websites are immune to variations in pixel density, we need to rely on browser-generated graphics as much as possible. Slicing up bitmaps to decorate our pages doesn’t cut it any more. Thankfully, CSS has come a long way in past years and will now help us out with rounded corners, gradients, even patterns, so we no longer need to lean on bitmaps for these things. In fact, this move away from highly textured and polished bitmap-based designs has prompted a trend in Flat design, though that’s a subject for another article.
This is very important actually; the fact that Illustrator is a vector graphics tool and vectors are suddenly an important part of resolution independence, is the key to its renaissance in the world of web design.
The web designer’s love affair with icons is as old as the industry itself. Who hasn’t found themselves eagerly saving gigabytes of .png files on their external drives at some stage?!
The colossal and brilliant Fugue icon set For the reasons described above however, bitmap icons are problematic these days. Instead, we can now use webfonts, which allow us to map icon glyphs to the font characters and display in the browser as “type”. In fact, we recently ran a community project which collectively built a webfont icon set:
The Any Old Icon Tuts+ community driven icon set Using services like Icomoon you can upload your SVG icons, map them to the characters you want, then have them output as a webfont package really easily.
You can even display logos in this way; mapping them to a series of characters as a ligature:
If you’re interested in learning more about this, check out Your Logo, as a Web Font Ligature
By using vector based SVG files and webfont icons, we overcome any resolution problems. Thank you, Illustrator.
We’ve discussed how it’s possible to use Illustrator in a web design workflow, but what do Adobe think we should be doing? They recently announced several improvements to Illustrator (along with their whole Creative Cloud collection) including some attention to CSS Export.
This is a feature already present in Photoshop as standard, or as an extension for older versions, and Adobe obviously felt it important enough to integrate into Illustrator. If you enjoy designing elements and effects in Illustrator, you’ll soon be able to output those object styles as CSS, to directly paste into your code editor.
Is this useful? Maybe. Can it form a legitimate part of a web design workflow? It’s not for me – though it’s important to note that each individual is fully entitled to approach things however they want! Whatever works.
Adobe certainly aren’t leaning on Illustrator as their web design tool of the future. That used to be the role of Fireworks, but they recently sent that to a Dignitas clinic in Switzerland. Instead, Adobe are heavily investing in their open source code editor (which is brilliant, by the way):
and the rest of their Edge suite of flexible web tools, such as Aaron Shekey’s Reflow.
Reflow is set to integrate very well with Photoshop and Illustrator; sharing assets, fonts and processes for a combined web design workflow. It’s worth noting that this isn’t intended to be a website manufacturing machine, but very suitable for building flexible prototypes, as we discussed in our modular workflow.
Stop designing hi-fidelity website comps in Illustrator! Not because it’s against the law, or that your family will disown you, but because you can use Illustrator more efficiently and to much greater effect. Embrace the prospect of a new, modular web design workflow and keep an open mind as improvements are suggested.
And now for the inevitable comment-prompting question; do you use Illustrator to design for the web?
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন