BASIC WEB DESIGN SOFTWARE

 

On this article what software do you need to get started as a web designer we're going to cover all the software's you need and exactly how to use them to get started as a web designer. Some of the basic core principles of graphic design such as collar, typography, layout and all that kind of stuff but to make sure that you can practice and you can follow along the course. Make sure that you have the right software to get started and then you can play around with it for a little bit. So in this article we will cover all the software that you need and why do you need these different software's to do your web design. Now this is not gonna be in-depth tutorials for these software's it's just gonna be a little bit of intro. later on in the course we're gonna have a little bit more in depth about these software themselves but now I want to make sure that you have what you need to at least get started. So there's basically three types of software that you're gonna need when you're designing for the web. The first one is image editing software, the second one is vector editing software, the third one is screen design software and maybe as bonus maybe an animation software but we're not gonna dive into animation

right now.

 

 

 

So why these three different software's Adobe Photoshop, Adobe Illustrator and Adobe XD. However there are free or different alternatives to these software depending on where you are. You can find alternatives to the software they all work the same so as long as you figure out and you understand the

core basic which we gonna cover right here. It doesn't really matter there' you need to understand the principles and then you can apply them in whatever software you choose to work with at the end of the day. So let's get started understanding the basic principle why do we need these type of things? what's the difference between image editing and vector editing? so if you don't really know what's the different between vector and bitmap which is images there is really a quick example and that will show you. 

 

Photoshop

 

 

You have tools on the side of Photoshop panel and then chose a circle and draw a black circle right there and also let's choose the type tool and let's write something there like "Hello world" and you can change the fonts. We have a weird text and we have a circle now if you going to zoom in you can start seeing that we have a grid of pixels. So 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 is basically comprised of little pixels which is the dots of color that we're seeing so right here when we're really zooming and we can actually see those rectangular we can see those pixels and to create the effect of a circle because it's rectangular we're actually using. There are black rectangular and greyer rectangular so when you're zoomed out it looks like a nice circle and also when we're zooming in on the type you can see that basically that's how it looks those are how the pixels are being drawn out and we are again in an image editing software that is Photoshop. 

 

 Illustrator

 

All our designs and images that are going to working with pixel based however if you jump right now into illustrator which is an a vector editing tool. You gonna use the same tool look like Photoshop tools. Again choose a circle and then choose some type and write you know "Hello world". If you gonna zoom in right now look what happens in Illustrator the lines are no matter how you zooming in 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 actually don't see any rectangular. The lines are still curved here so why is that? what's the difference? 

 

So vector is actually just a calculation between some points so here in Illustrator we can actually jump into a point wood and you can see in this case that we basically have some points here and the line that you see here is basically the trajectory of the line between those dots and these thin line and this shapes are being so when we're in Photoshop basically the computer has to remember every pixel what's the color of this pixel. So this is a black pixel this is a great pixel and this is a white pixel whether we're as in a vector shape basically it just remembers that we have four points and then depending on how big or small we want that those lines to be in recalculates them. So that means that here we're not really limited on the size here if we're gonna try to really print this out or zoom in here this is going to look what we call pixelated and it's gonna be look bad. However we can keep zooming in and zooming it so that's the core difference between a vector an a pixel. 

 

Now when we're using images such as images from a camera here an image of a dog. let's say an

image of a dog is always going to be a bitmap right because this is not a calculation this is just like a camera took a picture and remember exactly in each pixel as you can see you know what's the specific picture. So images are always bitmap and when we want to edit them we're gonna have to use with an image editing software so in this case if we want to edit this image we're probably gonna do that within Photoshop.

 

 

Now here we are not gonna dive super in-depth into color editing right now. We're working right now with the image of the dog you can create all kinds of color overlay. Create a layer and you know color this and whatever blue for example. Now Photoshop has all kinds of different it's called blending modes in order 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 very very specific types of visual effects. So if you want to edit how an image looks like. You gonna have to use some image editing software.

 

 Now when you're drawing and drawing simple icons you probably want to do this within a vector vector editing software which gives you a lot of capabilities. How do you actually design? How do you put all these assets together and we're gonna use a screen design software for that and that is Adobe XD. You can see that we in all of these software's we always have kind of a very similar tools in the tools panel on the left side. So we have the basic shapes we have the pen tool which allows us the pen tool to draw these vector complex shape this is going to be very useful for a lot of things and it has the type tool.  

 Adobe XD

Adobe xd is a vector-based ui ux design tool and with it you can design anything from smartwatch

apps to fully fledged websites. Now XD was first introduced in 2015's adobe max conference as project comet and back then it promised a breath of fresh air for all the people who were still using Photoshop or illustrator for ui design. Many years ago i started designing websites in photoshop so i know all about the struggles but XD is completely different it was built specifically for ui and ux design. So it has features that were non-existent in photoshop or illustrator among those features we can find the ability to create prototypes and animations to use components to install third-party plug-ins, to resize content automatically, to fit different screen sizes or to create repeat grids and these are just a few. 

 

 First of all repeat grids these are super useful they allow you to make instance can be changed independently from the main component states are basically variations of a component and in xd you can switch really easily between these variations in both design and prototype mode and finally we

have document assets which allow you to save colors and character styles and then apply them to other elements. These along with components are also saved in a document library that can be shared with other people.This is a super useful feature for creating design systems.