Need your feedback on logo design Hi, This is the website: https://AtHashPal.com/ Logo is in the top left corner. I do not want to use too much screen space for just the logo. So current size, very little larger is ok. Please note that the word "At Hash Pal" can be written as "@ # Pal", and this is what forms the logo. I did the current logo myself using a free logo maker tool here: https://vagminetech.com/ What I want to know is, is this logo "looking" good enough, or should I hire someone for a more professional logo with better style? Thanks
That's a really low-quality image that you've used. Do the rescale using a decent graphics tool. The concept is great, it just needs work.
I'm not an expert on logos but I like the look. At first glance I didn't see that @ # Pal = At Hash Pal though. I still have trouble wrapping my head around the tic tac toe board becoming a hash...
@qwikad.com Is this created using the same tool I used? If so, please let me know font name you selected. Thanks
I think that for a logo it's cluttered, but eventually depends on who you want to sell to and what you want to communicate with your identity. Make sure you revise the whole color communication code for your website, select a unified palette and please refrain from the blue shades you are using since they are defaults. Considering the logo, I would go with the following: - Do away with the girl giving thumbs up (photos in logos are generally a no-no) - Pick a more emphatic (and bolder maybe? font) - Remove the shadow , maybe even the multiple colors. - Watch out for the kerning (ie. space between letters). Good luck with your endeavour
Considering 90% of what you have there is just text, why not just generate it client side with webfongs? I really think most of the problem is that the spacing around things -- the text in the image, the trending next to the image, and so forth is inconsistent. It's all over the place. Even consistent margins/padding are one of the key differences atwix amateurish and professional. I would lose the stock photo, pick a fancy webfont, make the @#pal line larger or perhaps use a wider font, letter-spacing, and-or transform, and then make the text below it a single line instead of two. The "athashpal.com" line below it (before the menu) I'd probably swing an ax at too, it just feels out of place. Of course with the <style> and style="" crapped all over the markup, that page REALLY needs to be pitched in the trash and started over. Much less the gibberish use of numbered headings (h4 preceding the h1, H1 doing H2's job, IMG doing H1's job, etc, etc), paragraph doing label's job, clearing DIV like it's still 2003, absolute URI's for nothing, outdated character encoding/type meta, overstuffed/useless TITLE, blocking scripts in the HEAD, lack of media targets... Not a shock you don't even really have a layout yet and it's 49k of markup for 11k of markup and around four dozen media elements, likely not even 35k of markup's job. Honestly the page is so poorly coded and not even far enough along in design to even be thinking about the logo; what with it being saddled with nearly two decade out of date markup, something that should be fixed / complete LONG before layout and presentation is addressed. But yeah: <h1> <a href="/"> <span>@<span>#<span>Pal</span></span></span><br> <small>Hash Karo - AtHashPal.com</small> </a> </h1> Code (markup): Do the rest in your stylesheet!
deathshadow You are right that the page needs a complete code from scratch, am just trying to find some time to get there. The <h4> in the top is for people with screen readers, even I did not wanted it there. Those <h4> are allowing screen readers to jump to sections without going through a lot of text and links. Like, there are over 20 links in the "Trending Now" section. If someone on screen reader wanted to click a link in the menu "login", they will first have to read all those 20+ links before they can reach that "login" link. With a <h4> heading preceeding menu, they simply hit "H" on keyboard and are now on the menu. 2-3 arrow keys down, they reach login link.
Yes, that's what headings are for, but those are the WRONG headings! If anything they should be H2 after your logo is a H1... with the current H1 also being a H2 inside of -- as much as I hate to admit it -- a MAIN tag... in which case the menu should have a HR or hidden H2 as well. Though heading navigation should be "wrong" for getting to the menu, that's what focus navigation and (in theory) accesskeys are for. If anything leading with a H4 should be having the screen readers screw up, either rejecting your entire heading structure entirely, or getting confused and refusing to navigate to the H1. What those headings even have to do with the menu in the current form is beyond me, since it's skipping PAST the non-semantic menu thanks to it having no heading and all those anchors blindly slopped into it without a list. Semantic markup and logical document structure FIRST!!! You've got the same type of nonsensical broken markup that's why bootcrap is a steaming pile of borked junk on the accessibility front!
Just to illustrate what I mean, where you have this gibberish nonsense of two big run-on sentences with no logical dividers and even more nonsensical use of numbered headings: <div id="page"> <div id="top"> <a href="https://athashpal.com/" style=" border: none; padding: 0px; margin: 0px; "><img src="https://athashpal.com/images/HashKaro.png" alt=" logo athashpal.com " style=" border: none; padding: 0px; margin: 0px 10px 2px 10px; float: left; " /></a> <h4 style=" margin: 1px; padding: 1px; "> Trending Now </h4> <a href="https://athashpal.com/tag/IndiaNEWS">#IndiaNEWS(1.3 K)</a> <a href="https://athashpal.com/tag/Exercise">#Exercise(72)</a> <a href="https://athashpal.com/tag/National">#National(65)</a> <a href="https://athashpal.com/tag/WorldNEWS">#WorldNEWS(59)</a> <a href="https://athashpal.com/tag/StockMarketNEWS">#StockMarketNEWS(45)</a> <a href="https://athashpal.com/tag/MunafaSutra">#MunafaSutra(45)</a> <a href="https://athashpal.com/tag/hobbies">#hobbies(35)</a> <a href="https://athashpal.com/tag/inspiration">#inspiration(30)</a> <a href="https://athashpal.com/tag/SelfImprovement">#SelfImprovement(30)</a> <a href="https://athashpal.com/tag/Bollywood">#Bollywood(30)</a> <a href="https://athashpal.com/tag/Health">#Health(19)</a> <a href="https://athashpal.com/tag/CoronaVirus">#CoronaVirus(17)</a> <a href="https://athashpal.com/tag/International">#International(17)</a> <a href="https://athashpal.com/tag/Cricket">#Cricket(16)</a> <a href="https://athashpal.com/tag/Business">#Business(12)</a> <a href="https://athashpal.com/tag/India">#India(11)</a> <a href="https://athashpal.com/tag/COVID19">#COVID19(9)</a> <a href="https://athashpal.com/tag/WATCH">#WATCH(7)</a> <a href="https://athashpal.com/tag/trending">#trending(6)</a> <a href="https://athashpal.com/tag/Corona">#Corona(6)</a> <a href="https://athashpal.com/tag/Fitness">#Fitness(6)</a> <a href="https://athashpal.com/tag/ReadInstead">#ReadInstead(6)</a> <a href="https://athashpal.com/tag/world">#world(5)</a> <a href="https://athashpal.com/tag/sports">#sports(5)</a> <a href="https://athashpal.com/tag/Gardening">#Gardening(5)</a> <a href="https://athashpal.com/tag/Cinema">#Cinema(5)</a> <a href="https://athashpal.com/tag/CoronavirusPandemic">#CoronavirusPandemic(4)</a> <a href="https://athashpal.com/tag/HealthDiet">#HealthDiet(4)</a> <a href="https://athashpal.com/tag/Kurio">#Kurio(4)</a> <a href="https://athashpal.com/tag/weightLoss">#weightLoss(4)</a> <div style=" clear: both; "> <h4 style=" margin: 1px; padding: 1px;"> athashpal.com </h4> </div> </div> <div id="banner"> <a href="https://athashpal.com/login"> DashBoard </a><a href="https://athashpal.com/"> Home </a><a href="https://athashpal.com/post/"> Posts </a><a href="https://athashpal.com/login"> Login </a><a href="https://athashpal.com/newPost"> Start new Topic</a> <a href="https://athashpal.com/submitURL"> Submit Website</a> <a href="https://athashpal.com/manageListing"> Manage Best of Web </a><a href="https://athashpal.com/editProfile"> Edit Profile </a> </div> </div> <div id="clear: both; text-align: center; "> <center> </center> </div> <div id="main"> <div id="co"> <h1> AtHashPal.com The Modern Way To Connect! See what YOU want to see, not what your friends want to show you!!! athashpal.com </h1> Code (markup): It should probably go something more like: <header> <h1> <a href="/"> <span>@<span>#<span>Pal</span></span></span><br> <small>Hash Karo - AtHashPal.com</small> </a> </h1> <h2>Trending Now</h2> <ul id="trendingNow"> <li><a href="/tag/IndiaNEWS">#IndiaNEWS(1.3 K)</a></li> <li><a href="/tag/Exercise">#Exercise(72)</a></li> <li><a href="/tag/National">#National(65)</a></li> <li><a href="/tag/WorldNEWS">#WorldNEWS(59)</a></li> <li><a href="/tag/StockMarketNEWS">#StockMarketNEWS(45)</a></li> <li><a href="/tag/MunafaSutra">#MunafaSutra(45)</a></li> <li><a href="/tag/hobbies">#hobbies(35)</a></li> <li><a href="/tag/inspiration">#inspiration(30)</a></li> <li><a href="/tag/SelfImprovement">#SelfImprovement(30)</a></li> <li><a href="/tag/Bollywood">#Bollywood(30)</a></li> <li><a href="/tag/Health">#Health(19)</a></li> <li><a href="/tag/CoronaVirus">#CoronaVirus(17)</a></li> <li><a href="/tag/International">#International(17)</a></li> <li><a href="/tag/Cricket">#Cricket(16)</a></li> <li><a href="/tag/Business">#Business(12)</a></li> <li><a href="/tag/India">#India(11)</a></li> <li><a href="/tag/COVID19">#COVID19(9)</a></li> <li><a href="/tag/WATCH">#WATCH(7)</a></li> <li><a href="/tag/trending">#trending(6)</a></li> <li><a href="/tag/Corona">#Corona(6)</a></li> <li><a href="/tag/Fitness">#Fitness(6)</a></li> <li><a href="/tag/ReadInstead">#ReadInstead(6)</a></li> <li><a href="/tag/world">#world(5)</a></li> <li><a href="/tag/sports">#sports(5)</a></li> <li><a href="/tag/Gardening">#Gardening(5)</a></li> <li><a href="/tag/Cinema">#Cinema(5)</a></li> <li><a href="/tag/CoronavirusPandemic">#CoronavirusPandemic(4)</a></li> <li><a href="/tag/HealthDiet">#HealthDiet(4)</a></li> <li><a href="/tag/Kurio">#Kurio(4)</a></li> <li><a href="/tag/weightLoss">#weightLoss(4)</a></li> </ul> <h2 class="optional">Main Menu</h2> <ul id="mainMenu"> <li><a href="/login">DashBoard</a></li> <li><a href="/">Home</a></li> <li><a href="/post/">Posts</a></li> <li><a href="/login">Login</a></li> <li><a href="/newPost">Start new Topic</a></li> <li><a href="/submitURL">Submit Website</a></li> <li><a href="/manageListing">Manage Best of Web</a></li> <li><a href="/editProfile">Edit Profile</a> </ul> </header> <div class="contentWrapper"> <main> <h2> AtHashPal.com The Modern Way To Connect! See what YOU want to see, not what your friends want to show you!!! athashpal.com </h2> Code (markup): The H2 inside MAIN taking precedence over the ones above it. (and the comedy being it's 5/6ths the code size even with the additional missing tags and more whitespace!) THOUGH, if one really cared about navigating past so many anchors, you wouldn't have it in the header to being with as that's nonsensical and doesn't get you to what's important -- the menu and main content -- as quickly. That's poor copy writing. If you "really" want it up there from a layout standpoint these days that's the job of flex-order or grid. Right now I'd probably go with grid-template and say "oh well" to the tags showing up at the bottom of the page in IE. You don't blindly jump to H4 when there's no H3 for it to mark the start of a subsection of, or H2 for that H3 to be a subsection of, or H1 for that H2 to be a subsection of... Remember, when possible H1 should be your FIRST content bearing element as it is THE (singular) heading (singular) that everything on every page of your site is a subsection of! Hence what you had H1 on is ALSO gibberish.
Hmmm... Given me a lot to think about. Will implement your suggestions in this site as soon as I can et to it. Many thanks for the suggestions.