For more experienced designers setting text may come naturally but for those who are just starting out I’ve decided to put together a list of the basic do’s and don’ts. Not only will this list teach you the fundamentals but you can also use it as a check list to work through on future projects. Here goes:

DO establish a typographic hierarchy

A typographic hierarchy can be established by using a variety of methods such as size, weight, color, and contrast. Its purpose is to give pages structure and guide the user through the content. Without a clear hierarchy the text becomes much harder to scan and therefore generally harder to read. Just take a look at the examples below. On the left the text is one size and one weight so it’s hard to differentiate between headings and body text. Meanwhile, on the right, we have the same content but with a clear typographic hierarchy, so it’s much easier to distinguish between the different elements.

Here I’ve only used size and weight to establish my hierarchy but for even better results you can try to experiment with color and contrast as well.

DON’T make the text too small

Not everybody has 20-20 vision so it’s important to make sure that your body text is big enough for people to read comfortably. Personally I would recommend no smaller than a size of 14pt.

DO choose an appropriate font for the body text

Another important factor when it comes to your body text is legibility. Although a typeface like Satisfy might suit a design with a hand-made aesthetic, using a typeface such as this for your body text will have a negative impact on your users. This is because it’s much harder to read than your average serif or sans-serif. Look at the examples below and you will notice how much harder your brain has to work in order to make out the words on the left compared to those on the right.

DON’T use too many different fonts on one page

Services like Typekit and Google Fonts may give you access to thousands of fonts but it doesn’t mean that you have to use them all. As you can see from the example below, unless it’s done really well, using multiple fonts can be very distracting. This is why I usually recommend using no more than 2 or 3.

DO give your text room to breathe

A lack of white space between each line can affect readability because it makes it difficult for the eye to track from one line to the next. However, this problem can easily be solved by increasing your line-heights, but be careful not to overdo it, too much space can also affect readability in a negative way.

DON’T make continuous use of all caps

People aren’t used to reading large chunks of text set in all caps and because of this it’s actually harder for people to read. Not only that but people often associate all caps with shouting or aggression and when it comes to marketing copy it can come across quite spammy. Due to this it’s important to think about how and when you’re going to use all caps and to make sure that you use it in moderation.

DO try and limit paragraphs to 40-60 characters per line

If a line is too long the reader gradually begins to lose focus and can often have trouble reading from one line to the next. If a line is too short it causes the reader’s eye to travel back too often, which disrupts their rhythm. This can also make them start reading the next line too soon, causing them to miss words from the previous line. This is why the optimal line length for body text is said to be around 40-60 characters per line.

DON’T use large amounts of centered text

Centered text is difficult to read because the edges of the text block are uneven which makes it harder to scan because each line has a different starting point. Centered text blocks are also difficult to align to other objects on the page and are often considered to look quite amateurish. This is why, like all caps, it’s best to use centered text in moderation, opting for left aligned text as standard instead.

DO make sure there is enough contrast between your text and the background

Contrast is another aspect of typography that can affect readability. If there’s not enough contrast between the text and the background, the content can become illegible.

Do you have anything to add? What tips would you give new designers just starting out? Let us know in the comments.

20 One-Page Responsive Templates with Parallax Effect – only $19!

As any good account handler or project manager will tell you, their primary role is to make sure that a project goes as smoothly as possible. This can mean managing people on both sides of the fence, and keeping everyone happy is no mean feat.

I’m a big believer that getting a project off to a strong start is integral to the success of that project, and for me that means helping the design team hit the ground running, and making sure they can begin doing what they do best as soon as possible.

I’ve read plenty of material recently describing account handlers as having a negative effect on the creative process of a project. These criticisms range from the account handler not allowing the designer access to the client throughout the project, through to making the designer jump through hoops on the whim of a client. Whilst I’m sure these aforementioned criticisms occur every day in the industry, I want to discuss how I believe an account handler can make a designer’s job in a typical web agency so much easier.

1. Planning

For me, the initial stage of a project is one of the most exciting parts of a new website project. It’s the time you get to speak to the client and really get to understand what they want to get out of working with you and your company. However, clients can sometimes be unsure of what they want, and if there’s a big team working on the project at the client’s end, it’s easy to get mixed messages and issues like design by committee becomes a genuine concern.

