Manoj Thakur's Design Blog

Mobile App layout sizes for Android

2017-07-05T13:39:00.000-07:00

Mobile Type	Size	X	DPI
ldpi	240 x 320
mdpi	320 x 480 (Base line)	1X	160
hdpi	480 x 800	1.5X	240
xhdpi	720 x 1280	2X	320
xxhdpi	1080 x 1920	3X	480
xxxhdpi	1440 x 2560	4X	640

ldpi : Low Density Pixel
mdpi : Medium Density Pixel
hdpi : High Density Pixel
xhdpi : Extra High Density Pixel
xxhdpi : Extra Extra High Density Pixel
xxxhdpi : Extra Extra Extra High Density Pixel

Best Monitor for Design work "Dell P2414H"

2016-01-02T10:47:00.002-08:00

I wanted to buy monitor for my new company for design purpose. As I preferred Dell monitors I searched on net for the good monitors.

After a good research I purchased "Dell P2414H".

Following things helped me to consider this monitor for Design:

Display:

24 inch display size. Full HD 1920 x 1080 resolution. Sounds big screen size but it's perfect size monitor for design. I wanted to have good size monitor and also be able see and work on design properly. Hence I selected 24" display size is better option to work with. And its gives good space to design in Photoshop. This is Full HD display monitor.

Design:

Nicely designed and good looking monitor.

Create e-mailer design optimized for both Mobile and Web.

2015-07-06T11:19:00.001-07:00

Daily we see many emailers in our inbox. Its easy to read emailers on web, but it is difficult to read mailers on Mobile, if mailer is not optimized for Mobile. We enlarge the view to read the content.

So how to create one mailer which is readable and visible clearly on both web and mobile. And also without zoom or enlarge to read it.

Here we are creating a one mailer designed to view properly in both web and mobile.
So is it responsive mailer no its fluid mailer design.

Following are the solutions:

So while designing layout. Design two layouts one for web and one for mobile.

Step 1- Layout Design in Photoshop:

Layout size:

For web layout take 600px width and for mobile layout take size of 640px 960px (height may vary depending the content of the mailer).
While creating layout for web the size is x and on mobile it is 2x. Means what you design for web version, keep the same element (fonts, images) in double size on mobile layout.

Font size: Take font size in even number.

Font size for web : 12, 18
Font size for mobile : 24, 36

Body content may look good in font size 18px and on mobile layout same font size will be double of it that is font size 36px.

Step 2 - HTML Development:

HTML will be done in one web size only, which will be visible in 2x on mobile. Create HTML in table keep the table width 100%. So that it flexible to adjust automatically on Mobile.

Basic of creating a DIV

2013-12-04T22:41:00.002-08:00

We will learn here to create DIV structure. Creating a simple DIV with applying some basic CSS and one line code in HTML page.
Copy the code and paste it on you HTML page or Download Demo Page.

<html>
<head>
<title> My first DIV </title>
<style>
.firstdiv {
float:left;
width:400px;
Height:250px;
padding:10px 10px;
color:#666666;
font-family:Arial;
border:1px solid #cc0000;
}
</style>

</head>

<body>
<div class="firstdiv"> My first DIV </div>
</body>
</html>

Explanation:

CSS:

Under the head section we have written CSS. Now lets check the explanation of css line by line:

.firstdiv {	= given name starting with the dot (.firstdiv). You can give any name. Dot before the name is given to make it a class.
Float:left;	= DIV can be aligned horizontally to left or right by giving float.
width:400px;	= given width to DIV
Height:250px;	= given specific width
padding: 10px 10px;	= Padding is gap/ space between the div border to the div content. 10px 10px, means TOP-bottom and left-right
color:#666666;	= this is for the test color
font-family:Arial;	= Type of font
border:1px solid #cc0000;	= Given border to DIV, border width is 1px, solid displays solid line you can try other element such as dotted, dashed etc, #cc0000 this hexgon color is a border color

Now lets check the HTML code DIV line:

Added the class "firstdiv" style we created. Applying this class, DIV takes the shape as we have defined in the style / CSS.

Download Demo Page

Linking external CSS to HTML page.

2013-10-17T07:58:00.003-07:00

Following are the code to link external CSS for the HTML page.

Link:

Explanation:

1) Create CSS file, name this file as "style.css". Now save this css file under the folder css.
2) Create HTML page
3) Now in HTML page write the CSS linking code under the tag <head> as shown below.

     <head>
     <link href="css/style.css" rel="stylesheet" type="text/css">
     </head>

