Fuente arriba
Pongo en papel para usted 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 finalizando con la preparación e implementación de su diseño.
- 1. PLANIFICACIÓN – El gran bit del aisberg.
Al dedicar más tiempo a la planificación de nuestro sitio web, tendremos que gastar exponencialmente menos tiempo en su ejecución.
a) ¿Cuáles son los objetivos del sitio?
b) ¿Quién usará el sitio?
c) ¿Qué esperas que hagan cuando visiten?
d) ¿Qué podría obstaculizar el éxito?
Fuente recomendable: Tutoriales de diseño web por Envato Tuts +
1.1. Usabilidad
a) ¿Qué es la usabilidad?
b) familiaridad
c) Experiencia de usuario
d) empatía
Fuente recomendable: No me hagas pensar – Steve Krug
7 razones para unirse a la IDF: Aprenda el excelente diseño de UX: obtenga 1 mes de descuento en su membresía con la Interaction Design Foundation
1.2. Contenido
a) ¿Qué debemos incluir?
· Identidad (Logo – 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 de ella
1.3. Objetivos: “Queremos” … “porque” … “para que” …
a) Objetivos de negocio
· Alinear los deseos del usuario con los requerimientos del cliente.
· Generando nuevos leads.
· Ventas en línea
· Proporcionar noticias
· Construyendo una marca – Minimizando la tasa de enlace del sitio
b) Medir el éxito
· La reunión de los miembros de suscripción
· Encendiendo boletines
· Seguidores sociales
c) claridad
· No copiar el trabajo de otra persona
· No trabajar hacia atrás de una conclusión inevitable
· No uses todos los silbatos y campanas 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
· Establece 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 a través de su singularidad y permanezca memorable
· Color, textura, tipografía, imágenes y diseño.
· Longevidad – Teniendo 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 Visualización de 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 de wireframing y blogs:
· https://balsamiq.com
· Blog: http://wireframes.linowski.ca
· http://webwithoutwords.com
· https://www.wirify.com
2.4. Rejillas
a) ¿Qué es tan bueno acerca de 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 rejillas para aterrizar la estructura a su diseño,
· Ponen orden en el caos y toman una carga de la toma de decisiones de tus manos
b) La anatomía de una grilla.
· Márgenes, columnas, filas, canalones.
c) El sistema de rejilla 960.
· http://960.gs
d) Rejillas de base
Fuentes recomendables: http://www.thegridsystem.org
2.5. La anatomía de una página web
a) Convenciones
· El comportamiento y la estructura que los usuarios de IU esperan en el transcurso de los tiempos
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, se considera como los bits que faltan en el diseño. En realidad, define los elementos que ocupan el espacio positivo en su diseño.
· Al usar correctamente los espacios en blanco, puedes enfocarte en lo que es realmente importante.
· Márgenes, relleno alrededor de objetos.
· No tiene que ser blanco. En realidad es el espacio negativo .
3.1. Fondo y texturas
· Ayudan a que el diseño adquiera carácter y defina el estado de ánimo, con suerte haciéndolo memorable
3.2. Tipografia web
3.3. Formas
3.4. Sección de pie de página
· En términos de atención, el pie de página se encuentra muy cerca del primer bit de la parte superior
4. Preparando su diseño
· ¿Qué está preparando?
o En los viejos tiempos. Los sitios web fueron construidos con tablas. Era un flujo de trabajo muy lento que consistía en cortar pequeños fragmentos de imágenes y usarlas para decorar y formar diseños de tablas complejas. Casi cada pulgada del diseño de PSD requería rebanar y guardar para construir una página web.
o En las técnicas modernas, gran parte de lo que diseñas en Photoshop se puede recrear solo en CSS: sombras, esquinas, texturas y fondos, por nombrar algunos ejemplos, todo esto ayuda a acelerar el tiempo de compilación, el tiempo de carga de la página y el tiempo de edición.
o Por supuesto, todos los navegadores siguen en uso. Por lo tanto, cuando use técnicas CSS modernas, tendrá que incluir opciones de respaldo, 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 se basarán en 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 sprite suele ser una única imagen de mapa de bits que se compone de 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 carácter en todos los estados posibles y luego se usan para animar a las aves.
o El mismo principio puede aplicarse al diseño web. Puede colocar todos o 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 efectivamente enmascarando la hoja con nuestro elemento.
· ¿Por qué una hoja de Sprite?
o optimizando el tamaño del archivo
o organizacion
o Tiempo de carga de la página más rápido
Fuentes recomendables:
http://spriteme.org
4.3. Organización
· Estructura de directorios
· Convenciones de nombres
o una carpeta llamada CSS (reset.css, main.css, theme.css), img, js (Java Script)
o reinicio: todos los estilos comienzan desde la misma base, independientemente del navegador
- 5. Implementando su diseño
5.1. Escogiendo tu editor de codificación
· Lo que se necesita: al crear un sitio web, se necesitan dos cosas 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 capacitado.
· 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, subiendo directamente a la web una vez que se completa su edición. Aplicaciones como esa son conocidas como IDE – Entornos de Desarrollo Integrados
5.2. El Modelo de Estándares Web
· Pretende resolver todos los problemas de clavado que se manifiestan en diseños basados en tablas, que generalmente incluyen cualquier estilo en línea
· Al estandarizar la forma en que construimos los sitios web, nos estamos haciendo la vida más fácil, pero lo más importante es que queda claro para los navegadores web cómo deben tratar nuestro código.
· Rompe aspectos del diseño web en capas:
o Estructura – HTML
o Estilo – CSS
o Comportamiento – Java Script
o este enfoque conduce 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)
· Agarrar jQuery
o jQuery
· Agarra el plugin Slideshow
o http://jquery.malsup.com
· Conectarlo
5.7. Más comportamiento
· ¿Qué es la validación de formularios?
o En buena forma – lado del servidor; Lado del cliente (utilizando Java Script); Lado del cliente (HTML
· Nuestro formulario CSS
· Nuestro formulario de validación.
5.8. Prueba de navegador de cuervos
· Instalando 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 usando 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 de navegador de cuervos deben realizarse con frecuencia, después de cada cambio importante
5.9. Google analitico
· Preparándolo
o utilizado para el seguimiento del tráfico
o se necesita una cuenta de Google
