The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

This article gives you the heads up in handling ethical disagreements with clients http://depot.ly/l851d

Nice collection of beautiful and inspiring typographic quotes http://depot.ly/l88ph  #typography

Do we follow the drunkard’s search pattern when solving design problems? http://depot.ly/l89cn  *Great #UX found via @smashingmag

You might find something useful here: iOS resources http://depot.ly/l8ci5

Test your geography skills & explore the world with the Google Maps Street View based game: http://geoguessr.com

Google to let you create your own HTML tags http://depot.ly/l5rdH  @CreativeBloq

Short, handy & quick tip: How to do a word count in Indesign http://depot.ly/l5qFA  /@creativenerds

Cool! This great real-time map shows Wikipedia articles being edited round the world http://depot.ly/l3dkZ

Exceptional mixed-media portraits by Nicky Barkla http://depot.ly/l3bMG  *We love Frankenstein & Hulk. You?

Everybody freeze: it’s a flower! http://depot.ly/l3b5D  Sonia Rentsch’s weapons made of plants

Where is ‘Top of Mind’, and How Do I Get There? http://depot.ly/l38nV  *A good read

Syndifeed Is A Simple And Clutter Free RSS Reader. See it here: http://depot.ly/l38kn

How the 2013 World Press Photo of the Year was faked with Photoshop http://depot.ly/l0Uxf

Why Freelancers Are Saving The Internet http://depot.ly/l0UbK  via @hongkiat

13 Timeless Lessons from the Father of Advertising http://depot.ly/kX8Up

Common Patterns in Styleguides, Boilerplates and Pattern Libraries http://depot.ly/kX8dj

10 (and a half) favorite reads from TED Bookstore 2013 http://depot.ly/kTPjJ

Here’s an interesting article: The Debate Around Responsive Design in Mobile Banking http://depot.ly/kX8as

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Create an HTML5 Browser Game from Scratch – only $19!

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Organically lost

The fiction capacitor

Good clients, bad clients

Can you relate to these situations? Please share your funny stories and comments below…

Create an HTML5 Browser Game from Scratch – only $19!

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers before captions.

In this example I will be demonstrating how to achieve this by creating a simple recipe for pancakes and making CSS search for the beginning of each paragraph and adding the number of the step before it.

The HTML

<section>
	<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
	<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
	<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
	<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
	<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>

The objective in this HTML is that each paragraph is a different step and with CSS we can add those dynamically by writing as little as 3 lines of code.

The CSS

CSS counters use the property counter-increment. It has been around for a while it was actually implemented in CSS 2.1, to use it we must first reset the counter’s default value to 0 before anything we want to count shows up on the page, so it’s a good idea to define this in the body styles, like so:

body {
  counter-reset: steps;  
}

This line just sets the counter back to 0 and it also names it, allowing us to later call it and also allowing us to have more than one counter on the page.

The next step is to use the pseudo element :before to target all the paragraphs and add the step number before all the text begins. To do that we need to use counter-increment, then specify the content. We can just use the number or we can append or prepend some text , in this case we’ll prepend “Step ” before the counter’s value, like so:

p:before {
  counter-increment: steps; 
  content: "Step " counter(steps) ": ";
}

We should also make this content stand out a little and to do that we’ll give it a bigger font-size than the paragraphs and make it bold:

p {
 color: #242424;
 font-family: arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
}

p:before {
  counter-increment: steps; 
  content: "Step " counter(steps) ": ";
  font-weight: bold;
  font-size: 18px;
}

If you want to see this idea in action, you can see the pen I created.

Browser support

A constant concern when working with CSS is the browser support, but since this is a CSS 2.1 implementation the browser support is great: it’s supported by all major browsers, desktop and mobile , the only significant browser that doesn’t support it is IE7, and according to my stat counter IE7 is used by only 0.61% of people so I think we can say that IE7 will be departing soon. Whether or not you need to support IE7 is dependent on the stats of your own site.

