tools

Carmel Hassan > tools

Defining a user research system

By In Processes, User Research4 Comments32 Views

Knowing how your product is perceived and used is key for user experience designers. Even if you are not a UX researcher, you can do research to gain that knowledge. As soon as you start planning some of these research studies you’ll notice how difficult it could be to decide who do you want to talk to, what’s the purpose of the study or how to interpret discoveries.

However, there’s another challenge that comes with all of this that I consider equally important: how to manage all these findings coming from different sources to make them understandable and actionable for your team, as well as creating a system that encourages a culture of research.

The information gathered as a result of research sessions can come in many shapes and forms. I want to share with you how we have defined a very basic user research system to manage the results of conducted studies so you can create and work from the big picture to the specifics of an issue.

Read more

Nueva estrategia de blogging

By In Random0 Comments19 Views

El blogging no ha muerto o eso quiero pensar. Como siempre me ha gustado escribir, pero siempre me ha costado mucho seguir una disciplina y una estrategia de contenidos razonable, he decidido intentarlo por undécima vez de una forma diferente.

Inspirada por el último podcast de Paul Boag: How to boost your business reputation with blogging, he empezado por crear ciertas estructuras para los artículos que voy a ir publicando que me faciliten desarrollar los contenidos que quiero contar en cada entrada.

Las comparto con vosotro/as por si os resultan útiles.

Conferences, events, etc.

  • What is the conference about?
  • Why it is important for me?
  • What I’ve learnt?
  • How can I apply the knowledge?

Problems

  • What’s the problem I’m trying to solve
  • How this became a problem
  • Which are the alternatives I’ve looked at
  • Which solution I’ve taken
  • How do I expect to evaluate if it was good or bad solution
  • Resources where you can learn more

Books, Resources

  • What is the book main topic
  • Why did I decided to read it / What I was looking for in it
  • What I’ve discovered
  • How can I apply it in practice

Tools review

  • What is the tool for
  • What’s good
  • What’s bad
  • What makes it excellent or unique from my perspective
  • How can I integrate it in my process

Content curation

  • Recover some good old posts
  • Mention why it worth to be reconsidered
  • Provide new thoughts

 

Seguramente os habréis dado cuenta de dos cosas:

  1. I, me, personally… creo que lo mejor es escribir desde un tono personal. Es donde me siento más cómoda, desde donde puedo ser más honesta, aportar una opinión diferente y desde donde nadie podrá acusarme de intentar darle lecciones. Y ya de paso me quito de un plumazo el tan temido síndrome del impostor. Para todo lo demás hay muy buena literatura muy bien editada.
  2. A veces escribo en inglés otras en castellano y otras lo mezclo todo. También me parece algo natural para los hispanoparlantes en el sector tecnológico. No creo que nadie se asuste a estas alturas por esto ni por mis faltas de ortografía atención tipográfica.

 

Otra cosa que quiero intentar en esta ocasión es no darme prisa en publicar. No voy a mantener una agenda porque no lo he conseguido hacer ni para las cosas más importantes de mi vida, pero básicamente intentaré mantener cierta frecuencia de publicaciones. Para eso tendré en la cola siempre dos o tres entradas.

Espero que con esto pueda darle una nueva vida al blog y aprender de vuestros comentarios mientras comparto algo de mi experiencia.

Y ¿vosotros? ¿cuál es vuestra estrategia de publicación de contenidos?

Cómo crear una librería de recursos con Pencil

By In Apps & Tools, Artículos, Blog, Prototyping0 Comments18 Views

Si ya conocéis Pencil y os preguntáis cómo podríais definir vuestra propia librería de componentes para crear GUI en este tutorial hacemos un repaso de los pasos a seguir.

Hay dos formas de conseguir nuestra propia librería

  1. Haciéndolo bien
  2. Haciéndolo rápido

Como para hacerlo bien ya existe una buena documentación en la web de la herramienta vamos a explicar cómo puede hacerse de forma rápida (y no tan flexible) para que resulte práctico crear conceptos visuales y compartirlos con diferentes equipos.

image

Una forma fácil de empezar

Usando la librería ‘Common shapes’ podemos empezar a dibujar elementos básicos basados en formas geométricas.

  1. Una vez que tengamos todos los elementos, los seleccionamos juntos y agrupamos (CTRL+G). Ahora se comportarán como una única forma.
  2. Sobre el nuevo componente clicamos en botón derecho “Add to my collections…”.
  3. Como este es el primer componente tendremos que crear una nueva colección a la cual añadirlo. 
  4. Si ahora comprobáis en la pestaña ‘My Stuff’ veréis que ya está creada vuestra nueva colección. 

