Caso de estudio: Little Forge

De Casiopea





Caso de Estudio
NombreLittle Forge
AutorCarolina Núñez
Período2014-2014
Palabras Claveresponsive design
Estudiado enGráfica Digital 2014

Introducción

El sitio a estudiar, se comprenderá desde la variabilidad de opciones que da para interactuar con el, tanto en dispositivos móviles y tablet como en navegación web desde el escritorio. Desde un análisis más profundo de sus componentes, al comportamiento de sus partes, al finalizar el proceso, daremos una valoración objetiva del sitio Little Forge.

Acerca del Sitio

Little Forge es un estudio de diseño, ubicado en Louisville, Kentucky. El cual se especializa en la realización de trabajos en sitios web, marca corporativa, creación de imagen y papelería. Es una pequeña agencia formada por 3 personas. Este sitio va dirigido a aquellas personas/clientes dueños de una empresa o miniempresarios que requieran por sobre todo servicios web y tratamiento responsivo, ya que abiertamente ofrecen atención al mercado móvil.

Dimensiones Dispositivos

Disposición de zonas

Estructura

El sitio estructuralmente es simple, posee un gran espacio animado que impacta al entrar al sitio, es en el único lugar donde se muestra el uso de ilustración.

En en el Home se diferencian 4 momentos.

  • Primer momento de ilustración animada(muestra el cambio de web a móvil), en donde se presentan en un texto corto.
  • Puntos claves (3) acerca del trabajo en su pequeña agencia.
  • Descripción específica de las tareas que realizan, y una pequeña presentación del equipo de trabajo.
  • Parte del footer, en donde invitan a las personas a contactarlos haciendo click en un gran botón vistozo.
Elementos y ubicación

Navegación

https://vimeo.com/100954286

Grilla y Párrafos

Columnas del Home

Componentes

Identidad Visual

  • Se usan colores dentro de un rango de los azules, por otro lado el rojo es el que trae los distingos en pequeños detalles, suficientes para llamar la atención. Usan trozos de fondo en donde va alojado un texto o una imagen.
  • El logo no cambia de tamaño en ninguna vista de otros dispositivos, para el formato móvil, se centra arriba. Su medida corresponde a 152x68px.
  • En la pestaña wire us, existen palabras destacadas las cuales al pasar por encima cambiaa de color.
  • En el texto de presentación se incorpora colores al texto, dentro de la caja que se muestra.
colores utilizados

Menú de Navegación

Botones

  • El botón de las redes sociales, no cambia su formato en los distintos dispositivos.
  • El tamaño del botón para planificar tu proyecto y contactarte con la agencia, varía entre el tamaño web y el móvil. Se agranda para el tamaño web. Del mismo modo se observa que entre el pixel 980 al 991 del botón se produce un error, el botón queda encima de los textos.
  • Botón superior e inferior del menú de navegación en distintos estados(Pestaña service)el primero cambia el color al pasar y aparece el alt "Services"
botones redes sociales
botones contacto
botones generales

Imágenes

  • Al modificar el tamaño en pantalla de las imágenes muestra cambios, pero al analizarlo, colocándolas al lado, se ve que presentan el mismo tamaño.
  • Desde 767px al 481px se va reduciendo la imagen proporcionalmente.(imagen más grande)
  • El tamaño tablet es el más reducido en imagen(entre 768px a 991px)
  • Sobre 992 pixeles el tamaño difiere del resto.
Archivo:Tamaños imágenes.fw.png
Distintos tamaños de imagen

Tipografías

  • Utilizadas omnes-pro,sans-serif; y proxima-nova,sans-serif; en distintos aspectos.
  • Omnes-pro para títulos de pestañas, y de textos, también para los botones.
  • Proxima-nova para los párrafos, introductorios, explicativos, descriptivos y líneas del footer.
  • Se mantienen las mismas tipografías en los diferentes dispositivos.
Tipografías utilizadas

Conclusiones

  • El sitio introduce de forma clara al ingresar, que se trabaja en un proceso creativo continuo, por lo que despierta interés visual.
  • Los colores permanecen acordes a lo largo de toda la navegación del sitio, no existen quiebres.
  • Un análisis en woorank cataloga al Little forge con un puntaje de 45.1/100, mencionando: falta de contenidos, promocionar más el sitio en redes sociales, ampliar registro del dominio y problemas de enlaces rotos, cosa que no encontré navegando en el sitio.
  • Existen 14-h4, ningún h3, 4-h2 y 1-h1.
  • El sitio web tiene una página personalizada de error 404.(woorank)
  • Tecnología que utiliza: Apache (Web server), jQuery JavaScript (framework) ,PHP (Programming language), Twitter Bootstrap (Web framework), Typekit (Font script), WordPress (CMS)

Problemas del Sitio

  • En ciertas dimensiones, al ir reduciendo, las imágenes crean un salto que luego se vuelve a arreglar.
  • La velocidad en dispositivos móviles es más lenta de lo común.2,66 segundo(s) (6,06 kB/s)
  • No hay trabajo en redes sociales. (4 me gusta facebook, 20 seguidores twitter)

Valorización del Sitio