How to create a design style guide – thnxz to @CreativeBloQ


(Abstract… full article +INFO Creative Bloq )

A style guide shouldn’t read like the work of a control freak, but nor should it be vague and ambiguous. Paul Wyatt explains how to strike the right balance.

 

Here are (some of the best) tips for ensuring your style guide does the job right in ensuring others do it right.

It doesn’t have to be perfect

Obviously we’d all love to spend time and energy crafting the perfect design style guide for each project. But in the real world, that’s not always possible. If you’re up against a tight deadline and not able to create a style guide with lots of bells and whistles (and examples), be sure to include the most pertinent and helpful information about the brand or piece of work you’re created in the time you do have.

Full article +INFO 🙂

Essential elements

Start off with:

  • a written overview of the company it’s for
  • a rationale for the work carried out
  • information about logos; font usage; colour palette; tone of voice
  • photographic guides
  • collateral information

 

If you have enough time, it’s worth adding some examples of logo and typographic usage as well as links to master artwork/ brand collateral templates and helpful contacts within your agency or company.

 

 Concentrate on the visible

Look around your workplace and you’ll (hopefully) see colleagues who look presentable and are nicely dressed. Quite possibly a large percentage of these people do not have matching pants and socks or bras and knickers. But who cares? You (hopefully) don’t get to see them. Similarly, in your style guide concentrate on the visible and the relevant. Try not to deep dive into creating colour palettes which then have sub colour palettes and then further sub, sub colour palettes which might never be used or seen.

 

Full article +INFO 🙂

 

 Work with a copywriter

Style guide tips
Big, bold words help energise and communicate brand values in an effective visual way

Work with a copywriter to energise and communicate the brand. This style guide potentially will be used client-side by the in-house creative team or sent out to other agencies to be applied in future work.

For your guide to be applied successfully it’s essential to communicate effectively in written form the brand spirit; the reason behind the work; what the guide is there for; and what the brand goals are that the creative using the guide should be mindful of.

Full article +INFO 🙂

 

Anticipate questions

At the end of the guide include relevant contacts and create a group email address should the reader have any queries about the guide and need to get in touch should there be something the guide does not explain. Although if you’ve included all the relevant details in your guide this should very rarely happen.

Also consider creating an FAQ as part of the guide and think about the top 20 questions a creative might ask about a brand when they first approach it. “I hate your logo. Do I have to use it?” is a question which isn’t allowed.

 

Create art-worked examples

Style guide tips
Art worked header examples from the BBC visual language guide

Art-working up examples of creative templates can be a great way to showcase how the guide can be interpreted. Also consider supplying these files for download with the style guide.

Anuncios

Tips for Building Your First Web App – Thnxz @sixrevisions


These tips are from a person who started out as someone who wasn’t familiar with Web programming. When I first started developing my first web app, I wasn’t a web developer. I was a business guy.

(If you want to read my story on how I built my first web app in only a few months using Ruby on Rails, check out my article: Why Making Web Apps with Rails Is Awesome.)

An assumption I’m going to make about you, the person reading this article, is that you’re already a web developer, or that you’ll be hiring one for your first web app. I’ll be discussing practical, general tips that are applicable to all web apps regardless of what Web technologies you’re using. So please don’t expect some deep-level web programming techniques in this article, because you’ll find none.

Another assumption I’m making is that you’re going to build your first web app without investing hundreds of thousands of dollars into version 1.0. I’ll assume that your budget is in the $5,000 range largely because that’s where my experience lies.

With my preface all said and done, let me share my seven tips based off my own web app development experience.

1. Think in Terms of Data Relationships

Regardless of complexity, size or feature set, you can break down any web application into this simple operational mechanics:

  1. The web app takes in data from users
  2. The web app processes and decides what to do with that data
  3. The web app produces some output for the users

All web apps work like that, so at the start, it’s best to break down your web app’s core features into data relationships to see:

  • How your web app should be built
  • How your web app might deal with user data and presentation
  • What features you need to prioritize
  • What web services and web technologies you’ll need to enlist and get familiar with

And so on. | Full article +INFO 🙂

For example, let’s take the primary feature of Instagram — posting a photo up on the photo-sharing service — and break it down into the fundamental operational mechanics above:

  1. The web app takes in a photo from users
  2. The web app processes the photo to scale it up or down to the layout of Instagram and also what photo effect the user wants to apply to the photo
  3. The web app produces a modified image and displays it for the usersI know you may not be able to think naturally like that at first whenever you look at web apps, but the more you use other web apps, and the more you think about them in all of these little pieces of data relationships, the easier it is for you to conceptualize and build your web app.