Whilst it can be beneficial, at times, for the project’s lead designer to be part of these initial discussions, I don’t feel that’s the best use of a designer’s time. This is especially relevant in agencies where a designer might be juggling several projects at once, and their time is even more valuable than usual. I would hate to think of the impact including the design team on all initial meetings would have on the productivity of an agency!

I believe the ability to extract and define a clear set of high level project objectives is one of the main signs of a strong account handler, and putting some of the elements mentioned below in front of the lead designer in an internal kick-off meeting can get things off to a great start and increase the designer’s confidence in yourself and the client:

1. In the client’s words, define what the company does.
2. What is the ultimate goal for the website, and how will it benefit your business?
3. What are the objectives of the website?
4. Describe a typical user of your new website.

It constantly surprises me how often clients struggle to answer these questions, and I don’t feel a designer’s time is best spent helping a client come up with those answers. I want my designer to feel motivated by the task at hand, not be fatigued by helping the client work out the finer details of the project.

2. Assets

If you’ve briefed the team on the project and had that all-important kick-off meeting, it’s more than likely time to begin the project’s wireframing stage. By the time these stages begin, it’s important that an account handler has collected a number of project assets, which could/should include:

1. A signed off website sitemap.
2. A signed off project specification which details features and functionality. This may be absent in the case of an agile process being implemented, but some idea of the intended functionality is always helpful.
3. Brand guidelines and the files associated with this such as logos, typefaces and colour palettes.
4. The content for the website, to allow for accurate wireframes and visuals. This is even more important in a responsive design project, as Steve Fisher and Alaine Mackenzie recently wrote about. This can range from text through to video content.
5. Whilst not being vital, I also provide a project planning document which the client has filled in. This details things like objectives and goals in the client’s own words, which means the team will always have access to a client-orientated brief throughout the process.

Nothing will dampen the enthusiasm for a project quite like the absence of vital materials like the ones listed above. This is the point in the project where it should be all systems go, and having to chase for assets at this stage can really kill momentum.

3. Embracing change

Plans change, and it’s how you adapt to these inevitable revisions that will decide the overall outcome of the project. However, it’s also important that your process is set up to protect a designer and keep their work streamlined. If your designer is complaining that all they’re doing is revision after revision, then something has fallen down in the project process and it’s the designer’s workload that is going to feel the effects of that. If we have successfully:

1. Taken ample time in the planning stage to understand the project’s objectives.
2. Agreed the project’s core features.
3. Produced a set of signed off wireframes.

Then change, especially to visuals, should be minimal. It’s also important however, to be open to change and accept the possibility that even though we have gone through a lengthy planning stage, additional value can still be brought to the project in the shape of revisions. I treat a project plan/specification as a detailed guide, but refusing to budge even a little from what has been agreed can have a detrimental affect on the project.

Filtering a list of additions or changes from the client, before they get to the design team, can ensure team members stay focussed and do not begin to grow tired of constant tweaks and changes.

4. Rejecting change

We’ve spoken about the need to sometimes embrace change, and how that can be of a benefit to the project, however there will be times in most projects where a client may request something that sits outside of the agreed specification. This may also have a knock-on effect to deadlines, possibly affecting the rest of the project team.

How we approach revisions in general, very much depends on the account handler’s knowledge of what the designer’s role involves. I’ve heard stories of account handlers needing clarification on what a client was referring to when they mentioned a ‘URL’, I imagine this makes it a challenge to appropriately filter revisions. If, however, you have an understanding of the design and development process, you will know that even the smallest requests can cause hours of work to be undone.

It’s an account handler’s job to process, filter and sometimes reject change, in the interest of the project. This, in my opinion, is one of the most important responsibilities that an account handler has, and it’s a vital that we protect the project and its team from unnecessary work where possible.

5. Working collaboratively

Let me start by saying an account handler should never dictate. The designers are the creative part of the team for a reason. I do see it important to give steer where necessary though, and you should have an opportunity to do this in your internal progress meetings, or just by catching up with the team whilst they’re working.

How much steer you provide will depend on your knowledge of a) the project and b) the ‘industry’ itself. Taking the time to read up on and understand latest industry practises such as responsive design, UI/UX and the discussion around designing in the browser can give you a great platform on which to positively influence a project.

