Essential Designer Sites

and published

Hey! Fellow website designers!

I have handpicked some of the very best websites that no designer should go without, these websites are top quality and without a shadow of doubt will help you learn new things, work more productively or even help you deliver better projects. It’s extremely likely that an advanced designer already has these sites bookmarked! If you don’t, then you should.

Enough with the intro let’s get on with the show!

Stack Overflow
stackoverflow

At number one we have Stack Overflow (SO) for plenty of reasons. SO is a community driven Q&A site that has some of the brightest programmers around. SO covers all the programming needs of a website designer, should you be having problems with your HTML, JavaScript or even CSS then the community of SO will have your back.

Simply search for your issue and if you can’t one similar then create one! Typically you can expect an answer within a few hours, but if the question is complex then you may need to run a bounty on the question.

You can run a bounty on your question once you have earned enough points, you can earn points by helping other people with questions that you know the answer for, simply leave an answer and if the community agrees with your answer they will up vote your answer therefor rewarding you points and if the person asking the question believes the answer fixes their issue then they can accept your answer and further increasing your points.

Stack Overflow also has an achievement coins (gold, silver and bronze) which are rewarded for all types of stuff, from answering a zillion questions to simply visiting the site every day for a whole year! While the points are purely for fun they are extremely useful for bounties for questions that you just can’t solve or for questions that you need answered super quick.

No matter how good of a website designer you believe you are at some point your mind will go dead and your look to communities for answers. If at all possible I highly recommend you post your code alongside with a JSFiddle, as questions with code and JSFiddles are often better received by the community of SO. Due to the great community and staff at Stack Overflow they easily steal top position.

Awwwards
awwwards logo

Whether or not you’re an advanced or beginner website designer at some point your need some ideas and inspiration. Awwwards features some of the best websites around for both visually pleasing and for UX. Not much more can be said about Awwwards but do ensure that you bookmark them and keep track of design trends, as these can help you deliver design projects that are current which will ultimately keep your clients happy, and returning.

W3C Markup Validation Service
W3C markup validation

Sadly, some of the most creative and advanced designers around tend to forget the importance of valid code, while SEO and Google doesn’t care so much about validation, browsers sure do. Having clean and valid code ensures that your designs will work correctly as intended.

Invalid code may appear ok in one browser but in another may fail, checking your code throughout the designing process will help you code better, ensure your websites will work correctly unless linked to a CSS issue. Always ensure you use W3C Markup or something similar to validate your code.

Can I Use
can i use

One of the most important factors of designing a website is keeping your customers happy. Designing a website that works well in one browser and not another isn’t going to win you any points with your customers, Can I use will help you understand what features are supported by which browsers.

Knowing what is and what is not supported by browsers can help you inform your customer upfront of design challenges. Knowing the design challenges ahead will allow you to notify your customer with any additional costs. Most customers will only complain if something isn’t supported or if you try and charge them more once you have started working for them.

Adobe Color CC
adobe color cc logo

Previously known as Adobe Kuler, Adobe Color CC is a great online web app for creating colour schemes. Simply use their unique wagon wheel to generate a colour scheme that works for you, or if you need some inspiration or ideas, then you can browse through the thousands of colour themes generated by other website designers.

Another cool feature of Adobe Color CC is you can save your colour theme on your browser or Apple iPhone and then sync the palette scheme on Adobe’s Creative Cloud. This is a great way of importing colours to both Adobe Photoshop and Illustrator with just a few clicks of the mouse button.

Lorem Ipsum
lorem ipsum

One of the more obvious essential choices is Lorem Ipsum. It’s likely your using or seen Lorem Ipsum be used by designers all over the world, Lorem Ipsum is great for producing realistic mock-ups. You can also find many other Lorem Ipsum generators online in various humorous forms such as Bacon Ipsum, Veggie Ipsum and Tuna Ipsum.

WordPress Codex
WordPress Codex

One of the main reasons that WordPress is the world’s most popular content management systems is that it’s easy to design websites with. WordPress documents code development very well through its codex site, I’ve never met or heard of a website designer that does not support WordPress theme development, and this is why it’s one of the most essential websites in my honest opinion.

The codex site offers detailed information about WordPress features, download and installing advice, current WP version, news, troubleshooting and even an active support forum which is powered by the power of the WP community.

If you don’t know how to code WordPress themes then you should, it’s easy to use, easy to code and great for customers with little or no previous experience in blogging or posting pages.

Schema
schema essential for good website designers

Developing a great looking website for a company is a good thing to do, but search engine rankings to most businesses are equally as important, if not more important! After all, what’s the point in a great looking design if it doesn’t reach the intended audience?

Schema is a collaborative and community driven vocabulary that helps search engines understand information on web pages, and can even provide richer search results such as reviews stars. Backed by Google, Yahoo, Microsoft and Yandex, it’s no surprise that millions of web design freelancers and agencies are incorporating Schema into their designs.

At BYBE we use Schema to inform Google that we are local web design company in Bournemouth, here’s an example how easy Schema is:

<div itemscope itemtype="https://schema.org/LocalBusiness">
	    <span itemprop="name">BYBE</span>
	    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
	        <span itemprop="streetAddress">Flat 11, East Cliff Grange <br>35 Knyveton Road</span>
	        <span itemprop="addressLocality">Bournemouth</span>, 
	        <span itemprop="addressRegion">Dorset</span>,
	        <span itemprop="postalCode">BH1 3QJ</span>, 
	        <span itemprop="addressCountry">UK</span>
	    </div>
	    T: <span itemprop="telephone">01202 949749</span>
	    M: <a href="mailto:[email protected]" title="Email Us"><span itemprop="email">[email protected]</span></a>
	</div>

Learning Schema will only take you a few hours and once you’ve used it on a few designs your will become a master. Without a shadow of doubt using Schema will help your clients and will allow you to provide a better rounded service with minimal disturbance to your normal design process. Be sure to bookmark Google’s Developers Structured Data Markup Helper and Structured Data Testing Tool.

CSS3 Generator

CSS3 Generator

CSS3 Generator is simple and quick to use for rapid referencing of popular CSS3 code. Not necessary an essential because you may use a CSS3 cheat sheet but none the less noteworthy because it’s quick, easy to use and will populate your code ready for copying, oh and did I mention the website is fast? And almost ad-free? Great huh? 😉

CSS3 Generator currently supports the following CSS3 related code:


Know something we don’t? Don’t be shy about it then, leave a comment below!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

5 Responses to “Essential Designer Sites”

  1. Nice designer list! I’m in the process of becoming one myself, just a few years left at Uni and I’m done.

    Reply
  2. Cherilynn

    Life is too short and these sites with help me design sites faster than ever! thanks.

    Reply
  3. Matthias

    Thanks for the great tips! I do have a question however that I think you could probably answer. I was wondering, When you do a mockup design for a responsive website, do you do a mockup for every possible screen sizes?

    Any insight would be greatly appreciated!

    Reply
  4. Baskin

    Very nice article, thanks.

    Reply