Crea un diseño de sitio de portafolio mínimo (¡más un PSD gratis!)

En este tutorial de diseño, crearemos el diseño de portafolio mínimo y limpio "Minimal", disponible en ThemeForest como tema de WordPress o HTML. También discutiremos las razones por las que funciona tan bien y cómo puedes crear tu propia personalización personal a partir de la plantilla.

Echa un vistazo al final de la publicación para ver 3 modificaciones dulces de esta plantilla; los archivos fuente están en la casa!

Acerca del autor: Curt Ziegler, también conocido como Cudazi, es un diseñador web especializado en el desarrollo de temas de WordPress con 10 años de experiencia en diseño, una serie de productos de gran éxito y más de 6000 ventas en ThemeForest. También puedes encontrar más de tu trabajo en cudazi.com.

Lanzado hace un año, el diseño de tema Minimal se ha vendido casi 1000 veces combinadas y ayudó a allanar el camino para muchos otros diseños de plantillas minimo. Esta plantilla te guiará a través de cómo crear el diseño tu mismo, pero lo más importante, también discutiremos por qué funciona. Una vez que hayamos terminado, ¡esperamos que puedas crear tu propia versión de este diseño elegante y profesional utilizando tu propio estilo, fuentes y colores!

Detalles del tutorial

• Programa: Adobe Photoshop
• Dificultad: principiante
• Tiempo estimado de finalización: 1 hora

Paso 1

Comienza creando un nuevo documento en Photoshop 1020px x 1020px. Asegúrate de que tu resolución esté configurada en 72 píxeles/pulgada y tu fondo esté configurado en blanco. Necesitamos desbloquear la capa de fondo para que podamos agregar algunos estilos de capa, haz clic derecho en el fondo y seleccione "Capa de fondo". A continuación, puedes cambiar el nombre de la capa a fondo.

Paso 2

Agrega un toque de gris en la parte superior de la página haciendo doble clic en la nueva capa de fondo y seleccionando superposición de degradado en los estilos de capa. Solo tu nota rápida, siempre puedes ir al menú Capas y seleccionar el estilo de capa en lugar de hacer doble clic en la capa.

Establece la opacidad al 5% y usa un degradado lineal de -90 grados.

Haz clic una vez en el degradado para abrir el editor de degradado y configurar dos puntos:

• Negro: # 000000 en la ubicación del 0% (esto debe establecerse de forma predeterminada) 
• Blanco - #FFFFFF en la ubicación del 11%

Haz clic en Aceptar en el editor de degradado y en las ventanas de estilo de capa para aplicar el degradado a la capa de fondo. Ahora deberías ver un ligero oscurecimiento en la parte superior de la página.

Paso 3

En los sitios con un fondo muy claro o simple, me gusta agregar un elemento que le permita al usuario saber que ha regresado a la parte superior de una página. En el caso de este diseño, es una línea de 3 píxeles del ancho del área de contenido con una línea clara que se extiende por el resto del encabezado.

Al agregar líneas y formas, me gusta usar las herramientas de formas vectoriales de Photoshop. A menos que se indique lo contrario, supón a continuación que todas las líneas y rectángulos se crean utilizando este método. Al igual que con cualquier tutorial, hay varias formas de lograr lo mismo, así que siéntase libre de usar lo que le resulte más familiar.

Selecciona la herramienta rectángulo en el área de formas vectoriales de la barra de herramientas:

Dibuja un rectángulo en todo el ancho de 1020px de la página y 3px de alto. Haz doble clic en la miniatura de color en el panel de capas para establecer el color en #DFDFDF. Mueve el rectángulo a la parte superior de la página.

Paso 4

Con un ancho de 940px, un segundo rectángulo coincidirá con el ancho del contenido de nuestra página, establezcamos algunas guías en la página para ayudarnos a alinear todo de manera uniforme.

Vaya a Ver> Nueva guía...

Seleccione Vertical y establece el valor en 40px.