If you have an opinion on how certain things might look or work, mention it. If the designer dismisses this or suggests a route they think is more suitable, go with it. You’ll get a chance to provide full feedback before the client sees anything, and you can review things when the designer is happy to share their work.

It’s important you provide a designer with the freedom to do what they do best. This can only result in an increase in trust between between yourself and the designer and in turn, they should value your input from project to project.

Summary

To work efficiently, a project team needs more than just a middleman who will pass things from A to B. Take your chances to positively influence the project and continually put yourself in the shoes of your teammates and clients.

A strong working relationship with your design team is key to a successful project, and I believe the steps I’ve detailed here can only improve the chances of them producing the best work possible.

Do you work as an account manager, are you a designer working with an account manager? What benefits does the relationship deliver to clients? Let us know in the comments.

Featured image/thumbnail, steering image via Shutterstock.

20 One-Page Responsive Templates with Parallax Effect – only $19!

British photographer Kirsty Mitchell has done just that, creating a fantastical, fairytale-esque series of photos that were inspired by her late mother. A former teacher and avid storyteller, Kirsty’s mother lost her battle with a brain tumor in 2008. Since then, the costume-designer-turned-photographer has spent countless hours constructing costumes, wigs and sets to turn her vision into reality.

The process was painstaking, with some images taking up to five months to create. All photos were shot within mere miles of Kirsty’s Surrey home, but their rich beauty makes them look otherworldly. Relying upon gorgeous fields of wild flowers, bluebells and more, the patient photographer sometimes waited an entire year for the costumes she created to match nature’s blooms.

“My aim was to portray time passing, an unsaid journey through four seasons, incorporating every colour in the rainbow.”

With the three-year project nearly complete, Kirsty has plans for both an exhibition and accompanying book. Filled with majestic colors and ethereal characters,

Wonderland is her tribute to the memory of her inspirational mother. It’s a breathtaking work of art — a dream realized and a promise fulfilled.

Which photo looks like it took the longest to create? Have you ever taken years on a labor of love? Tell us in the comments.

20 One-Page Responsive Templates with Parallax Effect – only $19!

Even though this is a new language you will pick it up really fast mainly because it’s reformulated JavaScript; it’s essentially prettier, simpler JavaScript .

When writing CoffeeScript don’t forget you are writing code that before being deployed is going to be compiled into JavaScript that follows best practices and passes the JSLint test, so that’s one less thing you have to worry about. The output will still be valid JavaScript that the browser will not have a problem in reading. CoffeeScript is to JavaScript what SASS is to CSS: a way to write simpler and more productive code.

Installing and using

CoffeeScript is a node.js utility so in order to install it you need to have node.js installed as well as the node package manager. Assuming that you have installed these two packages all you need to do is go to your terminal and install CoffeeScript with the package manager using the code:

npm install -g coffee-script

Just with that you have CoffeeScript installed on your machine. In order to compile a .coffee file into a JavaScript file you need to type:

coffee --compile script.coffee

This will compile the file script.coffee into script.js in the same directory but will only do it when you run the command, if you want it to compile in every change you make in the coffee file you need to add the –watch before the compile:

coffee --watch --compile script.coffee

With this added your JavaScript will be compiled every time you make a change to your .coffee file.

Variables

When writing a JavaScript variable we have to prepend the var keyword, with CoffeeScript that keyword is gone and you can just type out the variable and assign it to something. Another thing to look out for is that CoffeeScript uses a lot of indentation methods to avoid semi-colons and for the language to understand that the variable statement is complete you just need to move to a new line:

age = 21
country = "Portugal"

In JavaScript you would have to type something like:

var age = 21;
var country = "Portugal";

It’s a small example but you can begin to see how powerful CoffeeScript is when it comes to simplifying your code.

Logical and comparative operators

Remember all that time you spent memorizing JavaScript operators? Remember wondering why you needed to use === instead of just using is? Well CoffeeScript also takes care of that. It offers some really nice aliases for the operators:

Comparison operators

• === can now be traded for simply is;
• !== is equally transformed to the more readable isnt.

Logical operators

• Instead of using && you can just use and;
• as for || from now on you can type or;
• the little exclamation point that stated a not is switched for the most logical thing: not.

