How to Create a "Website Under Construction" Illustration

Today I'm going to show you how easy it is to create your own “Website Under Construction” illustration using Adobe Illustrator.Hopefully this quick tutorial will inspire you to create something
unique of your own which you can then unleash on the web. So grab a cup of
coffee and open up Illustrator so that we can get started.

1. Plan Ahead

Since the purpose
of doing this type of illustration is to bring some character to your website
that is currently under development, you should consider a few key points that may affect the final product.

To do this, you’ll
have to answer two relatively easy questions:

Number one: How
wide will your main content container be?

This is actually
really important, since you’ll want to have your illustration fit within a
certain space (viewport), especially if you’re doing just the design and not
the coding part.

By doing so, you’ll
have a basic idea of the size (Width and Height) of your illustration, which is
something that you’ll need to pin down by yourself or with the help of your
coding buddy.

Now whether it’s a
960 px wide container, or something bigger
(1024 px), you should always take a
second and decide what other visual elements you will be using, which takes us
to the second question.

The way you center
your information is really important, since you will want to have the user focus
on a specific part of the page. Whether it’s a bunch of social links or a
subscription form, you’ll want the illustration to be the center stage, where
everything else happens, since the whole idea is to make something useful and
visually appealing at the same time.

In my case, I
decided that using a 960 x 480 px size
should have me covered, since the composition would theoretically be used on a white background and take up the center spot.

Of course, if you’re doing the illustration for an actual project, you
can always go bigger depending on the way your content will be displayed, but
for now I hope that the 960 px
Width will be a perfect match for most of you reading this.

2. Let Your Brand Show

According to the Online Business
Dictionary, a brand can be defined as a “unique design, sign, symbol,
words, or a combination of these, employed in creating an image that identifies
a product and differentiates it from its competitors.”

In today’s market,
it’s really important to set your company apart by creating an image that can
be easily recognized using a couple of simple visual triggers.

The whole idea
behind the project for this tutorial is to build something appealing that can
actually be put to use as soon as you finish creating the final product.

I encourage you
to make your design your own by “branding” the illustration, so that in the
end you’ll have a unique version of it.

How, you might ask?

Well, here are
some starting points.

Use a Unique Color
Palette

Color is easily
one of the most helpful tools when it comes to building brands, since the right
value can easily set you apart from your competitors, as long as you make it
interesting.

I’ve
gone with a nice yellow for the accents and main focus point, but that doesn’t
mean you have to stick to it.

Let the
Illustration Talk About Your Product or Business

Once you’ve figured out your color scheme, you can show off
your brand or company by taking on a theme that describes its core business. This
is where you can get down and creative and reflect on the visual elements that
you want to communicate.

For example, if
you’re building a website that is going to be dealing with data analysis, you
could create something that uses graphic charts and percentage indicators, in
order to give your viewers a little taste of what your business is all about.

Or, if you’re
dealing with a digital product, let’s say a piece of software, you could create
an abstract window with some little functions from within the actual program,
which would give them a hint at the nature of your product.

In this particular tutorial, I’ve decided to go with something a little
bit more generic, since I thought you might use my version as a starting
point and build on that.

That being said,
let’s stop wasting precious time, and get creative.

3. Create a New Document

Bring up
Illustrator, and create a New Document (File > New or Control-N) using the following settings:

• Number of Artboards: 1
• Width: 960
  px
• Height:
  480 px
• Units: Pixels

And from the Advanced tab:

• Color Mode: RGB
• Raster Effects:
  Screen (72 ppi)
• Align New Objects to
  Pixel Grid: checked

Quick tip: As you might have already guessed, we’re
going to be creating the illustration using a pixel-perfect workflow, so I strongly recommend you read my tutorial on how to create pixel-perfect artwork, which will help you a lot.

4. Isolate Your Composition Using Layers

Before we start building anything, I strongly
recommend you identify and separate the illustration's main sections on their own layer, since
it will be easier to target and edit them later on if you need to.

Taking a look at our composition, we're using six layers, giving them
easily recognizable names which will help with the process of identifying a specific
element from the whole.

