When I first started dabbling in web design many years ago, I used Adobe Photoshop as my tool for mockups, if for no other reason than it was the software I was most familiar with. At some early point during my career, I made the switch to Adobe Illustrator. I doubt the switch was made by choice – it was probably the result of a previous workflow I needed to adapt to.
Web design and development services in the early 2010s seemed to be surrounded by “PSD to HTML” offerings from a number of companies. You provide a layered Adobe Photoshop file, and in return you’ll receive HTML files of your design. Designing in Adobe Illustrator always made me feel like a black sheep – it seemed like nobody was doing it. And as I grew to love designing websites in Adobe Illustrator, I began to wonder why people still used Adobe Photoshop for that type of work.
Why I Prefer Adobe Illustrator
I feel like website design up into the early 2000s was plagued by sites comprised largely of images. Design the site in Adobe Photoshop, slice it up, export the images and drop them into an HTML file. I’m ashamed to admit that I was guilty of it.
As website design has evolved, it has become simpler. The prevalence of highly detailed backgrounds and decorative elements has been replaced with simple lines, clean text, and other elements that are easily created by Cascading Style Sheets (CSS) alone.
I would argue that the vector work in Adobe Illustrator is a closer representation of the type of results achievable with pure CSS. Adobe Photoshop is a great tool for altering images and adding text, effects or overlays to elements, but it’s not the best tool for mimicking what is doable with just HTML and CSS. The simplicity of vector graphics in Adobe Illustrator provides a very accurate representation of what can be done with CSS. Plus, I find it easier to scale and move objects within a design when something needs to change.
It’s also worth pointing out that image-heavy websites will result in long page loading times (a negative in the SEO game). It is much faster for a server to deliver a bunch of characters to a users browser than it is to deliver a bunch of images. Designing in Illustrator makes for a more intuitive solution for creating graphics that can be replicated in CSS, rather than having to export elements as graphic files.
Other Software Solutions
As time has progressed, other software solutions have of course become available. There is Adobe XD which they tout as “the fastest way to design, prototype, and share any user experience, from websites and mobile apps to voice interactions, and more.” Bohemian Coding’s Sketch has become a popular alternative (for MacOS users) to Adobe Illustrator. And let’s not forget about the slew of website builders out there (think Wix, Squarespace, Weebly). These are arguably geared more toward consumers building their own websites, but I know there are agencies using those services to build client websites.
For me, I’m so deeply entrenched in Adobe’s offerings that I’ve found it hard to really pursue other design solutions. I regularly use Adobe Photoshop, Illustrator and Dreamweaver, and occasionally use Adobe Premiere, After Effects and InDesign. To find replacements for each of these, then learn how to use them and work between them, is a time commitment I haven’t been able to justify. And if I need at least 3 pieces of software from Adobe, I might as well pony up for the Creative Cloud All Apps subscription. While I could probably find alternatives to my software needs at a less expensive price, I find it hard to take that leap without knowing how much time and frustration will be needed to overcome initial learning curves and unforeseen technical challenges. Plus, some comfort can be found in knowing Adobe won’t be closing up shop and abandoning users anytime soon.
I suppose my love of designing websites in Adobe Illustrator stems both from familiarity and convenience.
What is your preferred method for creating website design mockups?