And its done.

Note: Above content will be updated soon with more explanation, so keep reading.

What is responsive web design?

2013-04-11T05:33:00.001-07:00

Now in a web technology, Responsive Design is very hot topic. As the devices to access internet are increasing and these devises are available in different sizes. Hence the responsive design has become very important.

Responsive Web Design:

Responsive design are the design that responses/ adjusts/ appears according to the size and type of devices.

Devices such as Computer, Tablet, Mobiles etc. The website is designed and coded in such a manner so that it appears properly in terms on size and placement of the content. The content can be text or images.

Importance / Benefits of responsive web design:

Responsive designs are very important. If the website is not responsive then the same website will open in all the different devices with the same design. This way the content will not be visible properly.

In responsive site the content size and placement changes as per the design created for the different devices.

Important Element

1) Media Queries:

Media queries helps us to have different CSS styles for different browser size. Design changes as the size of the browser sizes changes, as planed and specified by developer.

2) Flexible Images:

Image flexibility is important. Image size need to be flexible.

3) Grid Design:

Grid system is followed.

How to optimize image for the website. Which format to prefer GIF, JPEG or PNG and why?

2013-01-08T02:44:00.000-08:00

Image Optimization:

First lets understand what is image optimization. Image is saved in certain format such as GIF and JPG and while saving, amount of quality is selected as per the requirement. More quality means more clear and bigger file size.

Hence we select less in quality as much is possible, till we can see the image is clear and not loosing proper visibility. So this way we optimize the image. In other words lesser the file size more better image is optimized, but also the image should not loose its clarity.

Benefit of Image Optimization:

By optimizing we create smaller file size as much as small it is possible. If the image file size is less it takes lesser time to load on the website.

When to select GIF, JPEG or PNG:

GIF: When the image is having more flat colors, we should select GIF.
JPEG: If image is having multiple colors, blended colors we should select JPEG.
PNG: PNG is selected mostly when we have transparency image.

But you can select any format as per the requirement also by checking whose output is lesser in file size.

How to create web optimized image:

In Photoshop create any object or just take any image. Now go to main menu File > Save for Web & devices Now under this select the format GIF, JPEG or PNG (which ever format you need) > and press save option. And its done.

Formate Options:

For GIF: Select no. of colors, you will see more colors means more quality. While selecting you can also see the image file size on left hand side below the image.

For JPEG: Select Option "Quality" (0-100) higher the no. means more image quality. Same way you can check the file size on the left hand side below the image.

For PNG: I suggest select the PNG format only when using the transparent image. And if you want PNG without the transparency then simply De-select the option Transparency.

Useful "Keyboard Shortcut" of browser window - Very useful for web surfer.

2012-06-20T06:48:00.001-07:00

At many times we mistakenly close wrong browser window which was not supposed to be closed and then we regret oh! no!.
But if you know some of the important shortcut keys it will be very helpful.

Below is the some of the shortcut keys:

1) Ctr+Shift+T : to reopen the closed tab (repeat to open all the closed tabs one by one)
2) Ctr+w : to close the browser tab

3) Ctr++ : zoom in
4) Ctr+- : zoom out
5) Ctr+0 : actual size from zoom
6) Ctr+n : open new window
7) Ctr+t : new tab
8) Ctr+F : to find some text on the webpage
9) Ctr+H : to open browsing history
10) Ctr+R : to reload the page

What is Print Screen? - Use of Print Screen button

2012-06-07T07:52:00.004-07:00

Print Screen is very useful button available on computer keyboard. This button allows user to capture computer screen shot. In other words it helps user to create image of what is visible on the monitor screen.

How to take a Print Screen / Screen Shot:

Press the button "Print Screen" once available on the keyboard, then open any image editor software such as paint and just paste that image (go to top menu bar and click edit > paste). And its done, it will paste the image visible on the monitor at the time user presses the "Print Screen" button. Now save that image in your required format such as JPG, PNG etc.

One more option available in Print Screen:

Press "Alt + PrintScreen" button. It will capture the image of app or window open on top. In other words if multiple app or windows are open it captures the image of app which is on the top. Rest is same open the paint and paste the image.

What is FireShot? Features of FireShot application. - Usefull application for web designers:

2012-06-06T05:20:00.001-07:00

FireShot application:

FireShot is a Wonderful desktop browser add-ons application. Its a add-ons available for the browsers Firefox, Chrome, Internet Explorer etc. Thourgh Fireshot you can capture your browser screenshot (just like print screen) directly with one click of button.
Application also has various options of format to save the captured screen such as JPG, PNG, GIF etc. It captures the page open in browser window.

Main features of FireShot :

Capture visible area:

This captures the visible portion of the website, open on the browser depending on the size of the browser window.

Capture selected area:

It helps user to first select the portion and then save it as a image.

Capture entire page browser:

This option helps user to capture the entire page of a website open on the browser. In other words it also captures the screen visible by scrolling the website.

Image format:

It has various options to save the image in the format such as PNG, JPG, GIF, BMP and PDF formats etc.

Application Link:

To add in Mozilla Firefox:
https://addons.mozilla.org/en-US/firefox/addon/fireshot/

FireShot Screen Capture

So install and enjoy the application.

What is software testing? And what is the work of software tester?

2012-05-18T00:32:00.003-07:00

Software Testing:

When any software or application is created, it is tested before releasing it for sale or use. It can be any type of software or application created for the website, mobile device, kiosk, tv etc.

Tester's Work:

Testing software:

Once the application or the software is created/ developed, tester check the software thoroughly. Tester's job is to check the functionality of each part of the application to ensure each part work properly.

Application is tested on the device it is created for. In other words tester's work is to find errors in the software, if any.

Reporting the errors:

If the tester finds any error in the software he reports those errors to the developer to rectify the errors.

Retesting:

Once the errors are rectified/ removed by the developer tester re-tests those errors to ensure that the errors are removed and the software is working properly.

Once the complete testing is done. The software is ready for release.

Photos of "Kala Ghoda Arts Festival" held in Feb 2012

2012-05-11T05:53:00.000-07:00

Click here for more information about "Kala Ghoda Arts Festival".

Kala Ghoda Arts Festival 2012

2012-02-03T06:42:00.001-08:00

Kala Ghoda Arts Festival starting from 4th to 12th February 2012. Its an art and cultural festival held in Mumbai, once in a year.
People who are interested in all different kind of art, design can come to see the festival. This festival is exhibited in the open place. Open for all art lovers, entry to this festival is free.

Venue:

Kala Ghoda, Near Fort, Mumbai, Maharashtra, India.

Website Link:

www.kalaghodaassociation.com

Photos:

Some of the photos of "Kala Ghoda Arts Festival" held in Feb 2012.

What is Stock Photography?

2011-12-29T02:09:00.000-08:00

Their are various stock photo companies in the market. They provide all different kind of images of different different catagory. Photos categories includes photos of nature,places, people, educational etc.

These companies keep big stock of photos. They sale high quality photos. Apart from photos they also stock and sale vector graphics, clip-arts, icons etc. Photos are available in different sizes and resolution.

Ad agencies, Media companies, IT companies purchases these photos for their personal or commercial uses.

Cost of a photos are based on its sizes and resolution. Charges of the photos also varies according to the subscription packages offered by the stock photo companies.

Stock photos company collects high quality photos from the photographers and display on the website for sale, in return photographers get some percentage on the sale of their images. Hence the stock photo company not only sales the images they also puerchases the imgaes.

Some of the best stock photo websites:

1)	Gettyimages	www.gettyimages.in
2)	Istockphoto	www.istockphoto.com
3)	Shutterstock	www.shutterstock.com
4)	Corbisimages	www.corbisimages.com
5)	Imagesbazaar	www.imagesbazaar.com
6)	Dreamstime	www.dreamstime.com
7)	123rf	www.123rf.com
8)	Photobucket	www.photobucket.com

Website browser optimization?

2011-12-15T03:55:00.000-08:00

Browser optimization means, website is optimized so that the website opens/displays in all the browsers properly in terms of design and functionality.