If statements

Another thing CoffeeScript gets rid of is curly braces. It uses the indenting method to declare when you are inside a statement, if statements work like JavaScript but you don’t need the curly braces or the parenthesis; just indent the code you wish to run when the statement is true:

if work > 24 and sleep < 8
   vacations()
else 
   work()

will compile into JavaScript as:

if (work > 24 && sleep < 8) { 
 vacations();  
} else {  
    work();
} 

I hope that you are starting to see the benefits of CoffeeScript just with these simple demonstrations of how clean it can make your code, and cleaner code means more maintainable code.

Looping through arrays

Looping through arrays is one of the things you are bound to do in every JavaScript app you write and the syntax for looping through them in JavaScript isn’t the simplest or the cleanest, I think this is where CoffeeScript really shines. To loop through an array we use a for..in loop , like so:

tasks = ['Design','Code','Groceries']  
for task in tasks  
 alert task

All this piece of code will do is read all the things in the array and then alert then one by one, just to make things even simpler you can even write the for…in loop in one line, like so:

tasks = ['Design','Code','Groceries']  
alert task for task in tasks  

It’s simply far more readable and maintainable than the vanilla JavaScript, speaking of which the code produced by CoffeeScript for those two lines would be:

var task, tasks, _i, _len;

tasks = ['Design', 'Code', 'Groceries'];

for (_i = 0, _len = tasks.length; _i < _len; _i++) {
  task = tasks[_i];
  alert(task);
}

While loops

While loops are also very useful when constructing your JavaScript app and CoffeeScript doesn’t fail to make this easier to read and write as well, for example:

while sleep < 8
   sleep()

Or you can write it all on one line if you prefer:

while sleep < 8 then sleep()

Or:

sleep() until sleep > 8

In pure JavaScript this would translate to:

//then
while (sleep < 8) {
  sleep();
}

Or:

//until
while (!(sleep > 8)) {
  sleep();
}

Functions

Functions are also another vital part of any programming language and even though functions in JavaScript aren’t as messy as some other parts CoffeeScript simplifies this to the max as well, a simple function that takes someone’s name and then alerts it can be written like this:

sayHi = (name) -> 
 return "Hello " + name
alert sayHi('Sara')

All you do is name the function, in this case the functions is called sayHi, and then after the equal sign you need to specify the parameters. Here name is the single parameter, after the base of our function is defined we need to type -> followed on the next line by what we want the function to do so that CoffeeScript knows we are inside the function. In this case all I want it do is return “Hello” and then the name of the person and lastly I use a simple alert to call the function with the name. We can also write this in one line eliminating the enter and indenting just by writing what the function will do after the -> :

sayHi = (name) -> return "Hello " + name

This little snippet of code will be compiled into the following JavaScript:

var sayHi;

sayHi = function(name) {
  return "Hello " + name;
};

alert(sayHi('Sara'));

Of course this was a really simple function but as you can see it saved us 3 lines of code and of course in the JavaScript we could just name the variable as we declare the function like so:

var sayHi = function(name) {
  return "Hello " + name;
};

alert(sayHi('Sara'));

The examples I have given here are what CoffeeScript compiles to and even though in most instances there are easier ways to type something out, all the JavaScript compiled is valid and semantic.

Conclusion

This is just the beginning of what CoffeeScript can give you, when things start getting more complex this little language will give you a lot of leverage when compared to JavaScript, less code you need to write , more human readable code, and more maintainable as well, so that you can come back to a website a year later and know what is going on in that JavaScript.

Stay tuned for the second part of this series where I will show you how to combine CoffeeScript with jQuery and LocalStorage in order to create a simple contact list app.

Have you used CoffeeScript to simplify JavaScript? What parts of CoffeeScript do you prefer to Javascript? Let us know in the comments.

Featured image/thumbnail, coffee image via Shutterstock.

20 One-Page Responsive Templates with Parallax Effect – only $19!

The Phraseology Project was originally setup by Drew Melton as a way for him to hone his typography skills. The idea is that people submit words or phrases and Drew, or a guest contributor, creates a typographic treatment of the submissions.

The list of contributors include designers such as Ray Brown, Luke Ritchie, Simon Ålander and Joshua Bullock, all of whom have created some beautiful pieces of work.

