LOGO LOOKS BLURRY AND SMALL

[KGPX1]

Hi,

According to my website, the recommended logo size is 250x50 but when I do that the logo looks super small. Another thing is that there is too much white space around it. I have attached some screenshots for your reference and also my website is: buyityolo.com.

 

Thank you in advance for your help

[firstdefence]

The first thing to note is colour choice, a light cyan shadow under orange is never going to look good small and will give the impression of it being blurred. If you have shadow effects they can expand beyond where you perceive the shadow to be.

Small icons/logo's should be kept as simple as possible, there is no point in having detail in a logo/icon that cannot be seen.

Having quickly looked at your site, the logo you have created goes against the style of the site and I would seriously think about redesigning the logo.

The font typeface is also not going to look good small so again I would consider a cleaner font typeface for legibility.

This site might help you with idea's: https://www.brandcrowd.com/maker/logos/page1?text=Buy+It+Yolo&SearchText=shopping&LogoStyle=1&LogoLayoutOrientation=&Colors=&FontStyles=

[KGPX1]

@firstdefence Thank you for your input on this but that still doesn't answer my question. I have tried a simpler look and when saved, it still looks blurry. I have also tried different names with different font styles and it does not help. 

[All Media Lab]

Hi @KGPX1,

To start I would take care of the HTML& inline CSS errors on the site HTML VALIDATION your index page

In your theme.css I see *: 

.logo img{max-height:46px;max-width:250px}
.logo img[src*='.svg`

You can change the size if needed.

*You should create/export your logo as SVG (that is recommended anyway for a website). Not like a png as you did on your site. Just svg for export and no particular size of course. SVG (Scalable Vector Graphics) have a advantage in case of a simple logo over png and jpg because it uses vectors instead of pixels.

Like @firstdefenceis saying your logo is way to complicated for a small logo. I always test my web logo's in Affinity Designer by zooming them smaller and smaller to see if it works or not.

Hope this helps!

David

[firstdefence]

Using Safari, I created a local override PNG to give you an idea of how a simple logo can look see screenshot below.

[All Media Lab]

Secondly I had a look at your logo and it's the wrong size. It's a error in the design of the website. 250px X 46px is a very wide ratio. Try to create a logo around the ratio 2:1. And change the size in your CSS according to the new size. Create a svg and use transparency. You can edit/crop a slice in the export persona in the proper ratio and export the svg in Affinity Designer. 

This is how your logo is placed in your website now resulting in a small logo because of the empty space left and right:

 

The best way to create the logo is in Designer using the transparency mode in the document setup. I used your png as a example that has no transparency. 

[firstdefence]

I think the BIY in the logo could be misread as a typo of BUY, if you wish to keep BIY I would suggest B.I.Y. instead but really, any opportunity to shamelessly advertise your site name should be grabbed firmly and used to your advantage.

The sans serif font gives the impression of a modern forward thinking company, it is simplistic, easy to read and has a youth to it.

[KGPX1]

3 hours ago, All Media Lab said:

Hi @KGPX1,

To start I would take care of the HTML& inline CSS errors on the site HTML VALIDATION your index page

In your theme.css I see *: 

.logo img{max-height:46px;max-width:250px}
.logo img[src*='.svg`

You can change the size if needed.

*You should create/export your logo as SVG (that is recommended anyway for a website). Not like a png as you did on your site. Just svg for export and no particular size of course. SVG (Scalable Vector Graphics) have a advantage in case of a simple logo over png and jpg because it uses vectors instead of pixels.

Like @firstdefenceis saying your logo is way to complicated for a small logo. I always test my web logo's in Affinity Designer by zooming them smaller and smaller to see if it works or not.

Hope this helps!

David

Thank you!

[KGPX1]

@firstdefence @allmedialab Thank you both for your time and help. I will try that!