Agrega otra guía vertical a 980px. Esto crea un área de 940px en el centro para nuestro contenido.

Paso 5

Agrega un segundo rectángulo en la capa sobre la anterior de 940px de ancho y 3px de alto. Haz doble clic en la miniatura de color en el panel de capas para establecer el color en #333333.

Mueve el segundo rectángulo entre las guías que creó y deslízalo o hacia la parte superior de la página.

Paso 6

Solo un poco de limpieza para mantenerse organizado, mueva las dos líneas de encabezado a su propia carpeta.

Paso 7

Es hora de crear el logotipo, que es una combinación de dos rectángulos y texto blanco. Lo construiremos pieza por pieza y luego lo colocaremos en tu lugar una vez que esté completo.

El logotipo es el punto superior de nuestro diseño de pirámide invertida, donde los ojos de la mayoría de las personas comenzarán cuando visiten esta página antes de reducirse a las áreas inferiores del sitio.

Comienza creando un rectángulo de 222px de ancho por 82px de alto. Haz doble clic en la miniatura de color en las capas y establece el color en #333333.

Crea un segundo rectángulo de 14px x 14px y colócalo en la esquina inferior derecha de tu rectángulo anterior. Establece el color en #FFFFFF. Esto creará un efecto de muesca en el rectángulo sin tener que editar ninguna forma.

(Si no ves la "muesca", verifica que tu segundo rectángulo esté colocado encima del primero en el panel de capas)

Paso 8

Agrega texto al interior de las formas que acabas de crear. Para esta demostración el texto dice: mínimo.

Dependiendo del texto que utilices, es posible que debas ajustar los tamaños para que se ajusten correctamente.

• Fuente: Arial
• Tamaño: 42pt
• Seguimiento: -20
• Peso: Negrita
• Color: #FFFFFF

Paso 9

Mueve las tres capas del logotipo que creaste a tu propia carpeta titulada Logotipo. Esto nos permitirá colocarlo en la página mucho más fácil.

El logotipo debe estar a 40 px de la parte inferior de las líneas del encabezado que creamos arriba. Si recuerdas, tenían 3px de alto, por lo que necesitamos agregar una nueva guía horizontal a 43px. Vaya a Ver> Nueva guía y configúrelo en horizontal con una posición de 43px. Establece otra guía en 125px que se alineará con la parte inferior del logotipo.

Paso 10

Mueve el logotipo, alineando la parte superior con la nueva guía que creó arriba y centrada en la página. Ahora podemos pasar a la creación del menú.

Paso 11

El menú se crea con dos líneas horizontales y texto centrado en la página 40px debajo de la parte inferior del logotipo.

Agrega una guía horizontal a 165px, esta será la parte superior de nuestro menú. Crea otra guía horizontal a 209px para alinear con la parte inferior del menú.

Comienza creando una línea centrada entre las guías de contenido principal de 940px de ancho y 1px de alto. Establece el color en #AFAFAF y muévelo a la primera guía que creamos arriba.

Duplica la capa de arriba yendo a Capa> Duplicar capa. Esto crea una nueva capa en la misma posición exacta. Mueva esta nueva capa hacia la segunda guía que creamos arriba. Ahora tenemos el contenedor para nuestro menú.

Paso 12

Agrega el texto centrado horizontal y verticalmente entre las dos líneas creadas arriba.

• Fuente: Arial
• Tamaño: 14pt
• Seguimiento: 0
• Peso: Negrita
• Color #AFAFAF 

Agrega tus líneas y tu texto del menú a una carpeta titulada Menú principal para mantener las cosas organizadas.

Paso 13

A continuación, crearemos el texto promocional grande. Estará 40px debajo del menú, manteniendo el espaciado constante de 40px entre los elementos.

Agrega una guía horizontal de 248px y 324px para que sirva como contenedor de nuestro texto promocional grande. Esto puede variar según tu texto, pero funcionará para nuestras dos líneas de texto de muestra utilizadas.

