Caso de estudio: Little Forge
Caso de Estudio | |
Nombre | Little Forge |
---|---|
Autor | Carolina Núñez |
Período | 2014-2014 |
Palabras Clave | responsive design |
Estudiado en | Grá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.
Grilla y Párrafos
- Little Forge pestaña Service Web, columnas.fw.png
Columnas pestaña Service
- Pestaña portafolio columnas.fw.png
Columnas pestaña Portafolio
- Pestaña wire us columnas.fw.png
Columnas pestaña Hire us
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.
- Interacción color.fw.png
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"
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.
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.
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)