2. Keep Track of UIs and Websites That Inspire You

Do you have examples of web applications and websites that you like?
Full article +INFO 🙂

 

3. Keep the First Version as Simple as Possible

Building a minimum viable product (MVP) is a popular concept for online startups.
Full article +INFO 🙂

 

4. Focus on Behavior and Less on Look-and-Feel

Quite often, frustrations that people have with a web app come from the way it behaves, not the way it looks.
Full article +INFO 🙂

 

5. Use Free or Affordable Web Services as Much as Possible

Even if you just won the lottery and have money to burn, don’t be frivolous with your funds.
Full article +INFO 🙂

 

6. Use Third-Party APIs with Caution

An API is a way for a developer to get access to the data of an external web service. For example, Twitter’s API allows any developer to build an app that accesses public tweets and the account information of Twitter users.
Full article +INFO 🙂

 

7. Focus on the Excellent Execution of Your Idea

I can’t think of one web app that was successful based solely on being “the first.”
Full article +INFO 🙂

12 señales de que eres un mal programador


Visto en Digg. Puede que no esté de acuerdo con todas, pero es una lectura interesante.

1. Java es todo lo que necesitas.
No ves la necesidad de usar ningún otro lenguaje, ¿por qué no se puede hacer todo con Java? No te importa ver código en Python o Ruby que logra en 10 lineas lo que llevaría varias hojas de código Java. Además, seguramente las nuevas características de la próxima versión del lenguaje lo arreglaran de todas formas. (Esto es aplicable a casi cualquier lenguaje, pero ocurre que entre la comunidad Java parece estar más extendida esta forma de pensar)

2. El término “enterprisey” (NT: se trata de un término sarcástico utilizado para designar productos complejos más allá de lo necesario) no te suena a broma.
“Enterprise” no es sólo una palabra, es una filosofía, una forma de vida, un camino a la iluminación. Cualquier cosa que pueda ser escrita, desplegada o actualizada con un trabajo mínimo es descartada como un juguete que no “escalará” para futuros usos. Mientras tanto la mayor parte del trabajo real en tu oficina se hace enviando hojas de cálculo en Excel mientras esperan a que termines de construir tu nueva visión corporativa.

3.Te opones férreamente a las funciones/métodos de más de 20 líneas de código.
(o 30 o 10 o cualquier otro número) Lo siento, algunas veces una función larga es justamente lo que necesitas. Normalmente las funciones cortas son más sencillas de entender, pero algunas veces se pueden expresar más fácilmente en una sola función más larga. El código no debería hacerse más complejo sólo para adecuarse a criterios arbitrarios.

4. “¡OH DIOS MÍO! ¡PATRONES!”
Los desarrolladores que buscan constantemente la forma de aplicar patrones a cualquier problema de código con el que se encuentran están añadiendo una complejidad innecesaria. Lejos de ser algo que busques, deberías sentirte mal cada vez que tienes que utilizar un patrón de diseño, significa que estás escribiendo código que hace las cosas más complicadas y que puede ser de dudosa utilidad. Pero, ¡ey!, tu código tiene patrones, bien por ti.

5. Los ciclos de CPU son un recurso precioso y tu estilo de programación y lenguaje reflejan esas creencias.
Hay montones de problemas en los que tienes que tener muy en cuenta el consumo de CPU (modelado/simulación, procesado de señales, kernels de sistemas operativos, etc), pero no es tu caso. Para la mayor parte de los desarrolladores de software sus principales problemas de rendimiento están relacionados con las bases de datos y la entrada/salida. El único efecto de optimizar tu código para mejorar el uso de CPU será disminuir en 2 milisegundos el tiempo necesario para la próxima consulta a la base de datos. Mientras tanto el desarrollo de la aplicación se hace más lento, no puedes hacer frente a los nuevos requerimientos y te encuentras con problemas serios de calidad. Pero al menos estás ahorrándote montones de ciclos de CPU… eventualmente.

6. Piensas que ninguna función/método debería tener más de un return.
Esta la he oído alguna que otra vez, y normalmente la razón que me dan es que el código es más sencillo de analizar. ¿Según quién? Yo encuentro más fácil de leer un código más simple, y normalmente el tener más de un return simplifica el código.

7. Tus usuarios son estúpidos. Realmente estúpidos.
Simplemente no puedes creer lo estúpidos que son, olvidándose constantemente de hacer las cosas más sencillas del mundo y cometiendo errores tontos al usar tu aplicación. Nunca has considerado que quizás es tu aplicación la que es estúpida porque eres incapaz de escribir software decente.