Here’s a collection of some of our favourites:

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

20 One-Page Responsive Templates with Parallax Effect – only $19!

We started on the path of fulfilling those aims over a year ago with the redesign of the GQ.co.uk articles and the introduction of what we call the ‘StickyScrollRead’ component, which allowed the editors to embed media that would be pulled out of the body copy at screen widths wider that 1000px and pinned on screen. That meant the user could continue to read the article and still refer to the peice of media that the copy was about. This proved to be a much more immersive experience and allowed the body copy more room to breath.

We wanted the Wired article templates to maintain the SSR functionality that had worked so well on GQ but we had also learnt a lot since the GQ designs that we could incorporate into Wired. Design process wise, we had also evolved a lot more too since the GQ articles were designed.

The templates for the GQ articles were designed entirely with Photoshop, with every different article variant (long form article, short form article, straight to gallery etc..) and every article template with a different embed (short form article with image embed, short form article with video…) being mocked up as a PSD. We ended up with 20 – 30 PSD’s and a wall of printouts that covered the office! It was time consuming, tedious and did not represent the final product as we would ‘tweak’ things during the development process.

The proposed concept for the Wired article designs was more in depth and advanced than its GQ counterpart and the thought of mocking up 50 – 60 Photoshop files was enough for us to put down our PS lasso tool and explore more accurate and efficient methods of communicating our designs to the development team.

The GQ articles that preceded the Wired redesign.

Typography

As many of our projects do, we started by looking at how we could represent the brand’s values through its typography. We looked through the printed magazine and identified styles that they use to tell different stories, colors they had used as well as styles for highlighting text and captions.

We then started to experiment with different type combinations, colors and font sizes through Typecast, creating a complete initial style guide for all headings, paragraphs and pull quotes as well as experimenting with side by side comparisons. This would prove to be the groundwork for our typography which we would return to later.

Building a style guide in Typecast.

The style guide implemented. 

Layout

We picked an article from the print magazine and found the equivalent article on wired.co.uk. They were exactly the same story but where the magazine article had images of varying sizes, pull quotes spanning columns with the paragraph text wrapping around it and ample additions of white space, the online equivalent had a lead image above one long area of text surrounded by the site housing, shouting at the user to view something else.

The old Wired article design.

Wired magazine is well known for it’s innovative and bespoke layouts, for which it has won many awards. We wanted to try and replicate the magazine style layouts, with bits cutting into the body copy and not have all the copy area feel so regimented. We knew that the SSR component splits the page into 2 columns, one for the article body and one for the media embeds that get pulled out and pinned but we didn’t want the embeds to feel completely detached from the paragraph text.

We began to create the same article, using the same copy and images from the website to create a basic version of the SSR template using CodePen. The goal was to experiment with placing full width, keep in line and in content media within the flow of the article to create a more visually striking and engaging  layout. Since designing the GQ article pages we had decided that it would be a more natural reading experience to have the copy on the left and the media in the right column so we switched them around and we also wanted to incorporate the standard ad units such as the double sky and MPU’s within the body copy, rather than give the adverts their own column (like on GQ) that would be redundant when there were no ads or when the ads had scrolled away.

Building in Codepen.

v1.1

In the first prototype the article led with a huge, full width landscape image which had much more impact and gave the sense of a magazine feature article. One of my favourite evolutions from the GQ templates was the introduction of the all mighty full-width image. GQ’s template enabled the editors to add ‘Pulled-to-side’ portrait and landscape images but they could sometimes lose their presence as the user’s screen got narrower and the images shrunk and the full width image was our solution.

The typography styles created in Typecast had not been used yet but there were basic styles assigned to the paragraph, intro text and quotes to help get a sense of hierarchy.

The SSR had also not been implemented but a column had been created with pull to side images which helped us to experiment with what width to set the pull to side column in relation to the page and basic double sky and MPU units were added to the body copy to see if they would disturb the flow of the text.

As a first draft, this approach proved far more useful than us experimenting with the same content via Photoshop. This not only allowed us to make some basic layout decisions quickly and iteratively but we could also use it as a base from which the developers could build on to add further functionality to and that’s exactly what they did.

 Version 1.

v1.2

