Screen size & resolution for Web Design

Toma Oceanize
Oceanize Lab Geeks
Published in
3 min readDec 29, 2017

Before we start learning how to create web graphics, we need to first understand the difference between something called pixel dimension and resolution. For many years people I have referred to web graphics as being 72 PPI, or Pixels Per Inch, and we as designers have just come to accept that number as the standard by which we create our screen graphics. However, in reality monitors today far exceed the limits of 72 pixels per inch, and devices like Apple’s iPhone and iPad even have something called a Retina display, which displays in excess of 300 pixels per inch. In today’s world, we don’t need to concern ourselves with the PPI settings of our graphics anymore; instead, we should focus on the actual pixel dimensions of the graphics we’re creating.

By this I mean the actual physical space, width, and height values that our graphics take up onscreen.

For details follow the link-

The one thing that really does matter is how much physical space the objects take up on- screen, and how legible it will be at any given resolution. The choice ultimately is yours, so we need to test your designs extensively on multiple monitors and multiple resolutions to get the optimal user experience.

If we are new to the world of web design or simply new to using Adobe Illustrator as a web design tool.

All web projects start as a idea. Whether it’s something that you sketched on a quick drawing you created on our iPad, ideas are the building blocks for what we create in our little web world. Finding a way to get these ideas out of our head and into a workable form is the key. we can use tablet apps like Adobe Ideas to quickly sketch things that pop into my head, and then we export those to use them as a starting point once, inside of an app like Illustrator. No matter how you do it, it’s best to get the ideas out and into some visual form so that A, we don’t lose them, and B, we can share them with others and refine them into something awesome.

The first thing I am going to do is create a new document by going to File > New. And I’ll just accept the defaults by hitting Enter or Return. It does not matter what size document I am working on; I just want to be able to see all of the active panels and tools here inside of the Illustrator environment.

Create new document

The first thing I am going to do is create a new document by going to File > New. & I’ll just accept the defaults by hitting Enter or Return. It does not matter what size document I am working on; I just want to be able to see all of the active panels and tools here inside of the Illustrator environment.

--

--