How to layout your next website…. on your phone.


By Web Designers Academy

Inspiration hits at the most random time. 

Like yours, my brain is constantly flying off the rails of a crazy train.

Some are great thoughts like the how how to create a multi-person interactive movie controller (true story), why does Florida homeowners insurance give you  protection against ice and snow damage and what would be a better taco topping guac or salsa?

Some are a complete waste of time like why do I sneeze when I use body wash? I always thought quicksand was going to be a much bigger issue in my life than it actually is. Monopoly has a monopoly on Monopoly. A pencil without an eraser = confidence.

Anyway, if a design for a website strikes that is a little harder to #1 remember and #2 get out of my head without the need to use paper and pencil (what is this the 1800’s?).

But Adobe just released (actually updated) something that’ll take the pressure off… it’s called Adobe Comp… and it’s awesome.

I want to show you how it works as it will save you time when initially designing a website… it’s a lot faster to take a 10 minutes and draw blocks with your fingers than it is to take a few hours to design it in WordPress (and then you realize you hate it and have to all start over).

Here’s what you need to be thinking right now Adobe Comp = Saved Time.

What Is Adobe Comp?

Adobe Comp is an app for your device that lets you create layouts for websites (and other things) quickly.  I mean really quickly.  Here is a short (1:48) intro video that shows you how it works:

Looks awesome right?  The best part is that it’s free, you just need an Adobe ID.  Here’s how you can get started:

  1. First download Adobe Comp CC from the App Store
  2. Sign in using your Adobe ID
  3. Create a New Layout (the + button)
  4. Choose any of the web layouts, I recommend the Web (Common) size

NOTE: It’s also available for Android… but you know how much I despise Android, so let’s just forget about that.

Once you do that you’ll be looking at a blank canvas, but don’t worry it’s really easy to make something… just start drawing a simple rectangle (does not have to be perfect) with an X in it to add a placeholder for a photos OR draw a block and add a few horizontal lines to create some latin text (you can styling the text using the T button at the bottom).  You can then move these items around by holding and dragging them.

In regards to photos you can easily add in tons of stock photos from Adobe Stock, just do this:

Once you have a few blocks draw out, there is a cool way to duplicate items – just select the items you want to duplicate then draw a few plus signs, like this…

Sadly that technique does not work in real life… I tried….

Get The Ideas Out Of Your Head (Anywhere)

What’s really cool about this is how fast it is to create something cool anywhere AND that your layouts sync with your other devices.  Last week I was at my desk I started the layout for the WP Triggers Guide on my phone:

and then went outside to sit by pool and fired up my iPad and my design was instantly there where I could pick up where I left off:

and once I tweaked it (and thought about it for a bit) only THEN I took the time to turn that into a real webpage:

If you want to see the final (much longer) web page, go here

So the time-saving process is #1 sketch and tweak in Adobe Comp and once happy #2 make it in WordPress.

Your friend,

PS: For those of you who picked up the Ozzy Osbourne reference in the second line of this post… I salute you… and as a gift, here he is (looking much less scary) back in 1981 performing the song live in Rochester, New York