Details
Experimente todo el proceso desde la etapa inicial hasta la planificación clara, el diseño sencillo con Figma, el proceso de publicación simple y claro y la construcción de CMS* para una gestión eficiente.
Un sitio web que sea fácil de archivar y esté lleno de tu personalidad es otro portafolio que puedes tener como diseñador.
*CMS (Sistema de gestión de contenidos) es un sistema de gestión de contenidos que facilita la gestión y las actualizaciones de datos.
El portafolio del diseñador Haneul Park abarca todo, desde el diseño y la implementación de sitios web hasta el diseño gráfico.
diseño gráfico
diseño web
¿Por qué tomar esta clase?
Al crear un sitio web de cartera, si se centra sólo en la usabilidad, el sitio web fácilmente se volverá aburrido, y si sólo enfatiza el impacto visual, el sitio web terminará siendo difícil.
Si desea crear su propio sitio web que equilibre usabilidad y diversión, es decir, que sea fácil de actualizar periódicamente y al mismo tiempo muestre su cartera de manera atractiva,
Siga paso a paso desde la etapa de planificación hasta la implementación final a través de explicaciones amigables y tres ejercicios específicos adaptados al nivel de diseñadores que no están familiarizados con la codificación.
En esta clase, aprenderá todo el proceso desde el diseño del sitio web hasta su finalización.
Parte 01. Diseño de sitio web hecho con Figma
-
Diseño de sitio web realizado con Figma: Desktop ver. -
Diseño de sitio web realizado con Figma: versión móvil.
Parte 02. Sitio web final implementado (desde la publicación hasta el alojamiento)
-
resultado final
* Los resultados anteriores son ejemplos reales que se crearán directamente en la clase.
diseñador grafico
Haneul Park
Hola, soy el diseñador gráfico Haneul Park.
Actualmente trabajo como diseñador UI en Studio Barton, trabajando en sitios web para marcas de diversos campos.
Al mismo tiempo, trabajo como diseñador independiente, trabajando a través de diversos medios tanto en línea como fuera de línea, incluido el diseño gráfico, el diseño de exposiciones y el diseño e implementación de sitios web.
En lugar de depender de plantillas prediseñadas, esperamos que cree un sitio web de cartera único y adaptado completamente a su propio contenido.