For website browser optimization, website is tested in all the major browsers such as Firefox, Internet explorer (ie), Chrome, Safari etc. Under testing process, if any errors are found are removed. Mainly changes are done in codding of HTML, CSS, JS etc. to remove errors and to optimize the website.

If the website is not browser optimized website may not runs properly in all the browsers. Site may run in one browser properly and may not run properly on other browser. Hence browser optimization is very important for website, so that it display properly in all the browsers.

While optimization of website it is also checked that website should also work properly in the older version of browsers. It cannot be fully optimized for the older version browsers, hence optimization is done up to the max possibility in terms of display of the website.

21 short forms and their full forms related to web, domain and server.

2011-11-18T12:13:00.000-08:00

1)	URL	: Uniform Resource Locator
2)	www	: World Wide Web
3)	TLD	: Top-level Domain
4)	HTTP	: Hypertext Transfer Protocol

5)	HTTP's	: Hypertext Transfer Protocol Secure
6)	W3C	: World Wide Web Consortium
7)	WHATWG	: Web Hypertext Application Technology Working Group
8)	SSL	: Secure Sockets Layer
9)	TLS	: Transport Layer Security
10)	FTP	: File Transfer Protocol
11)	NNTP	: Network News Transfer Protocol
12)	DNS	: Domain Name Server
13)	RSS	: Really Simple Syndication
14)	IP Address	: Internet Protocol Address
15)	IANA	: Internet Assigned Numbers Authority
16)	API	: Application Programming Interface
17)	IETF	: Internet Engineering Task Force
18)	RFC	: Requests for Comments
19)	SNP	: Secure Network Programming
20)	TCP	: Transmission Control Protocol
21)	ARPA	: Address and Routing Parameter Area

Want to become a web designer, learn these four important things.

2011-11-05T10:30:00.001-07:00

These are the minimum things needs to learn to become a web designer.
1) Illustrator
2) Photoshop
3) HTML
4) CSS
5) Flash

One should also know computer basic before learning these things. To be very creative is different thing and to learn these software, language are different. The most important in web design field is that one should have interest in learning design.

1) Illustrator:
Illustrator is software mainly to design vector graphics, It's good to learn Illustrator so that one can design icons/ or any vector graphics.

2) Photoshop:
Photoshop is software where layouts are designed or created, it is also very best software for any type of image manipulation. In Photoshop we can design different types on layouts, layouts for web, mobile website and application etc.

3) HTML:
HTML ( Hipper text markup language ) is language to create web page. Once the layout is designed in Photoshop, layout is sliced for the HTML coding.

Under HTML coding, pages are created and these pages we can see in Web browsers.

4) CSS:
Cascading style sheets (CSS) are very important coding. While creating HTML page content are formatted with the help of CSS. CSS helps to give better look to text content, we can align the text, color the text, even we can give desired size to text.

Under CSS we can also create table-less structure (where table are not used for creating html). Most important thing about the CSS is that we can make changes in CSS any time and multiple pages can be controlled or manipulated.

5) Flash:
Flash is animation software, in web design used mainly to create animated banners or animated website. In flash we can create complete website. Flash is not much preferred now a days because flash is not SEO friendly.

Learn the above four things and enjoy!.

What is favicon icon?

2011-09-20T01:56:00.000-07:00

Favicon icon is a mini icon, appears on the browser window, one on the tab of the browser window and one before the address-bar of the browser. Some people also say these icons a browser icon.

Normally the size of the icon is 16px by 16px. The file format of this icon is ".ico". These icons are created using image editor software such as Photoshop, Zimp, Microsoft Paint, etc.

What is benchmark report in website design and development?

2011-09-07T02:54:00.000-07:00

Benchmark report is a documentation. Where the required information are gathered and
stored.This research starts prior to the website design and development.

Reseach is conducted on the basis of specific requirement. It can be done to check the functionalities, technology used, services offered by the competitive site.

Hence the report contains the list of the site and functionalities, technology used,
services offered.

Information data collected can be from 2 or more sites or 10 or more sites.
This benchmark helps designer to know about the competitor site, It helps the developer to know the what are the best functionalities can be used. Benchmark also helps to compare these sites.

Once the benchmark report is prepared and studied, its decided what functionalities to be created on the required website.

What is breadcrumb?

2011-08-12T02:08:00.000-07:00

