Imagine a client comes to see you and asks for a website. If you don't have a background in design, it will be tough to make a mockup right off the bat. Luckily you can find mockups, whether paid or free, on the Internet. They're often ready to use and can be modified based on your needs.
We will therefore start by finding a mockup that is well suited to what the client is asking us to do.
I'm going to base this course example off a mockup by Blaz (PSD format) that he has made available on his website (send him a message to say thanks)!
Get started on Photoshop
We will be using Photoshop to open these mockup files. The majority of mockups that you'll find require Photoshop anyway! You can find mockups that use Illustrator or Sketch-type files, but this is less common.
If you haven't already installed Photoshop, click on this link. Photoshop is a paid application, but you can use it for free during a 7-day trial. It's a good way to test it out!
Introduction to Photoshop: your workspace
Photoshop is an image editing tool that is heavily used by designers to create images or mockups.
Good news: Photoshop is organized in the same way as many other Adobe tools. Once you know how to use Photoshop, or if you already have a background in other Adobe tools, it will be much easier to use others!
To understand Photoshop, imagine a sort of art workshop combined with a printing facility. Your workspace is your screen. On the left, you have tools that you might even use in real-life like a paintbrush, pipette, or feather, that we'll explore later.
On the right you will find more general organizational rules that might be the equivalent of your canvas or boxes in real life.
The upper bar will change based on the tool that you're using. It will allow you to work with the particular tool's options. For example, if you're using the text tool, you'll be able to change the font in the upper bar.
Lastly, the center of your screen will show your creation. Like a sheet of paper, the dimensions may be different, but the shape will always be rectangular or square.
Exploring the grid
Once you open your mockup, you might notice a group of columns that covers the whole thing. This is what we call a grid.
The word 'grid' comes from the first writers who would use stretch thread to vertically and horizontally align their writing. When printing came about, printers also adopted the concept. A type based grid is a crucial part of a writing layout. Based on the designer's choice, a layout could convey stability or movement, confidence or instead a lack of professionalism.
A grid is an organization of horizontal lines that form a row and vertical lines that create columns. Why would we use a grid though? Above all else, a grid makes content more readable and structured if you choose a layout with parallel columns. A grid also allows you to adapt your content to different screen sizes and to think "responsively."
Blaz, the designer behind the mockup in our project, used the grid composed of 12 columns. This is perfect if you want to use Bootstrap, a CSS library created by Twitter. This is what we will use!
The horizontal lines were created thanks to rules in Photoshop. We use them to align elements horizontally, like a row in real life! To add one, click and move an existing line to the place where you want it.
Layers
You will also notice, on the right, an element that we have not yet discussed: layers.
A Photoshop layer behaves in the same way as a layer in real life, meaning you can stack a bunch of individual layers one on another, but unlike in real life, you can also see them all individually at a glance in Photoshop!
Each layer follows priority rules: layers which are higher up have more priority 10 layers that are further below. If in real life you stack two layers, you will obviously see the continental layer that is above the other. This will block the content of the layer beneath. This concept is the same in Photoshop.
In our case, layers are organized by folders so as to be more readable. You can just activate layers or folders by clicking on the eye icon in that same square.