Diseñador gráfico Haneul Park
Actual) Diseñador de UI de Studio Barton
Actual) Diseñador freelance
Ver más historia
[Proyecto de Participación (Studio Baton)]
Diseño de sitio web 'Patrón de fachada' 2022
Diseño web 'Más Visión' 2022
Diseño del sitio web 'Revista B' 2022
Diseño del sitio web 'Osulloc Brand Story & Dada Daily Life' 2021
Diseño web 'HEIGHTS' 2021
[Proyecto participante (Freelance)]
Diseño gráfico 'Caminando sin piernas' 2022
Diseño y desarrollo del sitio web 'Mira quién habla' 2022
Diseño y desarrollo del sitio web 'Upperhouse VIP Lounge' 2022
Diseño Gráfico 'SMile Music Festival' 2022, 2020
Diseño gráfico 'Manecillas de reloj' 2022
Diseño y desarrollo del sitio web 'Eugene Jung' 2022
Diseño y desarrollo del sitio web 'Artículo interactivo del periódico de Seúl' 2022
Diseño y desarrollo web 'Name March' 2020
características de clase
Creación de un sistema de gestión de cartera sostenible
Organizar tu portafolio es algo que siempre pospones. Cree un 'sistema de gestión de cartera específico de medios' sostenible y sencillo estructurándolo a través de su sitio web.
Incluso los principiantes en codificación pueden aprender conocimientos de producción mediante la práctica.
Incluso aquellos que son nuevos en la codificación o que se han topado con un muro de codificación pronto podrán completar un sitio web siguiendo los pasos desde la planificación hasta el alojamiento final.
Portafolio web con identidad propia
Crear un sitio web con una plantilla es conveniente, pero al mismo tiempo parece uniforme, como un apartamento. Aprende a crear un sitio web como el de una casa unifamiliar con tu propia personalidad y estructura sin plantilla.
composición de clase
aprende esto
-
Planificación de un sitio web que exprese individualidadEstablezca el propósito y la dirección del sitio web y cree una estructura alámbrica que tenga en cuenta la usabilidad y la individualidad adecuadas. -
Una introducción a figma que se puede aprender siguiéndola.Comprenda cómo funcionan las funciones principales, como el marco de Figma y el diseño automático, y aprenda rápidamente las funciones básicas a través de ejemplos prácticos. -
Cómo crear un prototipo detalladoAnalizaremos funciones y trucos útiles para la creación de prototipos y aprenderemos cómo crear un prototipo detallado que se acerque al sitio web que realmente se implementará.
-
Diseño de estructura de sitio web responsivoAnalizaremos una estructura de sitio web responsivo que opera de manera flexible en entornos de dispositivos de diversas proporciones y tamaños. -
Crea tu propio tema de WordPressCrea tu propio tema de WordPress con el diseño que quieras de forma relativamente sencilla, sin necesidad de utilizar un constructor ni un tema. -
Método de procesamiento del contenido del portafolio por formatoVeamos algunos consejos para procesar contenido al publicar su portafolio en varios formatos, incluidos Instagram, sitios web y archivos PDF.
plan de estudios
Muéstrame el plan de estudios
SECCIÓN 01. Introducción
01. Introducción a la conferencia
- Introducción del orador
- Introducción al plan de estudios
- Introducción al programa utilizado.
SECCIÓN 02. Creación de un sitio web de cartera: preparación
02. Formas de crear un sitio web
- Explora plataformas, creadores y plantillas
- Aprenda a crear para su situación
03. Planificación e investigación de sitios web.
- Establecer propósito y dirección
- Diseño de estructura alámbrica y derivación de palabras clave de impresión.
- Investigación y análisis de sitios web
SECCIÓN 03. Creación de un sitio web de cartera: diseño
04. Diseño de sitio web realizado con Figma: Figma
- configuración del archivo figma
- Comprender la estructura del marco
- Explora las funciones básicas/clave
05. Diseño de sitio web realizado con Figma: Escritorio 1
- Diseño predeterminado del escritorio, configuración del prototipo
06. Diseño de sitio web realizado con Figma: Desktop 2
- diseño de página principal de escritorio
07. Diseño de sitio web realizado con Figma: Desktop 3
- Diseño de página de destino de escritorio
- Diseño de página de detalles de escritorio
08. Diseño de sitio web realizado con Figma: Mobile 1
- Diseño básico móvil, configuración de prototipo.
- Diseño de página principal móvil
09. Diseño de sitio web realizado con Figma: Mobile 2
- Diseño de página de introducción móvil.
- Diseño de página de detalles móvil.
- Subir detalles del prototipo
SECCIÓN 04. Creación de un sitio web de cartera: implementación
10. Preparación de materiales
- Preparación de materiales de diseño para la implementación del sitio web.
- Una mirada al proceso de creación de la animación de Lottie.
11. Configurar el ambiente de trabajo
- Configurar un entorno de trabajo de WordPress localmente
- Configurar un entorno de trabajo VSCode
12. Comprender la estructura del sitio web.
- Una mirada a la estructura del tema de WordPress
- Comparar diseño y estructura temática
13. Implementación del sitio web: Publicación 1
- Establecer estructura de archivos predeterminada
- Entendiendo CSS responsivo
- Diseño de encabezado y pie de página
14. Implementación del sitio web: Publicación 2
- Diseño HTML de la página principal #1
- Diseño CSS de la página principal #1
15. Implementación del sitio web: publicación3
- Diseño HTML de la página principal #2
- Diseño CSS de la página principal #2
16. Implementación del sitio web: Publicación 4
- Agregar una página de introducción
- diseño html de la página de introducción
- Diseño CSS de la página de introducción.
17. Implementación del sitio web: CMS1
- Agregar página de detalles
- Crear un tipo de publicación personalizada
18. Implementación del sitio web: publicación 5
- diseño html de página detallada
- Diseño css de página detallada
19. Implementación del sitio web: CMS2
- Configurar los campos de la página principal y conectarse al CMS
- Configure los campos de la página de destino y conéctese al CMS
- Configuración del campo de la página de detalles y conexión CMS
20. Implementación del sitio web: CMS3
- Agregar función de cambio de idioma
- Subir contenido
- ajustes de acabado
21. Implementación del sitio web: alojamiento
- copias de seguridad
- conexión de alojamiento
SECCIÓN 05. Final
22. Varias posibilidades de uso
- Eche un vistazo a sitios web con diferentes estructuras.
- Échale un vistazo a cómo gestionar tu cartera por medios
- Procesamiento de medios del sitio web completados por medios
entrevista
Lo que quiere decir el diseñador gráfico Haneul Park neul
¿Cuáles son los puntos clave de esta conferencia?
Esta es la parte en la que explora su cartera desde varios ángulos y establece un sistema de actualización sencillo y continuo que coincida con su cartera. También creo que es un punto importante poder experimentar, aunque sea de forma amplia y superficial , todo el proceso necesario para crear un sitio web, desde el diseño hasta la implementación, y aprender un método de implementación con un alto grado de libertad de diseño sin necesidad de utilizar programas listos. Plantillas o temas creados.
¿Cuáles cree que son las fortalezas o diferencias del instructor?
Trabajé principalmente en diseño gráfico, pero cuando trabajé como diseñador de UI, pude desarrollar el sentido de que la forma sigue a la función. Creo que mi fuerza y diferenciación radica en la experiencia de diseñar e implementar un sitio web que sea moderadamente usable y divertido de principio a fin . En la tabla de contenidos que cubre Figma, nos gustaría compartir un proceso de diseño de sitios web eficiente pero gratuito para controlar la usabilidad y la diversión adecuadas.
¿Qué pueden ganar los estudiantes con la conferencia?
Espero que desarrolles el hábito de organizar y mostrar continuamente tu proceso de trabajo y tus resultados y que, como resultado, crees tu propio archivo . Porque un archivo bien organizado ayuda tanto directa como indirectamente. Además, el diseño y la implementación de un sitio web no es tan difícil y divertido como crees, ¿verdad? Espero que puedas tener una idea de si quieres aprender más .
Le guiaremos a través del programa a utilizar.
Esta clase se lleva a cabo utilizando la versión 116.2.4 de la aplicación de escritorio Figma, Visual Studio Code 1.71.1, MAMP 6.6 y FileZilla 3.56.0 . Instale la versión correspondiente del programa para garantizar una participación fluida en el curso.
* Todo el software es gratuito y se puede descargar la última versión.
* Los programas y materiales no se proporcionan por separado.