Una característica que encuentro bastante útil es la ‘Sizing policy’ que tiene cada elemento (accesible via menú contextual). Esta política permite definir el comportamiento del elemento cuando está agrupado en un componente al que se le modifica el tamaño. Gracias a esto podrás decidir si quieres que cambie o no de tamaño o se mantenga alineado a un lado o a otro.

¿Y si quiero hacerlo bien?

Qué necesitas tener

  • Un editor de texto (para ver/editar XML)
  • Un editor de SVG (las formas están definidas como vectores)
  • Un editor de bitmpas (por si necesitas meter algún icono o imagen)

Qué necesitas saber

Una estructura típica para crear una colección tiene este aspecto

... [dir] CollectionName
      |
      |___[dir] icons       #optional
      |     |
      |     |___shape1.png
      |
      |___ Definition.xml

y en el documento Definition.xml deberás definirlo de esta forma

<Shapes xmlns="http://www.evolus.vn/Namespace/Pencil"
        xmlns:p="http://www.evolus.vn/Namespace/Pencil"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"

        id="your_collection_id"
        displayName="Display name of your collection"
        description="More description about this collection"
        author="Names of the authors"
        url="Optional URL to its web page">
        
        <!-- Your shapes go here -->
        
</Shapes>

Iremos añadiendo los diferentes componentes usando las etiquetas <Shape></Shape> y dentro de ellos podremos definir Propiedades (color, dimensión, etc.), Comportamientos y Acciones además de su Aspecto (mediante el SVG).

Para ver lo que estamos haciendo, puedes cargar tu colección desde Tools » Developer Tools » Load Developer Stencil Directory… seleccionando el archivo Definition.xml (usa F5 una vez cargado para refrescar).

Cuando termines, mételo todo en un archivo ZIP asegurándote que el Definition.xml está en la carpeta raíz.

No te olvides que si quieres depurar errores puedes abrir la consola de errores desde Tools » Developer Tools » Show Error Console…

A partir de aquí te recomiendo que consultes el Tutorial en el que viene explicado cada detalle sobre cómo montar la colección con directivas XML.

Adobe Fireworks team Q&A

By In Apps & Tools, Blog0 Comments15 Views

Is Adobe proposing that existing Fireworks customers switch to Photoshop?

Photoshop is a major part of the design process, but we know that Fireworks offers something unique that has made it an essential part of the web designer’s toolkit. While Photoshop is continuing to add features and workflows to support web designers, whether or not it is a good replacement for Fireworks will depend on individual needs and preferences.

What new tools is Adobe proposing to create for web design?

Adobe has embarked on creating a new collection of tools and services aimed at addressing the needs of today’s web designer – we’ve started with focusing on responsive layout, web animation and HTML, CSS and JavaScript code editing and are delivering new Edge tools to address these use cases. We are actively working on next-generation solutions for screen design and prototyping that we hope our existing Fireworks customers will love.

Read more, last update May 7, 2013.

Designing and developing HTML5+CSS3 webistes and mobile apps

By In Apps & Tools, Blog, Programming0 Comments17 Views

In my previous post “CSS3 Tools” we saw I few well-known websites which provides frameworks and tools to start with CSS3.

Here, I’d like to complete and extend that list with more useful frameworks, libraries and other assets to play with the new version of the html markup.

Applications

Libraries

Frameworks

Helpers

Documentation and Books

I’ll update with more resources soon, just keep tuned.

CSS3 Tools

By In Blog, Programming0 Comments16 Views

Digging into web and gathering recommendations, I’ve created this post with a set of tools for CSS themer who wants to develop with the latest version of cascade style sheets CSS3.

Hope you find them useful, too.

Modernizr

Open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Selectivzr

JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

CSS3.Me and CSS Generator

CSS3 Generator helper tools.

CSS Template layout mode

This specification is part of level 3 of CSS (“CSS3”) and contains features to describe layouts at a high level, meant for tasks such as the positioning and alignment of “widgets” in a graphical user interface or the layout grid for a page or a window, in particular when the desired visual order is different from the order of the elements in the source document.

Font Dragr

A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.

Compass and Sass.

Compass is an open-source framework that uses Sass.:an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

CSS3 Cheat Sheet.

A complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.