Fuente arriba
Puse en papel la increíble estructura de un tutorial de YouTube sobre cómo planificar su proceso de diseño web desde cero, comenzando con la etapa UX y terminando con la preparación e implementación de su diseño.
- 1. PLANIFICACIÓN – La gran parte del aisberg
Al pasar más tiempo planeando nuestro sitio web, tendremos que pasar exponencialmente menos tiempo ejecutándolo.
a) ¿Cuáles son los objetivos del sitio?
b) ¿Quién usará el sitio?
c) ¿Qué esperas que hagan cuando lo visiten?
d) ¿Qué podría obstaculizar el camino del éxito?
Fuente recomendable: Tutoriales de diseño web de Envato Tuts +
1.1. Usabilidad
a) ¿Qué es la usabilidad?
b) familiaridad
c) Experiencia del usuario
d) Empatía
Fuente recomendable: no me hagas pensar – Steve Krug
7 razones para unirse a la IDF: aprenda un excelente diseño de experiencia de usuario: obtenga 3 meses de descuento en su membresía con la Interaction Design Foundation
1.2. Contenido
a) ¿Qué debemos incluir?
· Identidad (Logotipo – lado izquierdo según convenciones)
· Navegación
· Sobre nosotros
· Contenido significativo
a) ¿Qué no deberíamos incluir?
· Masas de contenido innecesario.
· Ruido visual
· Anuncios no estructurados
· Cualquier cosa por el bien
1.3. Objetivos: “Queremos” … “porque” … “para que” …
a) Objetivos comerciales
· Alinear los deseos del usuario con los requisitos del cliente.
· Generando nuevos leads
· Ventas en línea
· Proporcionar noticias
· Construir una marca: minimizar la tasa consolidada del sitio
b) Medición del éxito
· La reunión de miembros de suscripción.
· Despedida de boletines
· Seguidores sociales
c) claridad
· No copie el trabajo de otra persona.
· No trabajes hacia atrás desde una conclusión inevitable
· No use todas las campanas y silbatos disponibles
2.1. Inspiración
· Bloque del diseñador
Fuentes recomendables:
· Typekit
· http://www.awwwards.com
· http://alistapart.com
· http://www.premiumpixels.com/
· Otros medios: http://www.creativereview.co.uk/ , comunidades como http://creattica.com o artistas como http://mcbess.com
· http://ww1.golivebutton.com/
2.2. Estilo y tema
· Blanco / negro, grunge / minimalista / modernista
· Crea el ambiente : un aire de sofisticación, organización, confianza, eventos y elementos de diversión.
· Permite al usuario relacionarse
· Permite que el sitio resista su singularidad y permanezca memorable
· Color, textura, tipografía, imágenes y diseño.
· Longevidad: tomar en cuenta las tendencias
Fuentes recomendables: https://color.adobe.com/fr/creat …
2.3. Bosquejo conceptual
· Dibujar
o es parte del proceso creativo: lluvia de ideas y experimentación
· Wireframing
o Visualizar la arquitectura de la información;
o Obtener ideas de diseño y funcionalidad rápidamente
o Establecer relaciones
o El barebone del diseño terminado.
Fuentes recomendables:
Aplicaciones y blogs de Wireframing:
· https://balsamiq.com
· Blog: http://wireframes.linowski.ca
· http://webwithoutwords.com
· https://www.wirify.com
2.4. Rejillas
a) ¿Qué hay de bueno en las redes?
· Forman guías verticales y horizontales dentro de las cuales se puede componer un diseño
· Los diseñadores confían en las cuadrículas para ajustar la estructura a su diseño,
· Ponen orden en el caos y te quitan la carga de la toma de decisiones
b) La anatomía de una cuadrícula.
· Márgenes, columnas, filas, canalones.
c) El sistema de cuadrícula 960
· http://960.gs
d) Cuadrículas de referencia
Fuentes recomendables: http://www.thegridsystem.org
2.5. La anatomía de una página web
a) Convenios
· El comportamiento y la estructura que los usuarios de la interfaz de usuario esperan a lo largo del tiempo
b) Anatomía de una página web
· “Las reglas son para que los tontos sigan y guíen a los sabios”.
c) Ejemplos comunes
https://collisionlabs.com
http://thecombine.org/
http://www.bbc.com
http://epic.net
2.6. Espacio en blanco
· A menudo se malinterpreta, siendo considerado como los bits que faltan en el diseño. En realidad, define los elementos que ocupan el espacio positivo en su diseño.
· Al utilizar los espacios en blanco correctamente, puede enfocarse en lo que es realmente importante.
· Márgenes, relleno alrededor de los objetos.
· No tiene que ser blanco. En realidad es el espacio negativo .
3.1. Fondo y texturas
· Ayudan al diseño a ganar carácter y definir el estado de ánimo, con suerte haciéndolo memorable
3.2. Tipografía web
3.3. Formas
3.4. Sección de pie de página
· En términos de recibir atención, el pie de página ocupa un segundo lugar cercano al primer bit de la parte superior
4. Preparando su diseño
· ¿Qué es la preparación?
o En los viejos tiempos. Los sitios web se construyeron con tablas. Era un flujo de trabajo muy lento que consistía en cortar pequeños trozos de imágenes y usarlas para decorar y formar diseños de tabla complejos. Casi cada pulgada del diseño de PSD requirió cortar y guardar para crear una página web.
o En las técnicas modernas, gran parte de lo que diseña en Photoshop se puede recrear solo en CSS: sombras paralelas, esquinas delimitadas, texturas y fondos, por nombrar algunos ejemplos, todo ayuda a acelerar el tiempo de construcción, el tiempo de carga de la página y el tiempo de edición.
o Por supuesto, todos los navegadores están en uso. Por lo tanto, cuando utilice técnicas modernas de CSS, deberá incluir opciones de reserva, si desea que esos navegadores representen su trabajo correctamente.
o Podemos comprometernos, sin embargo, y depende de nosotros decidir qué elementos de nuestro diseño se pueden recrear en el CSS y cuáles dependerán de las imágenes.
4.1. CSS vs. Imágenes
· El fondo / patrón que no se puede recrear en CSS se guardará como un pequeño mosaico que se repetirá en toda la página
4.2. Hojas de Sprite CSS
· ¿Qué son las hojas de Sprite?
o Una hoja de sprites suele ser una única imagen de mapa de bits comprendida en una serie de activos gráficos
o Un juego como Angry Birds se construye a través de una gran cantidad de hojas de sprites. Estas hojas contienen cada personaje en todos los estados posibles y luego se utilizan para animar a las aves.
o El mismo principio se puede aplicar al diseño web. Puede colocar todos o una gran parte de sus elementos gráficos en un mapa de bits y luego usar esa hoja de sprites para decorar varios elementos. Puede colocar texturas de fondo, iconos, logotipos, etc.
o Puede crear el elemento, determinar sus dimensiones y luego aplicar la imagen de fondo, especificando las coordenadas en la hoja para el gráfico que desea usar. Estamos enmascarando efectivamente la hoja con nuestro elemento.
· ¿Por qué una hoja de Sprite?
o Optimizar el tamaño del archivo
o Organización
o Tiempo de carga de página más rápido
Fuentes recomendables:
http://spriteme.org
4.3. Organización
· Estructura de directorios
· Convenciones de nombres
una carpeta titulada CSS (reset.css, main.css, theme.css), img, js (Java Script)
o restablecer: todos los estilos comienzan desde la misma base, independientemente del navegador
- 5. Implementando su diseño
5.1. Elegir tu editor de codificación
· Lo que se necesita: al construir un sitio web, hay dos cosas que se necesitan para que todo funcione:
o un editor de texto, para escribir varios bits de codificación.
o un cliente MTP, que es un programa utilizado para publicar sus archivos en el servidor web
· Puede, entonces, usar fácilmente el Bloc de notas para escribir sus archivos y luego un blog en su espacio web, utilizando, por ejemplo, Filezilla, un cliente MTP gratuito y perfectamente capaz
· Hay muchas aplicaciones FTP disponibles, como Transmitir
· También hay complementos para su navegador, como FTP para Firefox
· https://jsfiddle.net , Codeanywhere
· Coda: le permite administrar su proyecto localmente y actúa como un cliente FTP, cargándolo directamente a la web una vez que se completa la edición. Aplicaciones como esa se conocen como IDE – Entornos de desarrollo integrado
5.2. El modelo de estándares web
· Tiene como objetivo resolver todos los problemas de clavado manifestados en diseños basados en tablas, que generalmente incluían cualquier estilo en línea
· Al estandarizar la forma en que creamos sitios web, nos estamos haciendo la vida más fácil, pero lo más importante, dejando en claro a los navegadores web cómo deben tratar nuestro código.
· Divide aspectos del diseño web en capas:
o Estructura – HTML
o Estilo – CSS
o Comportamiento – Java Script
o este enfoque lleva a
– Eficiencia
– Facilidad de mantenimiento
– Accesibilidad
– compatibilidad
– Optimización de motores de búsqueda
5.3. Marcado y semántica
· HTML semántico – Wikipedia
· http://html5doctor.com/element-i …
5.4. CSS
5.5. Navegadores
· Una mirada a los navegadores
· Degradación elegante
· Mejora progresiva
· Nuestro propio CSS
Fuente recomendada: https://www.browserstack.com/sta … – importante para probar en diferentes versiones de navegadores
5.6. Comportamiento (jQuery Slideshow)
· Agarra jQuery
o jQuery
· Complemento Grab Slideshow
o http://jquery.malsup.com
· Conectarlo
5.7. Más comportamiento
· ¿Qué es la validación de formularios?
o En buena forma: del lado del servidor; Lado del cliente (mediante Java Script); Lado del cliente (HTML
· Nuestro formulario CSS
· Nuestro formulario de validación
5.8 Pruebas de navegador de cuervos
· Instalar múltiples navegadores
· Algunos navegadores no permiten que se ejecuten varias versiones simultáneamente en el mismo sistema, como Internet Explorer. Para tener varias versiones, puede comprar una carga de computadoras o una máquina virtual utilizando una herramienta virtual como http://www.vmware.com
· Otra forma es mediante el uso de un servicio de captura de pantalla como http://browsershots.org
· https://turbo.net/browsers
· Las pruebas del navegador Crows se deben realizar con frecuencia, después de cada cambio importante
5.9. Google analitico
· Configurarlo
o utilizado para rastrear el tráfico
o se necesita una cuenta de Google