Conclusion

CSS counters is not something that you will use in every project but it’s something that you should keep in the back of your mind because someday it may come in handy.

Have you used CSS counters in a project? What uses can you see for them? Let us know in the comments.

Featured image/thumbnail, counting image via Shutterstock.

Create an HTML5 Browser Game from Scratch – only $19!

Talent for space, shapes and colors would never be enough until I learned to open my mind. Just having the talent to enthrall the other kids in my class, the “normal ones” who would gather around to watch me draw dinosaurs eating army tanks and superheroes ripping the head off our teacher and then point and tattle to that very same teacher that I was drawing naughty pictures — the very same kids who grew up to be Wall Street brokers, lawyers and politicians — would not be enough to make me an artist for my career. As I would find out years later, neither would art school. Not at first.

Things were different in high school. I was allowed to take elective courses and chose, of course, lots of art classes. I spent three of five days in my week with the same teacher, in the same room, just trying different things, using whatever material I could find, or sitting, copying the drawings of Jack Kirby, hoping one day to be a comic book artist like him. I actually got to meet the man and shoved my ripped out notebook pages with various sketches at him. “Yeah, very nice, kid!” he said with a big cigar clenched in his teeth. With that rave review, I continued on the same path until I stepped into art school.

Eighteen year-old mind of moosh

©GL Stock Images

I started art school by taking a few night courses while working days and it all seemed so easy when I got to pick my lessons. To their credit, when I entered full-time, the school required a foundation year of exploratory classes; painting, sculpture, life drawing and art history. Little by little, the ability to draw like Kirby was ripped from me and I resented my “idiot teachers” as artsy-fartsy types who knew nothing. There was that bull-headed nature of mine that held me back from so many things and so much understanding in life.

It wasn’t until my sculpture teacher, another poor soul I labeled as an idiot, without fair cause, failed my term paper, that I started my road to understanding how to open my mind to creativity. She had taken us to an art show in lower Manhattan, in a sand-filled lot and gave us a tour and explanation of each piece, which naturally I ignored. The show, Art on the Beach, was, as I think about it now, brilliant, thoughtful and creative. How I regret entitling my term paper, “Fart on the Beach.”

It wasn’t hard enough she failed that paper but she also opened it up to class discussion as to why I failed. I was mortified and I’m sure, red as the devil as she went over why I was wrong in front of my friends and the usual art school douche bags in the class, the ones who took delight at another student being torn to pieces. When she finished, the douche bags started in on what they thought of me and while I remember wanting to walk out, swearing at all of them, never to return to school, I didn’t. I took my lumps and just figured they were morons who would never amount to anything.

The teacher insisted that she and I revisit the exhibit so I could rewrite my paper. “Fart with the Bitch” I cruelly joked to my friends as we smoked a joint in the park between classes. I sadly regret that title now as it serves to remind me how unbearable I truly was.

Meeting at the sandy lot again on a hot spring day, the teacher walked me around the exhibit again explaining how each piece was important and the thought and purpose behind each one. The face-to-face, one-on-one interaction didn’t allow me to ignore what was being said and what I was learning. I opened up a little more — more than I had in my life, I must admit. I rewrote my paper and received an A grade. I also considered what the supreme douche bag in the class had yelled at me, embarrassing me in front of my peers, that I “always did the same thing in all of [my] classes.”

A good beating knocks sense into most of us

©GL Stock Images

From that point, I started to explore. Whatever my mind told me to do with a sculpture or drawing, I did something completely different — something I would never consider doing — something completely alien to my sensibilities. It was my first step into being creative.

It wasn’t, however, a complete and instant transformation then and there. It took years for me to understand the message many teachers were trying to hammer into my thick skull. One teacher, a famous magazine art director, who I admired for his position, autographed one of his magazines for me at the end of the semester with the inscription, “it was a pleasure having you in my class and watching you completely miss the message.”