The CodePen proof of concept was passed onto the development team and they added the SSR functionality (so the pulled to side images actually pinned to the screen) as well as allowing us to change the positioning of a piece of media by changing its class before handing it back to the design team for styling.

At this point, we started to style the article with the font styles that we had previously created in Typecast by simply exporting the CSS directly from the web app. We could now also start experimenting more with different ways to embed content and see what worked well at different widths and for different stories. For example, leading with a full width portrait image was a bad idea as there would be an abundance of white space around the title and would also push the first paragraph too far down the page. We found that the best combinations seemed to be to lead with a pulled to side image and maybe a keep in line landscape as they had the least effect on the flow of the text. We also worked on optimizing the body copy for the most comfortable reading experience by controlling the max-width of the paragraph copy. Instead of adding more padding between the paragraph text and the pulled to side media, we indented the body copy so that the copy was as central on the screen as possible and it also allowed keep in line images to bleed off the screen much like a print layout might do.

Prototyping version 2.

This collaborative and agile prototyping method helped us to really make informed decisions quickly as we could easily test our designs on any device, screen width or browser and make amends with minimal fuss. We worked with real content as much as possible to make sure that we were not forgetting to style a certain rare class that gets added to only a few paragraphs — I’m looking at you .p1 — that we may otherwise have missed until later in development. We also created multiple article types using the same template to see how it worked when there was just 1 image and some short copy or if it was a review article.

Although we always knew that our CodePen templates were only going to be a proof of concept, we really tried to go into as much detail and make as many informed decisions about the design and layout as early on as possible.

v1.3

Once we were happy with the basic style and structure of the template, the developers transferred the code into their own coding environment, splitting up the CSS for each media embed into it’s own SASS file so the design team could easily access and change the CSS for just the ‘blob’ — which is what we ended up calling any add-ons that you could embed within an article… eg. images, video, reviews…etc — that we wanted to edit.

This was a huge help as by the time the dev’s had done their stuff and hooked it all up to the back end, the code was too complicated for any of us designers to understand and locate the parts that we wanted to change. This approach was also useful when styling new blobs, like the gallery thumbnails, read next or review ratings, as we would just create a new SCSS file with all the styles for just that individual blob, which made it far easier to update and maintain.

The ability to access and edit the CSS was a huge help to us designers. It was the first time that we had moved away from the ‘design in Photoshop – deliver PSDs – developers code – designers review’, method of creating a website and it meant that we were able to really fine tune the smallest aspects of our designs.

In the past, using the old methods, we may of launched the Wired articles at this stage (fully functional with some design tweaks which can be made after launch) but as us designers now had access to the CSS, we were able to spend the last few days adding a few subtle touches that would improve the experience. We added little ‘Enlarge’ icons on the corner of the images to let the user know that by clicking on any of them, you could open them as a full width, gallery image. We user tested articles on different devices to get the optimum body copy width for the best reading experience as well as spent more time fine-tuning the text links, quote styles and image captions, all small details that would together make a big difference.

This was a far more collaborative project than any other I had previously worked on with designers, information architects, project managers, developers and editors all working together at different stages of the project; adding their bit to a prototype that was constantly growing and developing into the product that it is today.

The final, fully responsive article design.

Not spending time designing all the styles, layouts and variations at different break points beforehand, meant that we could in a way, design by development. We wouldn’t wait until something was perfect to build it but instead just built something and worked on getting it perfect. This did mean that there were days where we would measure once and cut ten times but it also allowed for constant testing, development and more importantly, discussion on improvements which helped keep everyone engaged and involved with the project.

We are constantly reviewing and improving the build but we are also very proud of what we have managed to deliver in a pretty short period of time. The Wired articles not only represent beautiful, print style layout at any screen width and on any device but also a shift in the way we at Condé Nast Digital work as a team.

What do you think of the wired.co.uk article pages? How does Condé Nast Digital’s design process compare with your own? Let us know in the comments.

20 One-Page Responsive Templates with Parallax Effect – only $19!

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

20 One-Page Responsive Templates with Parallax Effect – 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…

20 One-Page Responsive Templates with Parallax Effect – 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.

20 One-Page Responsive Templates with Parallax Effect – 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

20 One-Page Responsive Templates with Parallax Effect – only $19!