8. Te enorgulleces enormemente del gran volumen de código que escribes. Leer más “12 señales de que eres un mal programador”

Is Your Design S.I.M.P.L.E.? Take the Test


Simplicity…  What is it?  Is it needed?

How do I know if a design is simple enough?

Here’s a ‘Simplicity Test’ for your designs. Judge your designed product or process against the following list. You can assign a numerical value to each category and rank the design and the ‘what ifs?’.

The design is S.I.M.P.L.E. if it embodies the following:

S – Sublime-ness

I – Implicit; The more that needs to be made explicit the further away from simple you’re going.

M – Mysterious; As in, filled with mystery – it makes you say “Wow!” “Why didn’t someone thinks this before?”    “How does it work?”

P – Pleasing; To experience, it does what it’s supposed to- it’s experienced as what it’s supposed to be.

L
– Longing; At best, it creates a sense of wanting to return to product/process/system. At worst, it doesn’t scare people from coming back.

E – Emotive; Brings forth positive emotions or doesn’t elicit negative emotions. Leer más “Is Your Design S.I.M.P.L.E.? Take the Test”

Occam’s Razor: A Great Principle for Designers

Lex parsimoniae is the Latin expression of what is known in English as Occam’s Razor, a philosophical rule of thumb that has guided some of the world’s best and brightest minds (including Isaac Newton).

It is named after the 14th-century logician and theologian William of Ockham.

But what the heck does Occam’s Razor have to do with web design? I’m glad you asked. To put it plainly, Occam’s Razor states that the simplest explanation is usually true.

For our purposes, to use Occam’s Razor is to do something in the simplest manner possible because simpler is usually better.

In this article, we’ll show you how to use Occam’s Razor to create better websites and to enhance the user experience, both for yourself and your clients.

Before we dive into the details, let’s look at a real-world example of Occam’s Razor as used by a company whose simple and effective products you are certainly familiar with: 37signals.


Lex parsimoniae is the Latin expression of what is known in English as Occam’s Razor, a philosophical rule of thumb that has guided some of the world’s best and brightest minds (including Isaac Newton).

It is named after the 14th-century logician and theologian William of Ockham.

But what the heck does Occam’s Razor have to do with web design? I’m glad you asked. To put it plainly, Occam’s Razor states that the simplest explanation is usually true.

For our purposes, to use Occam’s Razor is to do something in the simplest manner possible because simpler is usually better.

In this article, we’ll show you how to use Occam’s Razor to create better websites and to enhance the user experience, both for yourself and your clients.

Before we dive into the details, let’s look at a real-world example of Occam’s Razor as used by a company whose simple and effective products you are certainly familiar with: 37signals. Leer más “Occam’s Razor: A Great Principle for Designers”

Freelancer’s Survival Kit

While some people recognize the saturation of the industry and worry about their future, everyday, there are new fresh talents trying to make it in the very same industry. This new influx of talents is a cause for celebration despite the concerns of the saturated market because sometimes, a new perspective is just what the industry needs to pick itself up. We all hold the key to our own future and the future of the industry.

If we want to ensure that we don’t drown from overpopulation and continue to strive upwards we need to all put our best foot forward and show the world that it needs all of us. However, in the event we cannot do so, we must also ensure that we have our bomb shelter ready and well stocked to survive the cold; then after the dust has settled, we have what it takes to go out there and do it again or rock another industry with our abilities.


In a field that is already highly saturated with very talented individuals, attempting to be a successful freelance designer is not an easy task to accomplish. Despite the tough competition, there is no need to be cut throat to achieve success. Today’s article shows you some ways to stand out from the crowd without stepping on anyone’s toes.

The Freelancer’s Survival Kit
Image Credit: Bethany & Scott Leer más “Freelancer’s Survival Kit”

Writing For The Web: Tips & Common Mistakes We Make

Let’s jump straight into what we have in store for you before I am become guilty of committing the mistakes that I would be pointing out.

There are definitely more specific tips for writing for different audience, but there are some pointers to get you a kickstart.
7 Tips for writing for the web

[Más…]

1. Get the attention

Your title has to be eye catching. Be descriptive. Tell your readers what they would be getting out of this post. Use keywords and make them bold. Sometimes the use of hyperlinks could also serve as a good highlight for the readers.


It's 420 on 420
Image by biblicone via Flickr

Let’s jump straight into what we have in store for you before I am become guilty of committing the mistakes that I would be pointing out.

There are definitely more specific tips for writing for different audience, but there are some pointers to get you a kickstart.

7 Tips for writing for the web

Leer más “Writing For The Web: Tips & Common Mistakes We Make”