At the time I laughed but years later, as I apologized to him in an email, I understood what he meant. I had missed his message as I did with many great teachers, some too long gone for me to thank and apologize to them. To their credit, they must have seen something in me that I couldn’t see myself — something yet to be released, past my stubbornness.

Don’t be good, be GREAT!

The motto of my alma mater was, “being good is not enough when you dream of being great.” Surely that is what every creative wants out of life and as my career went on I couldn’t understand why I was never truly happy with my work. I hid myself in studio jobs administrating, rather than designing but I couldn’t stay away. I worked as an illustrator for years but again, it just didn’t click with me. I considered myself mediocre and that’s a terrible feeling to have. Sure, there are mediocre creatives who consider themselves great and aren’t but to have talent and not be pleased with yourself is torturous.

From that point on, doing good work was not enough; it had to be GREAT! Part of that thinking was to look at an idea when I was done and say to myself, “this is good, but what’s the next step that will make it great?”

I do remember the day I had my creative epiphany. I had left a very constrictive design job where every editor and administrator fought to rule the output of the art department. What came out was boring garbage and I was glad to be out of a place that made me physically sick before leaving for the office each and every morning.

I was interviewing for a job with Tom Corey, the owner and creative director of Big Blue Dot. During the interview, he asked me to name some of my favorite logos. I told him I thought the most innovative logo was the Nickelodeon logo ( this was in 1998 and not the current logo). He smiled and asked if I knew he had designed the logo. He explained his thought process behind creating a kinetic logo where the standard was the simplicity of the type, always white against the Nickelodeon palette of orange. Within any shape, be it a ball, dog, rocket, bird or what-have-you, the type would remain the same for the identity. He also gave me an inside look at his newest logo creation for the Noggin channel.

©Nickelodeon/Viacom

©Noggin/Viacom

As with the Nickelodeon logo, the Noggin logo was ever-changing with the static smiling lower face. Absolutely brilliant and inspiring!

Yes, it was the late Mr. Corey who shot me between the eyes with the creativity bullet. He kicked my ass over the line of good into understanding great. I didn’t get the job but the lesson on creative thinking was worth more than he was willing to pay me.

©GL Stock Images

As my career progressed, with my confidence in my abilities and excitement at new challenges, my peers laid praise on me as a brainstorming genius, a conceptual master and, at my last position, I received certain tags such as the “King of Die Cuts” and the “Master of Paper Engineering and Evil.” I’m not sure what the evil part was, but I’ll take any clean, professional nickname I can get.

What you should take away from this

When I speak to students entering art school, I like to start by insisting they respect their fellow students as they will form the important network that will follow them through their careers. The second thing is to impress upon them the importance of opening their minds to new things and new ways of thinking.

There are different teachers with different thoughts on design and each one has something great to take away as their student. Open your mind to the possibilities and not the boring realities you have learned in eighteen years of life. There are many, many more years of growth and realization of what can be and not what others say things should be.

When I speak to senior art students, about to graduate and enter the industry, I again remind them about their base network of their classmates but the important thing I want them to remember is to look at their finished work and ask themselves, “is this good or is it great? Is there a step I’m missing? What could be done to take this to the final level?”

What makes GREAT work?

There is always another dimension that can be explored, another step that can be taken before falling over the edge… and that falling over the edge is sometimes how we learn to fly. Logos can be more than just a signature for a business — they can be a personality. Even to look at the brilliant type work of Ji Lee, and his ability to see more than words is amazing and inspirational to every designer.

©Ji Lee

Why does a logo have to have the same parameters they have had for centuries? In the age of digital movement, paper-thin t-ink and lenticular technology, what is the future of paperless logos?

Web sites, applying the same thinking, can be an immersive experience and not just a layout of blocks of information. It’s not just the delivery of information through programming languages and other web technology that defines web design — it’s how sites and apps are designed by look and function. Will you be able to look at a site you’ve designed and see a level of innovative design no one else has seen? Can you say, “how will I make this different and exciting?” This is the freeing process to experience a leap into a creativity you have never thought you could imagine.