• Layer 1: background
• Layer 2: ground line
• Layer 3: dumpster
• Layer 4: macbook
• Layer 5: crane
• Layer 6: pretend image

5. Start Working on the Illustration

Once you’ve layered your document, we can now start working on the actual
illustration, and we will do so by creating the ground line and the
background.

Step 1

Position yourself on the ground line layer, and using the Rounded Rectangle Tool create three different width shapes with a thickness
of 6 px and a 3 px Corner Radius. Color them using a dark reddish-grey (#3f3838)
and then make sure to position them about 8 px from one another.

Then group them using the Control-G keyboard shortcut, and center them to the Artboard using the Align Panel’s Horizontal
Align Center option, making sure to leave a gap of 46 px between them and the Artboard’s
bottom side.

Step 2

Position yourself on the background layer, and using the Ellipse Tool (L), create a 536 x 536 px shape which we will color
using #efefef and then partially mask in order to hide the bottom section that
goes underneath the ground line.

Then, add another smaller 46 x 46 px circle towards the top right corner, and color it using
the same value (#efefef).

Quick tip:if you want to use a different color for the background you can easily do this, but when you end up exporting the file, try and remove it, since a transparent PNG file could be a better fit, especially when your content width is larger than the illustration itself.

Step 3

Start working on the MacBook by creating a 426 x 24 px base with a round bottom, which
we will color using #e2e2e2 and then give a 6 px outline (#aaaaaa) using the Offset Path tool.

Quick tip:You can learn how to create outlines by taking a look at my in-depth comparison between Offset Paths and Strokes used as methods for creating line icons.

Step 4

Once you have the main shapes for the base (1), start adding some
details to it, such as the lighter top section (Width: 426 px; Height: 16px;
Color: #e2e2e2) (3), the 426 x 6 px thick divider line (#3f3838)
(2), the subtle highlights (Color: white;
Blending Mode: Overlay; Opacity: 80%) (4), and the touchpad
area (5) in order to make it look like an actual laptop and not a dinner plate.

Step 5

Start working on the MacBook’s top section by creating the lid and the
actual display.

First create a 364 x 220 px rectangle
with an 18 px Corner Radius applied
to the top left and right corners. Color the shape using #756c6c and then give
it a 6 px outline (#3f3838) (2).

Then, create another 184 x 328 px rectangle,
color it using your brand color (which in our case is #edd87e), give it the
same 6 px outline (#3f3838) and then
position the two towards the center of the lid, leaving a gap of just 6 px between them and the MacBook’s
base (3).

Add a couple of highlights and a shadow to give
the piece a little more polish (4).

Step 6

Once you’ve created the MacBook, you can start working on the theme of your
website, so take your time, get creative and figure out exactly what it is that
you want to show your viewers.

In our case, it’s a simple website layout, with
a top navigation menu, an image placeholder, a call to action button, and a
couple of funny elements such as the ladder and the white unpainted area.

When you’re done, don’t forget to group all the MacBook’s elements together
using the Control-G keyboard
shortcut, and then lock its layer, so that we can move on to the next section
of the illustration.

Step 7

Start working on the crane, and see if you can add the brand color or colors
to some of its composing pieces, in order to create some accent colors to help
you carry out the theme.

In our case, we’ve used our sunny yellow (#edd87e)
for the crane operating cabin and the small side elevator.

Step 8

Continue working on your theme by adding elements which would be relevant
to your website, or simply fill in the empty space so that the illustration won’t
end up looking unbalanced.

I decided to keep things
simple by adding a little dumpster towards the right side of the MacBook,
which could be a metaphor for the things that were recycled during the
construction of the site.

Step 9

Finish off the illustration by adding the last
piece of the puzzle, which in our case is the little “pretend image” that is held by the crane’s arm.

It's a Wrap

So there you have it—a nice, straightforward guide to building an interesting "Website Under Construction" Illustration, which can help your personal or company brand stand out from the rest.

Thank you for your time and attention, and be sure to show us what you've come up with after reading this piece.

P.S.

Since I know this is a quick tutorial, and I didn’t have time to
walk you through the entire creative process behind the illustration, I'm going to give you the editable source file, so that you can tinker with it
however your heart desires. See the download link in the right sidebar.