Con la herramienta de texto, agregue el siguiente texto en tu página:

Bienvenido al portafolio en línea de Jane B Doe, Doctor. estudiante, diseñador en Cityname, State.

• Fuente: Arial
• Tamaño: 42pt
• Seguimiento: -50
• Altura de la línea: 45pt
• Peso: Negrita
• Color: #AFAFAF
• Color (resaltado): #B86443

Centra el texto vertical y horizontalmente entre las nuevas guías.

Coloca este texto en una carpeta titulada Texto promocional para mantener las cosas organizadas.

Paso 14

El diseño de la página de inicio tiene tres historias grandes con un icono redondo en la columna principal (izquierda). Como probablemente adivinaste, los crearemos 40 píxeles debajo del texto promocional principal. Esto es lo que crearemos:

Paso 15

Primero, creemos los tres elementos de cada historia. El título y el texto se alinearán 80px con respecto a la guía en el extremo izquierdo, dejando espacio para el ícono de la historia. Agregue una guía vertical a 120px.

Paso 16

Con la herramienta de texto, agrega el encabezado: Aprenda más sobre mí.

• Fuente: Arial
• Tamaño: 21pt
• Seguimiento: 0
• Peso: Negrita
• Color: #333333

Alinea el texto con la nueva guía en 120px creado arriba y colócalo 40px debajo del texto promocional grande.

Cambiemos un poco las cosas. No es que tenga nada en contra de las guías, pero hay una forma más rápida de espaciar elementos como este título 40px debajo del texto.

Selecciona la herramienta de movimiento y mueva el "Más información sobre mí" hasta la última línea del texto grande.

Ahora, mantén presionada la tecla shift y toca la flecha hacia abajo en tu teclado cuatro veces, el texto saltará hacia abajo 40px, 10 por cada vez que presione hacia abajo con la tecla shift presionada. (Puedes hacerlo sin turno, pero necesitaría presionar 40 veces, lo cual es más que bienvenido a hacer)

Paso 17

Crea el texto de la historia, que es un poco más pequeño y de color más claro. Alinealo a la izquierda con el título creado anteriormente. En lugar del espaciado de 40px, manténgalo cerca de unos 15px por debajo del texto del título.

Inserta una guía vertical a 640px para que sirva como borde del lado derecho del texto, manteniéndola dentro de ese límite, dejando espacio para la columna dos en el camino.

Aquí hay un poco de texto basura para usar: Lorem Ipsum es simplemente texto ficticio de printsdf sdsg y tycpsum ha sido el duasdsdffmmy estándar de la industria.

• Fuente: Arial
• Tamaño: 17pt
• Seguimiento: 0
• Altura de la línea: 20pt
• Peso: Negrita
• Color: #AFAFAF

Paso 18

El ícono es un poco más complicado, pero esencialmente es solo un círculo con una forma de Photoshop en la capa de arriba.

Con las herramientas vectoriales de Photoshop, selecciona la herramienta Elipse. Haz clic y arrastra la página mientras mantienes pulsada la tecla Mayús para dibujar un círculo perfecto. Con la capa seleccionada, presiona Control+T (Comando+T Mac) para que aparezcan los ajustes de transformación Establece el ancho (W) y la altura (H) en 60px.

Haz doble clic en la miniatura de la capa para establecer el color en #333333.

Paso 16

Haz doble clic en la capa creada anteriormente para que aparezcan la ventana Estilo de capa.

Agrega una sombra paralela, un resplandor exterior, una superposición de degradado y un trazo utilizando la configuración que se ve a continuación:

Paso 20

El paso anterior creó el fondo para los tres iconos que usaremos; ahora es el momento de crear el icono real para colocar en la parte superior del fondo.

El primer icono es solo una "i" minúscula en fuente Georgia, 49pt, color de #FFFFFF pero necesita un par de estilos de capa.