Even the use of graphic software allows for effects that can be taken to a level of wondrous creativity. Take the textbook lessons and explore how they can be twisted and turned and you can discover something great. Although a tool, we are the masters of our computer and not the other way around.

As with the paper engineering I mentioned before, why does an ad, brochure or billboard have to be a rectangle? Why does a piece of paper have to lie flat in two dimensions when it can be three dimensions? Imagine all possibilities your designs can have and take it farther… as far as your mind will allow and budgets be damned! It’s better to aim high and let others bring you back to Earth.

Yes, it will be disappointing at times but within you, the feeling of the ability to put forth your best… to be great and not just good, is a feeling you will always treasure. If I look back over my career, I feel a sick anxiety about the early years. I suppose I should cut myself some slack about being young and headstrong, as youth can be, but I still, as part of my bull-headedness, hate the time I wasted not thinking creatively. It bothers me more than having to tone down my great ideas into just good solutions due to someone else. At least I know my own capabilities and that’s the point of being a designer.

Have you ever faced a moment of epiphany with your sense of creativity? Do you feel you are still waiting for such an epiphany? What has inspired you to reach farther with your sense of creative thought? Let us know in the comments.

Featured image ©GL Stock Images

Create an HTML5 Browser Game from Scratch – only $19!

It’s no surprise then that the bread and butter for most web designers is not site design, but redesign.

On the surface, redesign looks easy; you have a starting point, with some real world data on what is and isn’t working for your client. Once you dive a little deeper you’ll find redesigns are a minefield of competing ideas. It will take all of your skill to exploit the current site’s successes and identify its failings.

Moreover, there is no room for error in a redesign. Clients have often been burned by poor results in the past and are more cautious. They’re more likely to have spent a long time analyzing their site themselves. They’re probably frustrated by the need for a redesign, or what is sometimes worse, they’re so excited by it that they’re spilling over with ideas, many of which aren’t appropriate.

Happily, there’s a lot of great advice available on how to tackle this tricky task and one of the best sources is Smashing Magazine’s current set of eBooks. Worth nearly $40, our sister site MightyDeals.com has arranged a 40% discount on this great set:

“Smashing Book #3: Redesign The Web” is 340 pages of advice on vital subjects like: the business aspects of redesigning a site; platform considerations; upgrading code to HTML5 and CSS3; important considerations of mobile design; and of course, going responsive.

“Smashing Book #3 1/3” takes redesigns to the next level: insert ‘story’ into your redesign to engage users; rethink and repurpose navigation to improve UX; make the site’s content work harder; and there’s even a detailed case study of Smashing’s own redesign.

“Essentials of Mobile Design”, “Mobile Design Patterns”, “Designing For Android” and “Designing For iPhone” cover the essentials of the biggest reason clients cite for redesigning their site: mobile compatibility. Learn the difference between mobile sites and apps, marketing, and the all important responsive techniques you’ll need.

The set of six books comes in DRM-free format, as PDFs, ePUBs and MOBIs, so you can study them however and wherever you like. Head over to MightyDeals.com now to take advantage of this great offer.

Have you read Smashing Magazine’s redesign series? What did you learn? Let us know in the comments.

Featured image/thumbnail, uses surface image via Shutterstock.

Create an HTML5 Browser Game from Scratch – only $19!

Gray hat SEO is, as the name suggests, somewhere in the middle of black hat and white hat. This means that whilst the practices may be perceived by some as being OK, for the most part they still break search engine rules and may result in losing rankings, or worse.

However, it’s important to bear in mind that whilst gray hat techniques can be used for genuine reasons and considered to be a good practice, it’s the abuse of the techniques which has led to suspicion when it comes to using gray hat.

So what constitutes grey hat SEO? Well, there are a number of practices used, which we will look at in more detail below.

