Consigna Examen Final

portfolio diseño gráfico

CORRELATIVAS Espacio Institucional: Diseño de Páginas Web I

A METERLE! Esto no es un simple trabajo práctico, es una instancia FINAL, por lo tanto el sitio debe estar a la altura de las circunstancias y debe ser el resultado, no solo de lo aprendido durante la cursada, debe ser un trabajo superador!

La idea de este trabajo final es que termines tu cursada en la esav listo para incorporarte al mercado laboral! Aprovecha la oportunidad para crear tu sitio y conseguir nuevos clientes!

Se recomienda el uso de WordPress + Elementor al mismo tiempo que se emplean Entradas y Categorías para organizar los trabajos del portfolio, pensando en una eventual carga de nuevos contenidos o la aplicación de una sección tipo blog.

Evaluar la comunicación, diseño y contenidos. Pensar bien el funcionamiento y la navegabilidad del sitio.

INVESTIGA No olviden de realizar un relevamiento de sitios similares, para determinar la información imprescindible, inspirarse en cuanto a contenidos, layout, diseño y diagramación, usen el sentido común y su creatividad para el resto!

Analiza que información que necesitas comunicar y que contenidos querrías encontrar de manera rápida si fuese un visitante del sitio.

No utilices simplemente galerías o lightbox para mostrar tus trabajos, es preferible que haya una menor cantidad de los mismos pero que estos se encuentren desarrollados de manera extensa, comentando las problemáticas, metas, objetivos, mockups, selección tipográfica, colores institucionales, etc.

DIAGRAMA Y DISEÑA Aprovechemos para aplicar todos nuestros conocimientos generales de diseño! Trabajemos bien los colores, los espacios, las tipografías, sus variables y jerarquías. Trabajemos en detalle y dedicando el tiempo que se merece.

Incorporaremos varios plugins que nos ayudaran a proteger nuestro sitio, la seguridad es un tema fundamental en este tipo de sitios autogestionables.

Personalizaremos la identidad completa del sitio en su parte de administración para poder entregar un sitio profesional.

Optimizaremos el sitio para lograr un mejor desempeño y posicionamiento en buscadores.

No olviden secciones como CV, indicando formación, experiencia laboral, empresas para las que han trabajado.

Otra sección interesante puede ser la de Skills o Habilidades, donde no solo indican sobre el software que utilizan, también pueden indicar cual es su orientación dentro del diseño o donde pretenden desarrollarse.

SE CREATIVO Dale tu impronta al sitio, muestra quien eres, no hagas un sitio genérico, destaca!! Dale ese toque personal para que puedan recordarte y quieran trabajar contigo!!

SEGURIDAD Recuerda mantener WordPress, los plugins y themes actualizados. También es recomendable cambiar la ruta de acceso al administrador mediante plugin, no utilizar usuarios o claves genéricos o demasiados sencillos (olvidate del admin). El plugin Wordfence es muy recomendado!

METODOLOGÍA:

PRIMER ETAPA: Instalación de CMS WordPress

Creación de Base de Datos y Usuario de la BD desde el panel de control del hosting.
Descarga de WordPress, subir comprimido al servidor, descomprimir e instalar.
Recuerda que al descomprimir crea una carpeta llamada “Wordpress” por lo que debes mover todos los archivos a la raíz de tu carpeta “public_html” ANTES DE COMENZAR LA INSTALACIÓN.
Verificar el acceso al back-end con el usuario administrador.

Instalación de WordPress

WordPress WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo de sitio.

Problemas al eliminar WordPress

Ouch! Nos equivocamos y queremos borrar la instalación de WordPress? Es muy común que no te permita eliminar la carpeta, te dejo un video de como podes solucionarlo!

Plugins WordPress

Vamos armando un listado de plugins para WordPress: A medida que vayamos probando diferentes plugins los vamos a ir agregando asi entre todos los podemos probar y descubrir,

SEGUNDA ETAPA: Planificación y bocetos

Investigar y recopilar información, fotografías, videos, especificaciones, etc.
Podemos inventar cierta información.
Mapa de Sitio y Wireframe (boceto de estructura).
Boceto diseño en Figma.
Realicen un relevamiento de sitios similares para determinar la información imprescindible, usen el sentido común y su creatividad para el resto!

ENTREGA DE BOCETOS Deben entregarse por Figma: MAPA DE SITIO - WIREFRAME y BOCETOS DE DISEÑO RESPONSIVO.

TERCER ETAPA:

Creación y gestión de contenidos

Instalación y personalización del Theme Hello.
Plugin Elementor / Elementor PRO.
Instalación de otros plugins necesarios.
Creación de páginas estáticas y entradas dinámicas.
Creación de menú.
Verificar la navegabilidad y la experiencia de usuario.
No se estipula un mínimo secciones, queda a criterio del alumno que el sitio contenga toda la información necesaria dependiendo de la institución seleccionada.

1. Una vez instalado el WP, continuamos con el Theme Hello, luego los plugins báscios, como Elementor, Elementor PRO, UpDraftplus (recuerda hacer alguna copia de seguridad cada tanto).

2. Primero genera las páginas... por más que no tengas el contenido, solo las creas y las guardas, de este modo podes crear el Menú con los vínculos de páginas listo.

3. Una vez que haz creado las páginas y el menú principal, seguiremos con la creación del Header y el Footer.

4. Ahora ya podemos empezar a diagramar y diseñar nuestras páginas con los diferentes contenidos ya visualizando el header y el footer.

5. Empezamos a crear los contenidos dinámicos! Entradas y Categorías de entradas para luego poder filtrar y mostrar en diferentes lugares.

6. Llego el momento de probar diferentes plugins! No olvidar de personalizar el Escritorio de WP y la página de ingreso, así también como plugins de seguridad y performance.

CUARTA ETAPA:

Puesta en marcha!

Realizar un control general. Navega todos los contenidos y verifica el responsive.

Si tienes la posibilidad realiza un control probando el sitio en diferentes navegadores y dispositivos, como celulares o tablet, para verificar el correcto funcionamiento del diseño responsivo.

Recuerda que en la mayoría de los navegadores puedes simular la vista del sitio en dispositivos.

También puedes hacer un relevamiento de la performance del sitio: gtmetrix.com

NO OLVIDES DE REVISAR TU ENTREGA FINAL Tomate un momento para revisar a fondo el funcionamiento de tu sitio antes de la entrega, chequea los vínculos, la navegabilidad y su comportamiento en diferentes dispositivos.

QUINTA ETAPA: GENERAR QR

Broche de oro!

Por ultimo vamos a generar un código QR para acceder a nuestra web de manera rápida!

Es un lindo toque a la hora de presentar el final en la mesa de examen!

Criterios de evaluación y contenido obligatorio:

Desarrollo del proceso y bocetos.
Nombre correcto de archivos y carpetas en el servidor.
Optimización de TODAS las imágenes.
Correcto uso del titulo del documento y favicon.
Correcta visualización en todas las resoluciones y dispositivos (responsivo).
Aplicación de animaciones, efectos hover y cualquier otro recurso que consideren adecuado.
Diseño y maquetación en general: jerarquización de la información, manejo texto, legibilidad, composición, manejo del espacio, uso del color, contraste, etc.
Creatividad y recursos.
Navegabilidad (siempre saber donde estoy y poder navegar de manera clara, fácil y rápida entre los contenidos del sitio)
Presentación general del final, impacta y deslumbra!