Crea la "i" en una capa sobre el círculo que creamos anteriormente y haz doble clic en la capa para que aparezcan los estilos de capa. Aplica la siguiente configuración para el brillo y el trazo exteriores:

Paso 21

Centra la "i" en el círculo y coloca ambos en una carpeta para mantener las cosas organizadas.

Mueve la carpeta para alinearla a la izquierda con la guía vertical de 40px junto con el título y el texto creado anteriormente para que tu página se vea así:

Coloca la carpeta de íconos, el título y el texto en una carpeta como Home Story A para mantener las cosas organizadas.

Paso 22

Duplica la carpeta creada anteriormente dos veces para que tenga tres historias. Mueve el segundo y tercer piso hacia abajo para que estén separados por 40px.

Paso 23

Dibuja una línea de 1px desde la guía de 40px a 640px entre las historias recién creadas. La línea terminará teniendo 600px de ancho, 1px de alto y el color #AFAFAF. Dado que las historias están separadas por 40px, coloque la línea aproximadamente 20px debajo de cada historia excepto la última.

Paso 24

En la imagen de arriba, muestro ejemplos de otros íconos, todos creados usando formas simples incluidas en el panel de formas vectoriales de Photoshop usando los mismos efectos de capa que se describen en los pasos anteriores.

Paso 25

Para este diseño, tenemos una columna secundaria de 300px de ancho con un canalón de 40px entre ella y la columna principal a la izquierda. Comencemos agregando una guía vertical a 680px que nos ayudará a alinear las publicaciones del blog y los enlaces a las redes sociales.

Paso 26

Comenzando 40px debajo del texto promocional principal al igual que las historias en la columna principal, agreguemos un título al "widget" del blog titulado Desde el blog. Alinéalo a la izquierda con la guía vertical que colocamos a 680px.

• Fuente: Arial
• Tamaño: 15pt
• Seguimiento: 0
• Peso: Negrita
• Color: #333333

Paso 27

Si deseas el ícono RSS, descarga un ícono gratuito establecido por wefunction.com en: http://wefunction.com/2008/07/function-free-icon-set/

Ajusta el tamaño del ícono a la misma altura que el "Desde el texto del blog" y deslízalo hacia la derecha, alineándolo con la guía vertical de 980px.

Paso 28

Las publicaciones del blog se componen de líneas simples y rectángulos, la clave es mantener todo espaciado uniformemente.

Comienza creando una línea de 1px de alto y 300px de ancho desde la guía vertical de 680px a 980px, coloreada #C3C3C3.

Mueve la línea 10px debajo del encabezado del widget.

Dejando 1px de espacio en blanco debajo de la línea, agrega un fondo rectangular para el título de la publicación, 300px de ancho y 28px de alto con un color de #F0F0F0.

Agrega la fecha y el título de la publicación dentro del rectángulo de arriba.

• Fuente: Arial
• Tamaño: 13pt
• Seguimiento: 0
• Color #333333 

Coloca la línea, el rectángulo y el título de la publicación en una carpeta para que podamos duplicarlos y moverlos fácilmente.

Paso 29

Duplica la carpeta de publicaciones de arriba para crear cinco publicaciones separadas. Muévelos hacia abajo, dejando un espacio de 1px entre cada uno. Luego, cambia el fondo entre sí a #FFFFFF o elimine el rectángulo.

Agrega un último borde al elemento inferior para terminar la lista de publicaciones.

Paso 30

La sección de redes sociales es bastante sencilla ya que es muy limpia y simple.

Para comenzar, descargue los íconos desde: http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/

Paso 31

A partir de 40px por debajo de la parte inferior de las publicaciones del blog, agrega un título "Redes sociales", el texto es el mismo que el del blog:

• Fuente: Arial
• Tamaño: 13pt
• Seguimiento: 0
• Color: #333333

Paso 32

Crea una nueva carpeta para los íconos sociales, puede estar dentro de otra carpeta, pero asegúrese de que esta nueva solo contenga los íconos.