To begin with, whilst grey hat techniques can give a site a slight edge over those that utilize white hat only, there’s risk involved. Gray hat SEO breaks the rules and whilst it may not be obvious to Google, there remains a risk that competitor sites may recognize and report the use of it.

Getting down to the nitty gritty

Gray hat SEO techniques include:

• Three-way link exchange: reciprocal links and link exchange have until recently been one of the most commonly used SEO practices for many years. However, this was until Google decided that they don’t like the use of such practices anymore. Changes to search algorithms have really devalued this practice and link building has become more of an art form than ever before.

• Article spinning: this is when software is used to take original content and reword it, in order for it to look fresh and unique to Google. Whilst this is seen to be a way to avoid penalization for duplicate content, there remains a risk of copyright infringement if the content is taken from another site. It’s thought that if an article is spun well, it can still work as an SEO practice, even in the wake of Panda.

• Buying old domains: some webmasters buy up old domains with authority and back links in order to link back to sites which they want to perform well in search.

• Buying expired domains: this is when link spammers monitor DNS records so that they can buy up domains when they expire. The pages of the expired domains are then changed to link to other sites which the webmaster wants to perform.

• Google Bombing: this is when a large amount of links are created in order to perform well in search and is also known as Googlewashing. The sheer number of links mean that the site often ranks high, especially when used alongside keywords, which may, or may not, be off-topic.

• Manipulating content with CSS: for the more experienced user who can code effectively, this is when the code for a site uses CSS to make the content appear lower on a page than it actually is. The reasoning behind this is that Google crawls the content first, thus making the page seem more valuable. 

• Creating a separate page for each keyword: this allows traffic for long tail keywords by creating a new page for each targeted keyword. This is time consuming, even using an article spinner, but said to be effective for some. This technique does require pages to be released slowly to avoid triggering spam filters.

• Microsites: these are used to create different sites for each niche of one business. For example, say it’s a site for a gardener, this can be split down into say landscaping, tree felling and so on. Whilst this can be effective, it has been an extensively abused method and as such, care should be taken, especially for local businesses using the same phone numbers and addresses.

Why use gray hat techniques?

Fairly obviously, these are used in an attempt to beat the robots and allow a site to rank higher in the SERPs than it might otherwise. Whilst gray hat may be considered unethical by some, they remain widely used and of course it’s the ‘gray area’ as to the ‘morality’ of these methods that gives it its name.

Gray hat methods mean taking a risk. If a site wants to use them, then it should be considered that this may result in penalization if they are discovered by the search engines.

However, many SEO experts use these techniques as a way to boost client rankings. If done properly, and responsibly, gray hat methods can manipulate search engine rules without actually breaking them. 

If gray hat methods are used on a site, communication between the site owner, the webmaster and the SEO practitioner is vital to ensure that everyone understands and accepts the techniques.

Whilst many sites start out with the best of intentions, using white hat methods only, the temptation to revert to less pure practices usually comes about if a site isn’t performing well. It’s important for webmasters and SEO experts alike to consider the following:

• Search engine rules change, sometimes quite often, and as such, it’s important that webmasters and SEO practitioners keep themselves bang up-to-date with the rules. This avoids accidentally slipping into gray or black hat methods because of changes to algorithms.

• It’s vital that the site owner is kept informed of the SEO tools used on their website and their permission is given. Using certain techniques may not only have the site plummeting down the ranks, but it could impact on a business as a whole if their reputation becomes damaged.

• Bear in mind that offering incentives to bloggers to review your products can also be construed as gray hat practice. This is because, strictly speaking, the blogger is being paid in one way or another to provide a link back to a site when reviewing a product. Paid-for links are most certainly frowned upon by the search engines.

It’s also worth bearing in mind that there is a reason that search engines change algorithms in order to pick up on certain practices that attempt to trick the system. We’ve all become frustrated when searching to find ourselves landing on a useless pages full of links. The fact that Google has altered its algorithms in an attempt to improve web content can surely only be a good thing.

