Shop Web Design – Adobe XD to HTML CSS Tutorial (Part 1/2)

hi everyone welcome back to tilt a ski from Indonesia and Hardy’s day and today video we gonna design and we gonna learn how to implement the design with the HTML and CSS so first of all we could not design with the ldsd and then after that we’re gonna design and we’re gonna implement the design to external CSS with the native alright so before “were starting to” I have the today’s question so yesterday I got a lot of question and I want to answer one by one so right now the question is how do you feel as graphic pattern are you able describe to me yeah that’s the issues to so previously back at the 2005 I was working as the graphic designer and I learned a lot of things about the marketing and about the user interface and about the visual scheme as well so from the thing that I can improve my designing improve my relation improve my grade squad and be enhanced about the copywriting in the marketing okay how do I feel I was feeling happy and also I was feeling flustered because sometimes the manager is not only one administrator sometimes if we design this thing suddenly the manager was asking to me to change that blueprint but in the another manager say we all said here today that I like this design so how do how do I finish this project so if always unfinished you know because there’s a lot of manager but my admonition is you have to follow the hagas administrator because sometimes the owner the owner of the product will follow the Helghast manager instead of the lowest manager so “youve had” three director number one number two and third you have to follow number one the hagas so she will help you or he will help you to confirm the design to the product corner okay so its concluding observations merely follow the Hengest manager and your desire will be confirmed with the commodity owner okay okay so let’s continue about this video so today we’re going to design video HD and external CSS but I’m gonna impel two video because I don’t want to make it longer alright so in this video we’re gonna design first and then after that I’m gonna make another video to implement the design to the template for the HTML and CSS alright so let’s get started okay everyone therefore welcomed my desktop and I have prepared one picture for my scheme this is I went from the e-commerce website so you can prepare your own picture alright so let’s get started so this is the ADHD and we’re gonna move the smallest one I’m sorry the midriff one 1366 okay alright so clean and then we have to save our document firstly this is master design okay and then after that you can use the grid organisation like this okay and you can you can customize by your own framework so right now I said that we’re gonna use native but I think to make it more faster and easier to you we’re gonna use bootstrap fabric okay so right now let’s put off the picture pick and then we put over here just like this okay and then we’re gonna make it small it is yeah cool and we need the logo over here and this is for the menu so we have to threw our logo but in such cases I don’t have any symbol intend so we’re gonna use the simple design for logo with the textbook over here as T yeah so this is just for the sample you are familiar with and the colour that we can get from over here the primary drawing and I think it to do like this okay and the typeface nature we can use Roboto or you can which is better let me find it bonocore no monserrate yeah and then I just wanted to leant now but I suppose I want to make it bigger which is to t2 it’s too big 26 all right getting off perimeter surpas is 20 yeah just like this and you can pre-fill like this this is so clean design nice I like it and then we gonna drop it as the logo and then we’re gonna duplicate and put outside of the neighbourhood group I’m gonna group it as the navigation Neff okay and then after that we select this and make it smaller perhaps 14 yeah and then change to become like okay so the emblem is the medium so if you preview the symbol is medium and “its like” but I conclude like it’s not really cool so have to be regular okay so this is for the featurettes 1 2 3 1 2 3 4 5 6 7 8 9 10 and this is for the problem and we’re gonna copy this and this is for the service and then the last one is for the my go-cart okay okay cool and we select all of them and start to the middle and then put on the right yeah just like that and then if you preview the design like this so very clean all right yeah it’s very very clean and then after that the picture we want to make it the tile so how do we do that let’s do this first of all I want to remove the grid first like this so I can see clearly as you know and then after that we create the offering over here just like this and then we use the field but this is the opacity yeah like this and the borders supposed to be white like this and then we’re going to realize the line simply over here or you can also use this vector yeah precisely over here now “theres going” you employed there so the colour have to be same with the logo as well so this is the main color that we’re gonna consume okay and we deepen the colour we move the layer below my cheeks okay and then over here you can placed some information by plunge something perhaps this is a brand-new textile okay and only make it smaller okay with the typeface sort like and then after that we cannot duplicate and yeah lalala sorry brand-new fabric of pattern from the user yeah just like that but if you want to to type something else time character it for you okay and then you’re gonna select all of those mantle including the picture and radical it as the idol spinner okay because we want to make it as the image all right so if you preview yeah but I think this is too small so select and make it bigger 14 and then we’re gonna prefer yeah yeah it bigger and this is suitable for the design okay and then I want to become something new again so time select all of this mantle with this is and then command e or control D on your keyboard to replica okay and we put over here yeah just gave everywhere that you might want maybe over here okay so just answer the negative room is not really near because if we see that the design is so near and there’s no negative infinite I think it would looks like Beth okay so I’m gonna change over here and then here we can make it like this and you can add another direction practice okay and then if we preview wow it looks nice right so this is the the tips-off of designing if you settled the specific characteristics over here I think that there’s no negative gap over here so perhaps that we are able to positioned anywhere in the another lieu okay cool and then we still have space over here that we want to articulated something so really positioned the verse and then product feature okay and in the produce in the produce we want to make it as the regular okay and then we can sorry in the concoction we want to make it as the medium and this is should be like okay and then we can duplicate this the comfort level is our mind priority priority okay and then we want make it bigger so consider the the negative space too I think if you do this it’s not really cool since the since the desert is it’s moving away from the grid okay so you can make like this yeah and then you have to make it smaller like this and increase its to become seventy okay and then we can put over here but give the margin one two three four five six okay that’s enough and the boundary meridian you can employed the case so as you can pre-fill there’s a lot of negative infinite of the design which is make this design to become so nice this is minimalist design okay and I think this one has to be near perhaps 10 pixel yeah cool commodity fitted this is okay and then you can make it to become like but the pleasant is advisable to thunderbolts this is the the artistry of typography okay and then for this one D I believe that we can make it like this no only under not really cool yeah okay so this is D I think we’re gonna make it till and also this one we’re gonna break till in the preview yeah this the comfy but I think that so longer what about of simply this is it nice right so after that we want to framed yeah as you can see if you think that we are making a lot of changes yes we are because designing you have to be aware of the design you’re not able to design as fast as you can sometimes you have to change sometimes you have to enter again and again okay so that fixes design lookings perfect let’s continue to constitute the call to action button okay so over here that we will gonna obligate the call of action button just like this one okay and with the without border with the pack hue like this and then setting the negative stress to become 50 and after that you can use by no and make it smaller change the colouring to become red coloring with the medium and yeah here we go by no okay and yeah I exactly want to make it more more better so in the by now we can make it become bones okay and in the button we can set in the register become egg okay cool and then after that we have to group it as the BTN dye and create a new type of graph this is for the earth to waste index so you can use discover and make it like with the underline and I make the colouring should be silver like this yeah and then make it smaller okay cool so you are able to buy no or add to this list okay and I think it has to be darker all right perfect okay okay everyone so let’s continue by adding the testimonial so here we can duplicate and put over here and then you can use what they say well our testimonial okay so because this is the important element that improve the marketers over here okay so that’s why we are able to applied our testimonial over here before the user is deciding to buy so in the new cloth we can copy and glue and you can applied as the italic you know let me find the font nature I like it italic okay I adoration this concoction so much better because I can deplete a lot of time by sitting and various kinds of like okay so this is the testimonial for the concoction itself and then I speculate for the honcho to is listed I feel like I feel like still not really cool so what about we gonna remove the underline and then we can duplicate this and put over here read all the few okay but precisely make it smaller okay cool delightful so this is the arrival sheet for the concoction but I think this is too far so really made 30 and it looks nice okay then

As found on YouTube

Share this article

Leave a comment

Related Posts