Text, Effect & UI element for Web Design
When create a UI first starting part is header, content slider, thumbnails of contents , a bit of text, an image flush right, and then a footer at the bottom.
Now this is planning stage. Once I get the sketch into Illustrator, I have to determine a lot of things about the project. About wide of the overall web site, space, overall scheme of things, size of thumbnails, composition of text & image, and the footer.
For a basid website Width is 1280px. & the Height can be increase as per as information we want to add. Just we make sure that my color mode is RGB, PPI is 72, and Align to Pixel Grade is set to Yes, that everything is nice, crisp, than click OK to confirm.
From here, my task is to define the overall size and dimensions of all of the different aspects. In order to do that, I am going to utilize shapes, grids, and even some guides here inside of Illustrator.
Grid
Press cmd+r, then rular show left & up side of page. When I click right button on rulars then we can change the unit & we select “Pixel” to create UI. Then we can easily use grids as needed. Grid help us to align our UI. Adobe illustrator have also “Align ” option to align easily. When we add UI button, icon, text & others elements just we try to make same space or 2X/ 3X/ 4X that means Multiplicity space, size & others.
Shapes & icon
There are diffrent shapes and symbols / icon use in UI. For button we can use default shape from illustrator. And we can create symbols / icon by self, or we can use fontawesome icon from https://fontawesome.com. To use font awsome icon just need to download & install deafult font from above link. After installing just copy icon from the link, we select “T tool” (cmd+t) then click in Ai page and paste icon. and we must select fontawesome font name.
Text and Typography
When it comes to typography, there aren’t necessarily any concrete rules that we have to follow; however, in order to provide the best experience for users, we should try to implement some best practices when you are crafting type for the web.we can implement them in your workflow to get better result for our type.
#1: readability trumps creativity. One of the first considerations you will make when designing with type is which typeface you are going to use for project.
#2: size does matter. Your text should be large enough to be read on any monitor or device, but not so big that it appears out of place or screaming at end user. In most cases, our body text will need to be set between 12 and 16 pixels.
#3: scale it up.
Once we have chosen your base font size, you should then think about the scale and hierarchy of the remaining typographical elements, like headings, subheadings, and menu items. After you’ve defined a scale, we should stick with that scale throughout our entire design. This will make it much easier on whoever is responsible for converting this design into HTML and CSS later on down the road. And it will also create a nice unified appearance throughout our design as well. we can create your own scale, but an example might be starting at 14 pixels for your body text, we could go up to 16 for our first heading, 18 pixels for your second, 21 for your third, and so on.
I usually define two points. I call them Anchor Points. I setup my body text size and also my largest header first, and then I fill in the numbers in between. These two anchor points allow me to evenly distribute my scale throughout the range of type elements on my page. Now let’s move on to rule
# 4. Emphasis is an important thing. Occasionally it will be necessary to emphasis a piece of text in order to draw the user’s attention to some important element or piece of content. This usually entails using both bold and italics, but it can also mean using things like all caps, extra bold, color differences, and even underlining.
Whatever your choice for emphasizing your content, stick with that choice throughout your entire design; otherwise, your type will look messy and not well thought out. This also makes it easier when coding this type via CSS, so the developer doesn’t have to create multiple emphatic styles. The final rule revolves around whitespace. The use of white- or negative space between objects and type is a very powerful thing. This empty space allows your elements to breathe and has a way of creating its own emphasis without the use of any extra tricks. One of the big trends on the web today is something called minimalist design.
Doing a quick Google search will give you a better idea of what I am talking about, but with these designs you see plenty of whitespace throughout most of the compositions. websites with good use of whitespace tend to be easier on the eyes and invite the user to casually browse without feeling rushed, to see all of the content that’s been simply just jammed together. Keep that in mind as you begin to put your type together. The only other rule that exist in typography is the unwritten rule that allows us to break all of the other rules I just talked about. As long as you are providing a unique experience for your user that both serves creative message and delivers information, you are free to do whatever you want when it comes to typography.
And with the advent of things like web fonts and services like Adobe Typekit, the possibilities for web typography are only going to continue to grow.