Social media and gray/black hat

There’s a fine line between ‘good’ gray hat practices and bad and as such, it’s always going to be a risk using it. In this age of social, it’s also tempting to use such practices for gaining a following by ‘buying’ likes.

This should also be avoided, there are thousands of sites that claim to provide genuine likes for a few dollars, but this is rarely a good idea. Much of the time, the likes are not genuine, but gleaned from lapsed accounts that aren’t used anymore.

Whilst social is important to SEO these days, there are several risks associated with buying likes that should be considered. 

• In order to gain the likes, a botnet may be used to propagate them, putting the target account and that of its followers at risk from malware infection.

• Another method for gaining lots of likes is by using people from developing countries to sit there clicking ‘like’ or ‘follow’ for paltry amounts of cash – that is of course then between you and your conscience.

• There is also the possibility of damaging a client’s reputation. If their followers suddenly jump from 500 to 5000, someone is going to notice and it’s to be hoped it isn’t either a client, a competitor or the social media site themselves. This could of course, result in an account being suspended.

When it comes to the crunch, whether gray hat methods are used is up to the individual. However, if they are going to be used it has to be hoped that the SEO practitioner is very skilled. Even then, there’s risk involved, so in order to be absolutely safe in the knowledge that a site won’t be penalized, it’s best to stick to white hat practices.

Have you ever used gray hat techniques? Are you confident that you know what is and is not considered white hat? Let us know in the comments.

Featured image/thumbnail, search image via Shutterstock.

Create an HTML5 Browser Game from Scratch – only $19!

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll also be discussing the advantages of rearranging and resizing responsive elements in a flash, and what that means for your next project’s workflow. At this rate, we’ll hopefully be seeing the back of those pesky clearfixes in the near future!

Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.

Featured image/thumbnail, flexible image via Shutterstock.

Create an HTML5 Browser Game from Scratch – only $19!

Type Fight plays host to weekly “fights” in which two designers are asked to create a typographic treatment of the same character and then have their final designs voted on to determine whose is best. So far, Type Fight has hosted 61 guest fights between design heavyweights such as Alex Perez, Rogie King, Brendan Pittman, and Aaron Eiland, to name a few. There is also an ongoing battle between Drew and Ryan, who are now due to face off for an 11th time.

At the moment the site is on hiatus whilst currently being redesigned. However, you can still check out the old site and all of the fights that have previously taken place.

Here’s our collection of some of the highlights:

Which of these characters are your favourite? Do you have a similar side project? Let us know in the comments.

Create an HTML5 Browser Game from Scratch – only $19!

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

LayoutIt!

LayoutIt! simplifies building your front-end code with Bootstrap, complete with a drag-and-drop interface. You get high-quality HTML5 code starting from any of their basic templates.

Flat UI Colors

Building a flat UI? Flat UI Colors is a tiny app that makes it easy to grab the colors from Flat UI for your project.

Hood.ie

Hood.ie is a platform for quickly building web apps. It’s for frontend-only web apps, and uses an open-source library that’s as simple as jQuery.

Little Nimbus

Little Nimbus offers robust web hosting plans starting at just $.99/month. They offer instant activation, CPanel and PHP, and 99.95% uptime. Plus, there’s a 7-day money-back guarantee.

Resemble.js

Resemble.js is an HTML5 canvas and JavaScript app that analyzes and compares images. Just drag and drop images into the app and it will highlight their diferences.

MixItUp

MixItUp is a CSS3 and jQuery filtering and sorting plugin. It uses jQuery to show, hid, or re-position your elements, and CSS3 for smooth animated transitions. It’s free for person and commercial use.

Web Colour Data

Web Colour Data makes it simple to pull color data from any URL, complete with charts showing the prevalence of each color used.

Userium

Userium is an interactive usability checklist that includes categories for user experience, the site’s homepage, accessibility, navigation, links, search, and more.

