There are three types of software you're going to need when designing for the web.
The software you need:
Image editing software
Vector editing software
Screen design software
As a bonus, an animation software.
Difference between Vector and Bitmap
Let's get started understanding the basic principle. Why do we need these types of things? What's the difference between image editing and vector editing?
Suppose you don't know the difference between vector and bitmap, which are images.
I want to dive into a quick example and show you. I'm right here in Photoshop. Let me draw a circle, and you can see I have tools here and are on the side. I draw a black circle and also, let's choose the type tool. Let's write something here like "Hello world." I can change the fonts that I have. Let me choose some font, and I'm going to make this big.
I'm going to zoom in here. Inside, you can start seeing that we have a grid of pixels.
As you may or may not know every screen that we use, whether it's your mobile device or the screen on your desktop—the screen consists of little pixels, which are the dots of color that we're seeing. When we're zooming and we can see those rectangular. We can see those pixels and to create the effect of a circle because it's rectangular. We're faking it right, so there are black rectangular and greyer rectangular. When zoomed out, it looks like a nice circle. When we're zooming in on the Type, you can see that basically, that's how it seems those are how the pixels are drawn. All our designs and images that are going to work with will be pixel-based.
Jumping into Adobe Illustrator which is a vector editing tool. I'm going to choose a circle, and then I'm going to pick some type, and I'm going to write, "Hello world."
If I'm going to zoom, look what happens here in Illustrator the lines are. The lines are still crisp and smooth, and the same is right for the Type. Everything keeps getting smooth. It doesn't get pixelated, and we don't see any rectangular. The lines are still curved here. So why is that? What’s the difference?
So a vector is just a calculation between some points. Here in Illustrator, we can jump into a pointed wood, and you can see that we have some Points here. The line that you see here is the trajectory of the line between those dots. This line and these shapes have been calculated every time. No matter what the size we're looking at, the computer will calculate and recalculate the trajectory between these lines.
When we're in Photoshop, the computer has to remember every pixel. What's the color of this pixel? This is a black pixel, this is a grey pixel, and this is a white pixel. We're as in vector shape. It just remembers that we have four points depending on how big or small we want those lines to be. It recalculates them, so that means that in Illustrator we're not limited to the size. In Illustrator if we're going to try to print this out or zoom in. In Photoshop this will look at what we call pixelated, and it's going to be looking bad, right. However, in Photoshop we can keep zooming in and zooming. That's the core difference between a vector and a pixel.
Now when we're using images such as images from a camera. For example, a photo of a dog is always going to be a bitmap because this is not a calculation. This is just like a camera taking a picture and remembering precisely in each pixel.
As you can see, you know what this specific picture is. Images are always bitmap, and when we want to edit them, we will have to use an image editing software. In this case, if we're going to edit this image, we're probably going to do that within Photoshop.
I want to jump into an example of a website that I built a client a while ago. Here's just a page, but I want to show you the different images, resources, and assets we have on this page. On top, you can see a picture. This is a bitmap. However, I wanted to change its color. I wanted to give it kind of a color overlay. Suppose that's something that you want to do for your website. You're probably going to have to do this within Photoshop. Again you can also do this in a limited capacity with another software. But if you want to talk about colors and affect, the different shades of a bitmap. You're probably going to do that within Photoshop.
I want to show you because we're working right now on the dog's image. I can create all kinds of color overlay. Let me create here a layer, and color this and blue, for example. Now Photoshop has all sorts of different it's called blending modes. To change to combine this blue rectangular and image below. And that's how we can create all kinds of visual effects and edits to the image and reach particular types of visual effects.
So if you want to edit how an image looks like and it's probably something that you'll have to do work with images on the website you're going to design. You're going to have to use some image editing software.
Why is it better to do this within the vector? First of all, we're not going to be limited. We can use it in big and small. Also, the image size when we're going to export it. The image size will be smaller because this is just a simple calculation, and even if the image is big, it's easier to load so that the website will load faster. We're going to dive into exporting assets for the web. When you're drawing these types of simple icons, you probably want to do this within a vector editing software, which gives you many capabilities that we'll dive into later in the future.
Putting all together with Adobe XD
Now the third part of it is how do you design all those from the above. How do you put all these assets together? And we're going to use screen design software for that. And so here I'm working in Adobe XD. You can see that we always have very similar tools right here in the tools panel on the left side. So we have the basic shapes.
The reasons that we're going to use this versus. The fully-fledged Illustrator to design the webpage. Here in Adobe XD, we have some tools to create more complex web components.
For example, maybe we have a blog post, which is where the image will be, and we're going to have a blog title here. So blog number one and so maybe we want to group them. Now there's going to be a grid of this, so we can see we have a tool here called a repeat grid and we can do that to create more; I would say complex layouts.
Those are very same tools that very repeat themselves and make us easier to design web-based components. We can also use this to prototype. When you click on a button, we're going to move to a different page. We're going to create some basic animation and interactions right here in Adobe XD.
So it's a simplified illustrator version that includes a lot of web-based components, web, and app. I should say not only web design but also app design and interaction design in general. As I said, this is a fundamental cover. We're not diving into each of these features. But I want to share some basic concept that repeats itself in whatever software design software you're going to use. So one of the first concepts, as you can see here on the bottom right, is layers. We have these things stacked on top of each other—the background on top of it. We have layer 2, which is this blue rectangular, and if I would create some text here like "hello world" this would be a new layer. In these layers that they are now on top of it, you can also rearrange you know how they look. Right now, the blue is on the top, then we have the text, and then we have the dog, or I can switch this around. I can duplicate.
The concept of layers and how they react to each other repeats itself in all design software. You need to understand it's a stack of hierarchies. There's something on the bottom, and then you start stacking them up, and you want to make sure that you know what's on the top and what's on the bottom. And then you can see how they interact with each other. So we have the opacity, which is this opaque you don't know what's beneath, or maybe if we drop that down, we can see a little bit of what's going on. We can choose a blend mode, which means it's on top of it. But it's not fully opaque—the colors blend.
These concepts repeat themselves, so we're in Adobe Photoshop, but we can jump back into Illustrator. And we can see that here in Illustrator. I also have a layers panel, and you can see that everything we drew here is also stacked in terms of the layers.
You might want to remember a few things and then look fundamental, but it's essential to start developing good designers' good habits. Always make sure that you name your layers so you can double click on those and call. Let's say Blue. This is going to be the Title, for example.
Later on, naming your layers to worry about when you're going to have a very complicated file with maybe a hundred layers, and it does get to these points. You're going to understand what's going on here, and you'll better manage your file. So this is a habit that you should start learning. Another concept that repeats itself with all design software is the concept of styles, if we go to textiles, character Styles. This text, let's go in and select this text here on the top. You can see what fonts were using. So let's choose, for example, Calibri, and 100 is the size, and the color so maybe it's red.
We have this kind of text many times in web design. What you want to create is consistency. You want to make sure that all the titles are the same size and color and font. There is consistency with many elements but with Type specifically.
You want to create something like a style where you're going to develop a style. You're going to call this, for example, Headline. So now that we have this text and we have a style of a Headline. Let's say it was with a different font and a different color, for example. We had another text and our design. We could very quickly go and select this text and choose the Headline and revert to it and that would bring it back to the right kind of size color and font.
That's how we create consistency throughout our design, which is essential to make good web design and design in general.