Do you still believe Photoshop is where beautiful websites are born? We’ve got a wake-up call for you. If like our team, you are a Mac user, it’s time for you to be introduced to Sketch. Sketch is built specifically for modern website demands, but before we go too far into that conversation, let’s cover why Photoshop is no longer best practice for website development.Are you using the best #GraphicDesign tool for your #WebDev team? Find out: Click To Tweet
PSDs Have Come & Gone
In the not so distant past, converting PSDs (Photoshop files) to HTML (computer language) was how everyone created websites.
The process was simple and effective. Here’s how designing a website typically went:
- Design a high fidelity pixel-perfect mockup in Photoshop of exactly what you want your site to look like.
- Use the slice tool to divide your website’s imagery and then export it for the web.
- Write HTML and CSS that utilizes the imagery you exported from Photoshop.
You might already see the problem with this approach.
Websites are (or should be) Responsive
That’s right, websites cannot be so static. Photoshop is great for creating website assets like images, icons and so on, but PSD to HTML means a fixed resolution. Today’s internet user views a site from different devices, each with their own screen size. There are some common/standards, but take a moment to think about just how many internet connected devices you use (phones, tablets, laptop, desktops, consoles, etc). Then consider the device’s screen size, orientation or browser. There are a lot of options available and a website will appear differently on each one.
The websites we build are created and designed with a lot of things in mind. For one, all are responsive. Let’s explain that real quick:
- Full/Desktop sites are designed for desktop and are not mobile optimized.
- Mobile-specific sites are designed for mobile phones. Usually, mobile-specific site links begin with an “m.” denoting that it is the mobile version of whatever site follows the period. For instance, “m.facebook.com.”
- Web apps are a special type of mobile-dedicated site that looks and feels like an app.
- Responsive-design sites are sites designed with multiple devices in mind. They are built so content adjusts for the screen the site is being accessed through.
Out of all the various types of website designs, responsive is the only one that is actually universal. Whether you’re on a tablet, desktop or phone, the user is visiting the same site, seeing the right content for their device. Photoshop can make beautiful images and concepts, but websites that meet this best practice require far more than its fixed resolution.
So what does a designer turn to?
Our industry is turning to a tool built specifically with modern-day, responsive web design and development: Sketch. Sketch can be used for designing interfaces and vector-based iconography as well. The best part is that it allows you to see a real-time preview of your design as it would appear on an iPhone, iPad or web browser.
“I love Sketch. I made the switch some time ago and I haven’t looked back. I was a Photoshop advocate for my entire working life until Sketch came along, and within a week, I was a total convert.”
-Sarah Parmenter (@sazzy), Graphic Designer
In most cases, the tool is actually a drain on time and resources. If you just can’t keep your hands out of Photoshop, try to use it mostly for content development. For example, imagery, GIFs, ads and all those other assets. Plug these items into your layout, but be very communicative with your web developer. They will ultimately be the ones to understand and explain website limitations.#Truth: @KyleJCDesign has strong feelings for @sketchapp. You should too: Click To Tweet
Sorry, PC-using graphic designers, unfortunately, Sketch is not compatible with anything but iOS. And no, there are currently no plans to make it so. However, even Adobe understands the gap that needs filling. Adobe XD, while still a work in progress, does far better for your dynamic sites than Illustrator or Photoshop.
I guess, what I’m trying to say is Photoshop web design is outdated, especially if when there are better solutions out there. One of the greatest (and most exhausting) things about web development and graphic design is the continuous updates to industry standard and best practice. Technology is advancing and so do the tools we use to keep up. It’s an ongoing cycle, and that’s why you have to have a serious passion for the craft if you want any hope of keeping up. We suggest you take a look at Sketch. If you can’t use the app for one reason or another, don’t let that be a setback to your quality of work. Familiarize yourself with modern and practical web design so you can find the tools and tech to provide your clients the best work.
If you’re looking to have your website optimized, refreshed or flat out created, get a quote here!