Inicio Tarea: Introducción al diseño web
Artículo
Cancelar

Tarea: Introducción al diseño web

Información sobre la tarea

La entrega será en formato PDF. Leer Entrega y presentación de tareas.

La tarea se calificará con una nota de APTO (10) o NO APTO (0).

Duración actividades obligatorias: 6 horas.

RA1. Planifica la creación de una interfaz web valorando y aplicando especificaciones de diseño.

Actividades

A continuación, se muestran las actividades a realizar.

Colores

Busca 2 webs he indica cual es el color principal y cual el color alternativo.

📸 Recuerda hacer capturas.

Tipos de botones

Busca 2 webs e indica los tipos de botones que tienen según los tipos que hemos visto en la unidad.

📸 Recuerda hacer capturas.

Analiza

Busca 2 Webs y para cada una ellas indica como usan los siguientes conceptos:

  1. Uso del espacio en blanco (Separación entre componentes).
  2. Uso de paletas de colores (Usar poco colores con muchas variaciones de ellos).
  3. Ancho máximo de la página.
  4. Indica como resaltan lo importante.
  5. Alineación de la página.
  6. Uso de labels (si se usan, si forman parte de la frase, si están desenfatizadas, etc.).

📸 Recuerda hacer capturas.

Web de FP

Lee el artículo Un cambio de imagen para la Formación Profesional en la Comunitat Valenciana sobre la web https://portal.edu.gva.es/fpvalenciana/ contesta a las siguientes preguntas:

  1. ¿Resultan útiles las animaciones?
  2. ¿Resultan útiles los colores?
  3. ¿Que está mal en el buscador?
  4. ¿Cuando se usan mayúsculas?¿Es necesario?

(Voluntaria) Sistema de tamaños

Crea un sistema de tamaños creando varias clases CSS para las siguientes propiedades:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
  • font-size
  • color
  • background-color

Experiencia de usuario

Busca en varias páginas web e indica si algunas de ellas cumplen o no cumplen alguna de las reglas, principios o mitos de la usabilidad (experiencia de usuario).

📸 Recuerda hacer capturas.

(Voluntaria) Diseño web necesitountrastero.es

Mira la web https://necesitountrastero.es/ y critica todas aquellas cosas relativas al diseño que consideres mejorables.

📸 Recuerda hacer capturas.

Wordpress

Entra en https://wordpress.com/es/ y crea una cuenta y un sitio web asociado a la misma, aplica una plantilla de diseño y crea un post donde aparezca tu nombre de usuario. También puedes utilizar otro tipo de webs como Wix, Shopify, Prestashop, Magento, etc. si ya has trabajado con WordPress.

📸 Recuerda hacer capturas para demostrar que has realizado la actividad.

Proyecto final

Piensa en la temática que va a tener tu proyecto final. Aquí tienes varias ideas base con las que puedes empezar:

  • Tienda online de productos o servicios.
  • Red social o foro.
  • Portal de noticias o CMS.
  • Web de reservas para espacios comunes.
  • Plataforma de cursos online.
  • Plataforma de crowdfunding.
  • Sistema de gestión de tareas tipo Trello.
  • Portal de eventos para las fiestas de una ciudad.
  • Portal de inversión de criptomonedas.
  • Portal para hacer encuestas.
  • Web para hacer seguimiento en el gimnasio.
  • Web de citas.
  • Web de videojuego tipo aventura gráfica.

Y escribe desarrollando brevemente la idea en no más de un párrafo.

Guía de estilo el proyecto final

Vamos a comenzar a dar los primeros pasos con nuestra guía de estilo:

  1. Define y justifica la paleta de colores que vas a usar.
    • Puedes utilizar un generador y la psicología del color.
    • Deberás tener en cuenta que haya un alto contraste entre fondo y letra.
    • Deberás incluir el color de fondo. Puede ser un degradado.
    • En la fase actual del diseño web es recomendable definir una paleta de colores amplia.
  2. Define y justifica la tipografía.
    • Usa fuentes legibles.
    • No uses más de 3 tipografías distintas.
    • Define el tamaño de letra de cada encabezado y párrafo.
  3. Define y justifica los iconos que quieres usar.
  4. Diseña tu logo.

Puedes proponer tantas versiones de paleta de colores, tipografía, iconos y logo como desees.

Dame tu feedback

Bibliografía

Este artículo está licenciado bajo CC BY 4.0 por el autor.

Tarea: Entorno de desarrollo para JavaScript

Fundamentos de la programación con JavaScript