Learning about Web Design without Photoshop

My design context.

I’ve always been very very keen on drawing and designing when I was a kid and it’s something I’m looking to dive into again as an aspiring front-end developer.

When I started learning web development I often ended up spending way too much tome on tiny design details and still today if I have my laptop and 1 hour of uninterrupted free time (when does that ever happen?) I’ll generally start a design / logo / banner to use on a site or just for the fun of creating.

At the moment I’m into duo-tone images. Those generally consist of a landscape / skyline picture (the more contrasty the better) where white tones are replaced by a color and dark ones by another. It creates beautiful effect that are easy on the eye and not visually competing with your content.
 

The Photoshop disappointment.

So the ‘design’ side of things quickly became something important for me. I often come across front-end projects (I won’t give any name) where the layout, design choices, UI elements and color palette are just so bad that it drags the whole page down. Even something greatly-coded ; if not adequately designed will just remain…. some… thing greatly coded.

Developers are not entirely to be blamed for here. Most design tools are difficult to learn and if you ever tried to tame Adobe Photoshop you’re probably familiar with the following “front-end-dev-trying-to-design” routine:

  1. Installing Photoshop
  2. Opening Photoshop
  3. Trying to create a new document
  4. Being discouraged
  5. Uninstalling Photoshop
  6. Promising never to use it again
     

Does that sound familiar? I bet it does...
 

Photoshop, you old b...

photoshopshow.png

OMG!!!

The reason behind that is that Photoshop was never meant to be a web-design tools and only the last couple of updates and a handful of plugins have transformed the almost 30-year old software into something suited for web-design.

Sketch.

Now, don’t get me wrong, if you want to be a web designer as opposed to a developer, you should probably invest 400% of your time into becoming a star at Photoshop because it’s still the reference out there. But that doesn’t mean it’s the only one…

Here comes Sketch!

Sketch was created by a company called Bohemian and is a vector-based graphics design software that's 100% web-development oriented. You can start creating a web or app interface in 2/3 minutes without having to go through endless formatting settings and editing.

It comes fully packed with templates and “artboards”, those are predefined working spaces that simulates the size of a device / computer screen so you can quickly build you desktop and mobile UI side by side.

The system of layers is (unlike) PS very easy to tame and at any given time, you will only see the options/tools that are relevant to the shape/layer currently selected so confusion is reduced to a minimum.

For example, here’s a Nike landing page I was able to design in about 10/15 minutes.

It's not the best layout but Sketch allows you to quickly elaborate web layouts.

Sketch is really easy to use and has the following advantages over PS:

  • Photoshop is a photo editing tool that's been modified to suit the needs of web-designers. Sketch was designed with web-design in mind. The first tool inserts a shape, specifically a rectangle. This is usually the first thing one does in designing a UI. So, the relevant tools are front and center and the irrelevant ones have disappeared. This makes Sketch way easier to learn, and actually possible without a guide or tutorial.
     
  • It's faster -- have you ever opened a PSD on Photoshop and lived to regret it? 
     
  • It's extremely light, no RAM-hold-up!
     
  • It renders fonts better than Photoshop. Photoshop has an internal text rendering engine that lets fonts look different than they do in a real browser or phone. In fact I use fonts a lot when designing banners and this is critical to me.
     
  • Learning curve on Sketch is amazing, you will become an expert at it in a week.
     
  • Another aspect is the monthly pricing scheme. I personally prefer paying upfront to use the software for as long as I want rather than paying every month and ending up paying a lot in the end (over a period of 2 years, PS would cost about $600, yes that’s a 6 followed by 2 zeros…). Sketch sells at $99 period.

 

Plugins.

Sketch has lots of advanced plugins that will make your work easier. For example:

 

SketchDistributor distributes selected objects vertically or horizontally with a specified spacing.

- AutoLayout lets you resize content responsively on the fly.

- Content Generator. That one is a true geme! It generates content (images, text, lists, etc.) that will automatically populate the content areas you have created. Watch it works it magic!

userpics.gif
1
2
3
function getRidOfTheBloating(photoshop) {
  .............
}

I was cruising in UpWork the last couple of days and I came across an ad where the client provided a link to the assets they wanted to use for their landing page (keep that in mind, 1 single landing page). I was curious and wanted to give it a try so I clicked and ended up downloading a 514MB-heavy .psd file, all just for a landing page with 3 sections, a couple of buttons and background images…

Keeping in mind that those images will have to stay within 400/500KB for best loading speed and site performance, you can imagine what’s ahead of you as a developer when you’re being handled this type of assets.

 GIF by  Gal Shir

GIF by Gal Shir

 

If you enjoyed reading this post, feel free to share it and let me know what you think in the comments section down below.

:)