Before and After 2 | Website Mock up in Adobe Illustrator   | HU Shahir | Skillshare

Before and After 2 | Website Mock up in Adobe Illustrator  

HU Shahir, Motion Graphic /Visual FX Artist (Polygon Motion)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (33m)
    • 1. Intro

      0:41
    • 2. Overview and UI Prototype

      8:17
    • 3. Getting Started

      12:30
    • 4. Final Design

      11:08

About This Class

e559acc5

What is Before and After Series of Classes ?

Before and After Series of classes will publish once in a week for the purpose of showing students how good and professional work can make a huge difference on your designs .

Before and After Series of Classes contain different topics of Graphic Design , Motion Design and UI / UX Design . 

In this class we will take an bad UI Design and we will have an overview to the problem of the design and we will redesigned to a new modern and trendy look website in Adobe Illustrator .

If you did not watch the First Part of Before and After Series Class Here we go :

7cc5d03e

Features of This class :

1- Easy to follow . 

2- Completely Project oriented 

3- Assets 

Lets get started :)

Transcripts

1. Intro: Hey, guys atrophied from polygon motion and welcome to this class. In this reason, before NAFTA classes we will transform a battle you I designed from a website toe a new and moderate You I designed so at the first real haven't over to the problem off this design. How can we improve only design? And also we will create the new design according to an I've resolution prototype in Adebola straighter. So if you're ready, let's get a start. 2. Overview and UI Prototype: okay before going to the design process off the new design. So let's talk about what is the what are the problems off the spanner. What are the problems with this already hold design that we have in here, So at actually ah, there was a lot of problem in this matter. The first thing first is this Logan here? If I zoom in, you see that this is the local is almost very bad quality. It's it's it's not the kind of lower. It's not so soft. It's not clean. It's not elegant. Actually, it's very it's very dirty. It has Lots of 13 is in here. You see the White Ages in here, and it's not so clean. So foran Onley shopping for a for a company, it's not good at all. So you have to, um, have a clean ah logo. And here the first thing about this is that that it is the local is not so clean. So it is dirty, you know? I mean, the ages are not so cleaned em in photo shots from you need to have the original logo in here, a waiter logo to to place it in hands. So that and things about this banner is that this? Ah, ticks and company did the company name and also the tagline here, it's not so good. The, um color or not so good. The found is not good for a banner. And there is no differentiated between the company name and the tackling hair. So that is the other problem he has. So the other problem let me down this. Okay, Andi And the other problem is dio these icons the search icon and the, um, Carl Icahn, the shopping cart icon. So foran only chopping website. You need a lots of space for searching, for example, if if I want to buy on iPhone So I want to enter to this website and I want to serve my product so I don't want to go to the categories that that's actually not existent here. The categories. I don't want to go to categories and see the huge less and find my products. I need to, um, searching here, for example, in here there will be a search area, so it will be good in here. I'm just typing without going to out of the other places. Other area of the page. I'm just typing. I'm just selecting my category on Find the products. It is very easy for your customers to find the product that they want. So instead of just just putting this wide speaks negative space that's not so efficient. Ah, using a text fell that there is a search area, the search bar. It will be good for drawing the Castro more attention. So that is our problem. I, also at some car chopping icon, is very small. It's too small. It has to be yellow a little bit larger, and the the position off this shopping car is not good. It's it's in center back. It is not good. It has to be in one area, one direction, for example, In in the top, Um, right Karner Or maybe in the down. And he's just have not in center. So it's not good for a banner, actually. And the other thing about this is that these area look at these area. It's not the line, actually. If I drop yeah, you see that? The space between the logo and this line and here, the negative sisters at the negative space on this, not a line company locals and text on alignment. Is the basement off a good to you? I in UX design. So if you're design is not a line, it's if you're designers, is actually not 1/2. A good alignment is not a good is not a professional. You I design. It's not a professional websites. A professional graphic designer, a thoughtful designer must cancer, these alignments in a different direction off these design, not just in Web banners. In almost everything, a desire, um, has to know about alignment. It's too. It's the rules of graphic design. So ah, the other things about this, that the navigation at fixed or ah, right down wrote down in Uppercase Leader. So it's not good. Actually, you have to write these navigation fixed in just ah, lower case. The first literal should be in capital later, and the other one should be in a small later. So that is the other problem. And also there is no create an account baton account. And here the text account is not good, actually, as as according to user experience at principles. So what does that count mean? What's what kind of account If, um, visitor neatly come to your website. You have to roll down. For example, Logan, are are a sign in was it knows where to where to sign, where to sign in. So account doesn't mean actually doesn't can be a good message to the western. Ah, we, uh we must have create an account about an enhanced also the people who don't have any account on your website. You have to encouraged him to create an account on your website. So that is a thing are also the other things that these navigation ah, patterns are not placed in a good position. Um, because foran only shopping the the first thing that are very important is the cattle category off the product. For example, in a state of this, um the navigation fixed and here it should be the categories off product electron ICS, for example beauty held in these staff because the general idea of your website the general purpose off your website is shopping is not for life to you. He is not for about it's not for at a product it just for for shopping. You need customers to shop to buy your product on. That is a thing if we put this navigation to the top in some place and in a state of this we have to ride down the categories that we have in this website, so that are the problems. There's a lot of things. There's a lot of problems in this manner in this website, so ah, let's, uh and here I have their have the prototype and have just have create this prototype in balsamic markup. It is the new design. You see that? Ah, we have the navigation, um fixed. And here in the top we have the company logo. It's it's almost completely aligned with these edges. We have ah searching area on Find Bannon. For people who want to serve their product at this, dear isn't creating account. It was a log in There is a shopping cart, the product, for example, if I am if I have a company I want on my product in this world Ah, only shopping or website. There is a There is a large pattern that encouraged me to clicking this pattern and out of my products are in here have the categories. For example all the characters were held in beauty electron ICS and these staff. And in these an image police holder. Aiken put my discounts, Ma general information about different products. And yeah, I can put the advertisement on different bunch of other staff that helps to grow out my residue oars to grab 222 draw attention of the audience to different place off this website . So that is a good design. All the things that I wasn't or need is is placed in the home screen in the first. Um, if we were off this website, so and that is the thing. According to this prototype, we will design this. Ah ah, Home page This banner actually on Adebola straighter on. So open your illustrator and let's start designing. 3. Getting Started : okay lets to start designing according to the prototype that I have created in balsamic markup. So a Rheiman Adebola straighter and have important important there Ah, prototype, but also the logo off The company have created a nart board at the size off outside off one l 1209 100 height. That is standard form for a desktop website. So and that is it. And let me go to our port Andi rename this home page. Okay. And also, let's start designing the first thing first that I want to design as this Ah ah, small banner here. So at goto rectangles, electric tingle and it start designing. So ah, the actual things that I want to do in here that this weapons we don't need this. Let's mosque it out. Okay, Now let's a start creating the small banner So half dragged a new ah, but over here, the color of it, like something cholera or should be this color and click. Ok, now we have that. And also let's drag another one and put this in. Besides me relative it more so now let's make it a little bit brighter. Yeah, Now it's good analysts track another copy for navigation and arrange saying to bring front . So now let's create another color for this. Yeah, that is good and kind of glassy nous Look to that Now it is good. Them banners were created. Let's rename thes man. It was the 1st 1 Bill will be stop a small banner. So let's track the Logan ham and plays Lula bath. Yes, we have it on. And maybe a little bit of a species and half of this Well, the cool idea. So yeah, that is nice. Not so bad. So please the local. And also let's go to you and sure, rulers and drag a guide layers and hands and also put it in the sights. Very nice. And make this for yeah, that a school. Now we have a good representation off thes position. Okay, Now let's Ah ah, Rack, create a text will be good idea. So and also all its drag it up on the first thing is the changed at phone to fire. Maybe there was a phone that I knew Fire, son, you can download it for free on. It will be good. Let's create online mint in hair spacing between these and also it is good. Not bad. Now let's ah, make it a little bit. I think I'll let a bit smaller would be good. Not this much. Maybe this Put it in. Decide Create another A rectangle for Korean account on. Put it in this side. Um, make it a little bit like this. So that is good. And the kind of the color will be and brighter color Things will be good. Let's find the match. The I It will be good. This color is good and also but this in hand. And rename this to the, uh, Grieve account. Then also create a new group plays a text then also created fixed in here Create and account create an account on Also make a little bit larger Maybe ultralight a little pit Our book is good. So yeah, let's create log it and for log in. I want to I use what should I use? Just copy this and put it in there. Make a little bit smaller on. Maybe you don't need fell. We have in a stroke on But this put the color to this color. Sorry. Have to change the color. It's like that fixed and duplicated. Put it in here and now click and change this to log in and make relative to smaller. Not too much. So that is good, Not bad. And sorry just goes away And that is good. That school. So it's like this and put it in one group supergroup that will be logging so and that is OK . And in here we will please. Ah, shopping car icon. So and the other things that I want to do is put this top a little bit hand, make a room for this, did it room. And like this. Now it's cooler then before and just like this and can't released at and go to other and group this group and create any group here for this banner and put this logo on here on pasted. Put it in this group. So now we have a little bit good organization. Ah, off this element. So now create Now change it takes to have on Afghan, uh, online shop So on make the little bit see me bolt gone online shop Or maybe the Afghan will be see me build and go to paragraph character and decrease the colonel a little bit. Yeah, the school and changed us too. This and also No, that's not good. Maybe this to Scala. Yeah, that's cool. And put it in here relative to smaller and create a tackling for this. Or maybe just ah, what is the tagline? Find everything you want. There's a tagline. Self created tagline. Ultra light. And for this with the character and create a little bit off within this side and changed a color to me b e This are let's check. And that's also cool. Or me. Me. No, that's cool. A schooler on Let's bring a little bit down are maybe it's like both of them. They have to create a place for search bar and put this Yeah, align it and put this to this side. And also that a school, maybe a little bit. So that is it in the next list and we will final Diz designed by adding different salary y elements to this banner 4. Final Design: So in this. Listen, let's finalized is designed by adding different angry white elements. So the first thing is that I want to create ah ah separated line here supreme that lying on Let's change the color too well, it's been a great not too much that the supreme between different elements. So, uh, the other things I want to do is selectees and a little bit not too much smaller. Put it in this the side to create a place for search bar in half. So so has we. See, we have the company name, logo and hair. And also we have to create the search bar. So let's drag, uh, rectangle in here, okay? And make it a little bit. Fill it, fill it like this. And also the color will be maybe 100 person white are, uh, just having a stroke to that. Not to match. It's changed different cars to see which one is good. Actually, no, it's not good. Yeah, that is good. Not bad at all. So maybe changed is to I think this and change. Yeah, that is cool. So now let's, uh, create a fix in hand. Let's create a text now Let's good. I, uh bottom half fine. Biden and my kids I want to slick this baton and that's located in here. Put it in this side. Make the little smaller fix this. So I find fine on and put it in this side on Make it fill it. Er, imagine this A search area on find because people always like big bad And so it's dropped it so much attention than small batons on. And now let's change the color too. Something orange. Yeah, that's nice. Uh, okay. And make this a little bit smaller. And also let's create ah, magnifier. Ah, I can't good character and go to character and changes to that's ah also make a role here. So now we have our such foreign hands. So the other things that I want to do as, um create these categories inhale on for this category and just ah de placate this category , uh, navigation texts and make the little bit larger. And also let's type Okay, I've wrote down these categories and I think the little bit smaller put it in this side and also go to character excuse you squeeze it down like this and also put it in this side a little better and may care like this. So and also multiple. Bold. Yes. And also let's make the little bit brighter. Okay. And now let's, uh, de placate this bad in here for at a product me like this and at your product. Cool. And also making it up on maybe on and it's like this allying it And this part and this now it's good. Not too bad hand also maybe a little bit off Drop shadow we need go into effect in style Eyes drop shadow preview A little bid positive down Me. Um I think it's good now and do it for this bad and also fake Apply drop shadow. Yes. And for this also, maybe you change this to style Izing drop shadow on preview capacity Down, Lar. No, it's not good. Okay, okay. Our okay. Our design is really just a few things are remained We can add at this category, um, in here, or we can just put it blank. And also this ah, shopping cart in here that that we can place it in here so and let me make a little bit Ah , line this just grieve in alignment Hair alignments. Not good, I think. Yeah, it's good. Now it's good. And what we can please and other pictures in here, for example, discount pictures and advertisement And these other staff. Um, in this position off websites. So that is it. So you see a lot of difference Thin the past design If I, um, import open there, the old design and put it in here. You see that? How much difference we create for this online child you can at multiple are you elements and here to create more professional this design. But it's good in this all design and it is very nice. I think the coloring, the all the things are said so Okay, that is it. Hope you guys enjoy from this class. And don't forget to check out other polygon motion classes on a scale share on Check out www polygon motion stop com for more coal says OK, My name is a few feet from Polygon Motion and guys next