Establece el modo de fusión en la carpeta en Luminosidad, esto nos dará un simple icono en blanco y negro.

Paso 33

Vaya a Archivo> Colocar y elija un ícono de la carpeta 32x32 de íconos descargados arriba, seleccione el lugar y una vez que esté en tu sitio, presione Intro para enviarlo a la página.

Paso 34

Mueve tu primer icono 10px debajo del título de la red social y alinea a la izquierda con la guía vertical a 680px.

Agrega íconos adicionales y colócalos a 10px de distancia alineándolos a la izquierda.

Paso 35

Es hora de terminar el sitio con un pie de página, créditos y un menú sencillo. Comienza dibujando una línea #F0F0F0 a lo largo del sitio de 1px de alto, 80px por debajo del último elemento de la página, el tercer piso de la columna principal.

Paso 36

A continuación, dibuja un rectángulo con el mismo color #F0F0F0 para rellenar todo debajo de la línea de 1px de arriba. Mueve el rectángulo hacia abajo dejando un espacio de 1px entre la línea y la parte superior del rectángulo para obtener un bonito efecto de doble línea.

Paso 37

El texto del pie de página se centra en la página y se coloca 20px debajo de la parte superior del pie de página. La primera línea, que se utiliza para la información de derechos de autor, es la siguiente:

• Arial
• Tamaño: 13pt
• Seguimiento: 0
• Color #AFAFAF
• Color: #B86443 (Resaltado)

La segunda línea, utilizada para un menú secundario, es un poco más pequeña a 11pt, pero por lo demás utiliza la misma configuración que la anterior.

Producto final

Por qué funciona tan bien

La plantilla Minimal funciona muy bien porque simplifica las cosas. Al eliminar las barreras y distracciones del diseño, cada pequeño elemento que permanece en el diseño adquiere mayor importancia. La jerarquía visual que se desarrolla se vuelve tan sencilla como parece: en unos momentos, el visitante del sitio puede responder de inmediato a las preguntas principales:

1. Logo: ¿Dónde estoy?
2. Declaración de misión: ¿De qué se trata todo esto?
3. Navegación: ¿A dónde puedo ir?
4. Columna de contenido: ¿Qué puedo aprender aquí?
5. Columna de la barra lateral: ¿Cómo puedo obtener más información?

El orden en el que el lector descubre esta jerarquía ni siquiera importa. Debido a que todo se presenta en una sola página de manera limpia y ordenada, el visitante es libre de explorar el diseño sin obstáculos ni confusión. Esta es la razón por la que usar una plantilla básica como esta a menudo puede ser un lugar fantástico para comenzar un diseño si no tiene inspiración. Siempre es fácil agregar elementos adicionales... lo difícil es clavar un marco exitoso.

¡Crea tus propias versiones personalizadas!

Una plantilla como Minimal simplemente no sería divertida de usar si todos tuvieran la misma versión exacta. Brandon, el editor del sitio aquí, decidió hacer un par de "variaciones personalizadas" de la plantilla Minimal para mostrar cuán versátil puede llegar a ser sin perder el espíritu minimo del diseño. Échales un vistazo a continuación:

¡En esta versión, usamos la fuente Gotham, líneas de puntos para los elementos de recursos humanos y un verde brillante para ese sabor fresco y mentolado!

En esta versión, usamos la fuente Museo, líneas de puntos para los elementos de recursos humanos y un color de acento azul profundo.

En esta versión, usamos la fuente Ziggurat, líneas de puntos para los elementos HR, y hemos invertido el esquema de color para un estilo oscuro y serio.

Conclución 

¡Eso es todo! Trata de mantener todo lo más simple posible para mantener un aspecto minimo limpio y profesional. Si estás interesado en las versiones finales de HTML o WordPress, ¡Visite mi portafolio de ThemeForest! Gracias por leer, ¡ahora deja algunos comentarios a continuación si te gustó!