WireKit

WireKit is a set of Photoshop shape layers for wireframing iPhone apps that comes in two unique styles, each of which has over 60 common UI elements.

Creative Market Photoshop Extension

The Creative Market Photoshop Extension makes it possible to browse, search, and buy Creative Market assets right from inside Photoshop.

The Productivity Manifesto

The Productivity Manifesto is a free ebook filled with tips for becoming way more productive. Just sign up for the free newsletter for a link to download the PDF.

Froont

Froont is a visual responsive design app with a drag and drop interface. It runs in your browser and even lets you share fully functional HTML and CSS with your developer instead of static images.

Billy Madipsum

Billy Madipsum is a lorem ipsum generator that generates random Billy Madison quotes rather than the standard Latin. All you have to do is choose the number of words or characters and click “Call the zoo!”

Nanoc

Nanoc is a static site builder that works for building everything from a small personal site to a large corporate site. It even works for blogs.

Ruhoh

Ruhoh is a static blogging platform built on a number of existing technologies. It uses Markdown for writing, Mustache for templating, Git for file management, and more. It’s open source and can be hosted or self-hosted.

TowTruck

TowTruck, from Mozilla Labs, makes it easy to collaborate on your website in real-time. It’s implemented in JavaScript, and works with existing web pages.

Perspective Mockups

Perspective Mockups is a set of Photoshop actions for creating more interesting mockups for presenting your ideas. The results are, apparently, crisp and unique.

Scope

Scope is an easy way to create a web-based version of any email to share with others. It’s free and can be used with any webmail.

Packery

Packery is a bin-packing layout library that can be used for a variety of layout types, including masonry-style layouts as well as more meticulous layouts (and even ridiculous ones).

Wired 1.0

Wired 1.0 is a wireframe kit for Sketch that also comes in .png and .eps for use with other programs.

Designer School

Designer School is a regularly-updated online course that teaches more than just the basics of web development. You can join the mailing list for updates, or just check the website.

Slid.es

Slid.es is free online presentation creator that makes it easy to share your work. There are some premium paid features, too, including private decks, offline presentations, and more.

Shame.css

Shame.css is a special stylesheet reserved just for your CSS hacks, quick fixes, and questionable code, so you can keep it out of your main codebase and hopefully isolate and fix it easier.

Gallery

Gallery is a pure CSS image gallery that doesn’t use a single script. It even offers autoplay and comes in prefixed and unprefixed build versions.

Magnific Popup

Magnific Popup is a free responsive jQuery lightbox that focuses on performance and user experience. It’s light and includes retina display support.

Ghost

Ghost is a free, open source, simple blogging platform. It puts the focus squarely on publishing and your content.

LivIcons

LivIcons is an animated icon pack that includes both animated and static images. It uses brand new animation methods, and of course they’re scalable and customizable.

Cylburn (name your price)

Cylburn, from Lost Type Co-Op, is a semi-connected script font based structurally on Roundhand, but with a pointed brush and restrained tension.

Fairview (name your price)

Fairview is a condensed sans serif that comes complete with small cap alternates. It was inspired by 20th century industrial typography.

Style Script ($69)

Style Script is an upright script type family with a variety of looks ranging from casual to formal. It includes over 1275 glyphs, with eight weights and styles.

Trend Hand Made ($19)

Trend Hand Made is a layered font with a basis in sans and slab fonts. It comes in over twenty weights and styles, for a huge variety of design possibilities.

Benito ($20)

Benito is a proportional, geometric woodtype-style font family in six styles with italics.

Tomahawk (free)

Tomahawk is a free display typeface that’s free for personal use. It includes standard Latin characters, as well as a selection of Norwegian characters.

Valkyrie (free)

Valkyrie is a free type family designed for fashion brands and designers. It’s a set of serif fonts with geometric elements in a modern style.

Red Dawn (free)