Breadcrumb is image or text content which helps user to know the current location of the page on a website. Generally appears horizontal in a single line on the web pages below or above the main heading of the page. On breadcrumb user can see the current location as well as the main page location from where the user entered the sub page of the website. It also helps user to browse the previous main page of the section.

Breadcrumbs generally looks like something as given below.

e.g of Breadcrumb:
Main page >> Sub page >> Sub Section

On breadcrumb user can click on the section of page name (such as Main page, Sub page, Sub Section) to go directly on that particular page.

Process Of Website Design

2011-08-10T02:28:00.000-07:00

Following are the right process of web design generally designers follow while creating a website:

1) Design Brief
2) Wireframe
3) Layout Design
4) Client Approval
5) HTML Codding
6) Site Testing

1) Design Brief:

First the designer receives design brief.
Design brief contains all the requirement specified or required by the client.
On the basis of the design requirement, designer starts his design thought process.

2) Wireframe:

Wirframe is basic structure or a rough idea of layout are created on a peace of paper.

In other words Wireframe is a line diagram or a outline structure were its decided what to show on homepage. Wireframe normally shows type of navigation, position of the navigation,what to show on left part of the page and what on the right part of the page, how to show footer etc.

There are Various ways to create wireframes, it can be created on paper or on software such as Microsoft excel, Balsamiq, Visio, Cacoo etc.

3) Layout Design:

Once the wireframe is created on the basis of the client requirement, designer start the mockup design (layout design) of the website.

Before designer actually starts the layout design he checks various similar website on the internet for better ideas. Sometimes client also provides url of some sample of website they like.

4) Client Approval:

Once the design is ready, design is shown to the client for the final approval.
Here if the client likes the designs he gives the changes if he wants to do any changes.

Once all the final changes are done and the client gets the satisfaction he approves the design.

5) HTML Codding

After the design is approved the HTML codding starts as per the layout created. Generally codding includes HTML, CSS, and java script.

6) Site Testing:

Once the codding is done. Files are uploaded on the server for the final testing of the site.
Site is uploaded as a test link. Designer checks whether all the designs appearing properly or not. After designer uploads and tests the site. The site is tested again completely by the tester(person allocated to test the website). Here tester test the site thoroughly which normally includes testing of design, all links, forms and all functionalities used on the site.

And finally after all these process website is made live.

4 most important social networking sites for online presence must for designers.

2011-05-27T05:17:00.000-07:00

1) Facebook.com	2) Linkedin.com
3) Twitter.com	4) Behance.net

1) Facebook.com

Facebook is a social networking site. Face book first started in February 2004. User can create their profile, find their friend profile and can add in to their network. In other words Facebook is a best way to be connected with our friends.

2) Linkedin.com

Best nejavascript:void(0)tworking site for professionals and business people.
User can create their profile, find their professional friends profile and can add in to their network. User can also find the professionals to get connected to them.

3) Twitter.com

Twitter is a type on social networking site. Here User can follow people and people can follow user. User can post text messages on his/her profile that goes to all its followers. On twitter you can follow any one you like to follow, it could be your friends, celebrity or any business people.

For eg. I follow some design sites, they post some new message, and i get to know all those information.

4) Behance.net

Behance is a site where user can create their portfolio profile. User can see the design portfolio of other designers of various design fields.

15 most important file formats designers must know

2011-05-26T03:28:00.000-07:00

1) AI : Adobe Illustrator
2) PSD : Photoshop Document
3) CDR : CorelDRAW
4) JPEG : Joint Photographic Experts Group
5) GIF : Graphics Interchange Format
6) PNG : Portable Network Graphics
7) TIFF : Tagged Image File Format
8) BMP : Bitmap Image
9) PDF : Portable Document Format
10) HTML : Hyper Text Markup Language
11) CSS : Cascading Style Sheets
12) JS : JavaScript
13) SWF : Shockwave Flash
14) FLV : Flash Video
15) WMF : Windows Metafile

My first post on my blog.

2011-05-25T01:05:00.000-07:00

This is first post on my blog, I am here to share my knowledge of design with all the people who keep interest in design.

My interest are in to all stuff related to design, different fields of design, photography, painting and many more.

And I would like to share that, my specialization is in to web design and development.

So keep reading and visiting.

Warm regards,
Manoj Thakur
manojthakur.com