Red Dawn is a free typeface based on camping and trailblazing marks. It’s an all caps display font, with a very bold look.

Agilis (free)

Agilis is a stylized serif typeface that includes 394 glyphs, ligatures, and automatic arrows.

Idealist Sans (free)

Idealist Sans is a free type family that includes regular and light weights. It was designed by Elena Kowalski.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments.

Create an HTML5 Browser Game from Scratch – only $19!

Whilst many in the web design community bemoan Adobe’s lack of foresight, there are others — myself included — that don’t quite understand the fuss. It’s just a piece of software, and a niche one at that, so what’s the big deal?

It seems for a great number of designers, Fireworks is the only tool they’re prepared to work with.

Here’s a confession: I’ve installed Fireworks on my machine twice; once to try it out, around 8 years ago; and once to research this article. Both times it lasted less than a day before being uninstalled.

I’ve heard the arguments in favor of Fireworks before. We regularly have articles submitted to WebdesignerDepot that extoll the use of Fireworks over any other application. I’ve been told that any designer who doesn’t use Fireworks is stuck in the past, too lazy to learn something new. The problem is, that none of these arguments have ever seemed to ring true:

I’m lead to believe that Fireworks exports sliced HTML better than Photoshop. The problem is, that the last time I allowed an application to code HTML for me it laid out the page in tables — and yes, that was standard at the time. We simply don’t slice images any longer; responsive design, flat design, the mobile web, SEO; everything considered good practice by contemporary web designers is hampered by image slicing.

Fireworks exports CSS, but then so does Illustrator, and so do a number of other tools. I’ve never seen one that could write CSS as succinctly as I can, especially when SASS or LESS are taken into account.

The main use, and main argument of flag waving Fireworks supporters is that Fireworks is superb for rapid prototyping web page mockups. That may have been the case a few years ago, but how does one approach prototyping responsive design in Fireworks? Fireworks creates pictures of static websites, which makes it about as useful for mockups as…well…Photoshop. Admittedly, not all designers are fans of designing in the browser. But even for those who can’t code, products like Typecast are far more advanced than Fireworks.

The current assumption is that Adobe will plunder Fireworks’ features and attempt to crowbar them into Photoshop and Illustrator. However I find that unlikely; both Photoshop and Illustrator are distinctly different tools. It’s unlikely that Adobe would compromise the premium raster and vector programs on the market in an attempt to win over former Fireworks devotees. It’s more likely that Adobe sees the future of web mockups in the Edge line of tools. Animate and Reflow are available now in beta, and show a great deal of promise.

It’s also important to recognise that Adobe are not comparing current versions of tools. Their development team has sat down and compared what they can do with Fireworks over the next decade, compared with what they can do with the likes of Reflow, and came to the conclusion that Fireworks will, sooner or later, be deadwood.

One thing that is interesting is that Adobe haven’t also pruned Flash from their line up. The Flash platform still has its uses; AIR applications, mobile apps and gaming are all well suited, but they’re better served by Flash Builder, it’s difficult to see why Flash Professional dodged the bullet. Why would Adobe kill off an application that is at best loved and at worst ignored; whilst saving an application almost universally abhored?

The show of support for Fireworks from the community has reaffirmed our belief that Adobe should continue to deliver dedicated tools for web designers — what follows Fireworks CS6 will be an revolutionary leap, designed from the ground up with the needs of the modern web designer front and center. — Adobe’s Web Platform and Authoring Team

For the time being Fireworks CS6 remains part of the Creative Cloud subscription. However, with its now inevitable decline, it’s hard to see Fireworks as a realistic option for web design. Many will seek an alternative, and Adobe will be hoping that their new products will inspire the same loyalty that Fireworks users are now showing.

Has anyone not using Fireworks missed out? Is Fireworks still relevant for web design? Will you miss it? Let us know in the comments.

Featured image/thumbnail, Fireworks image via Shutterstock.

Create an HTML5 Browser Game from Scratch – only $19!