Creando prototipo y maquetando web en photoshop

Creando prototipo y maquetado web para photoshop

OBJETIVO Planifica y preparaprototipos y maquetas web destinadas a la creación de contenido web mediante ejemplos de sitios web ya existentes.

Web y Multimedia Instituto Tecnológico Superior “Daniel Álvarez Burneo”

Janela Pacheco Deybi Rivera Sebastian Uchuari Dayanra Valle

El propósito de esta revista es analizar y sintetizar acerca de la creación de prototiposy maquetas web en Photoshop. Además, realizaremos una introducción a las principales herramientas que un diseñador puede utilizar para mejorar la calidad de su trabajo y de su productividad.

DISEÑO WEB

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

PLANEANDO EL PROYECTO

Un primer boceto que realizamos para un proyecto digital que queremos crear.

Un primer boceto que realizamos para un proyecto digital que queremos crear.

La clave para los buenos bocetos es simplemente dejarse llevar, jugar con elementos del diseño como la forma en que los menús podrían aparecer, o cómo hacer que aparezca una característica para una parte en particular del contenido.

Tiene que reflejar las ideas generales sobre el proyecto, debe de responder entre otras cuestiones a : *Donde pondremos los elemtos más característicos como logos, etc. *Dónde estará la zona de navegación

*Dónde se cargan los sistemas de ayuda para usuarios. *Se agregarán servicios de redes sociales *Qué áreas de contenidos y que servicio queremos presentar en el proyecto.

Una de las mejores cosas que se puede hacer con un dibujo es documentar y escribir sobre lo que hemos hecho. Incluso es posible que estemos varios días trabajando sobr e una idea, esto también nos resulta útil para recordar porque añadimos algún elemento en un boceto.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

GUIAS Y REGLAS Para trabajar en web es fundamental el uso de guías para alinear nuestro contenido,En el modo Experto, las reglas, cuadrículas y guías le ayudarán a colocar elementos (por ejemplo, selecciones, capas y formas) con precisión a lo largo y ancho de una imagen.

En el modo de edición Rápida, solo están disponibles las cuadrículas.

Cuando están visibles, las reglas aparecen a lo largo de la parte superior y a la izquierda de la ventana activa. Las marcas de la regla muestran la posición del puntero cuando lo mueve.

Cambiar el origen de la regla (la marca (0, 0) en las reglas superior e izquierda) le permite medir desde un punto específico de la imagen. El origen de la regla también determina el punto de origen de la cuadrícula.

Utilice el menú Vista para mostrar u ocultar las reglas (solo en el modo Experto), la cuadrícula o la guía. El menú Vista también ayuda a activar o desactivar el ajuste de elementos a la cuadrícula o la guía.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

USANDO UN SISTEMA DE REJILLA En el contexto del diseño gráfico una retícula, grilla o rejilla es un instrumento para ordenar los elementos gráficos como el texto y las imágenes.

El maquetado mediante grids, “rejillas” es una técnica que nos puede ayudar y puede reducir considerablemente nuestro trabajo

Una rejilla se desarrolla a partir del tamaño de la página o de nuestro diseño, su función es subdi vidir el espacio en campos e intervalos, y su objetivo es mantener una colocación correcta de los elemento dentro de la página, dando una sensación de estructura ordenada.

En el diseño editorial, por ejemplo, la medida de la retícula se establecerá a partir de las variables tipográficas: la familia, la fuente, el cuerpo, la medidade línea y la interlínea, sin embargo en el diseño de páginas web o aplicaciones que se van a visualizar en un monitor es habitual usar el número mágico de 960px .

En el diseño de páginas web el uso de la rejilla de 960px con 12 columnas se ha popularizado tanto que algunos de los más importantes frameworks de desarrollo de páginas web responsive como son Twitter Bootstrap o 960 GRID system usan esta configuración de columnas y en muchos de los programas para crear wireframes encontrareis la opción para poder diseñar con este tipo

Imagen de una rejilla 960px con las opciones y tamaños de diseño en columnas.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

DESARROLLANDO UNA ESTRUCTURA CON FORMAS DE CAPA Pensemos entonces en el orden de la información que nos gustaría presentar a los visitantes, de arriba abajo es lo más fácil, y en segundo lugar de izquierda a derecha. Además, en el caso de las páginas web, una estructura básica muy común es dividir la página en tres zonas, cabecera, cuerpo, y pie.

Habitualmente vamos a usar esta estructura básica de cabecera, cuerpo y pie, aunque muchas veces podemos ser creativos con el diseño, dependiendo de nuestro objetivo y de aquello que estemos diseñando, y mantener la jerarquía de la información en la mente.

Cuando ya tenemos definida la estructura con nuestras cajas perfectamente posicionadas, tenemos que ver si tenemos correctamente estructurada la información. La regla básica que debemos que tener en cuenta es que la información que se desea ofrecer al público tiene que ser clara, incluso en una estructura metálica en blanco y negro.

Utilizando diferentes tamaños de fuente, negritas, y/o subrayados resulta una buena fórmula para diferenciar entre los diferentes niveles de información.

DESARROLLANDO UNA ESTRUCTURA CON FORMAS DE CAPAS

Mediante el uso de formas vectoriales se define su estructura

1

6

Con las guías colocadas, estructuraremos la idea previa

PARRAFO DE TEXTO Seleccionar la herramienta tipo texto haciendo clic y sin soltar

2

CABECERA colocamos un rectángulo se puede arrastrar el rectángulo o establecer valores en propiedades

7

Se rellena utilizando la opción pegar “Lorem ipsum”

3

8

SLIDER se crea una forma rectangular, ancho 960px y altura 300px

Creo un nuevo rectángulo que asimile una fotografía (como en el boceto) que lo acompaña a la izquierda

4

9

MINIATURA DE VIDEOS crearemos una forma vectorial con un tamaño base de 300 x 300 px

PIE DE PÁGINA Crear un rectángulo y con la ayuda de propiedades.

5

10

Formamos una fila de miniatura de videos la misma que seleccionamos y arrastramos hacia abajo presionando “alt” siguiendo la misma dirección

se aplica valores ancho 1200 px y alto 300 px

AJUSTANDO AL PIXEL

Se trata de corregir los errores de alineación y disposición de los elementos para mejorar nuestro prototipo.

OPCIONES DE PHOTOSHOP se puede aplicar así: Seleccionamos el elemento que no está bien centrado luego aplicamos el comando Ctrl+ Alt ó Window+ Alt en caso de trabajar con Mac.

SE TOMA EN CUENTA que:

SEGUNDO PASO opciones de photoshop

También basándose en la guías se puede arrastrar y centrar

Dentro de la barra superior de las opciones de photoshop hacemos clic en alinear centros horizontales.

EMPEZANDO CON EL PROTITIPO DE NUESTRA MAQUETA WEB

El prototipo es la maqueta básica que he utilizado para formar mi diseño web.

¿En que ayuda?

Prototipo en formas vectoriales

Diseño final

Empezar con un prototipo ayudara como guía para determinar márgenes o la posición de elementos importantes como un logotipo un gráfico como va ser el fondo.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

CONTENIDOS: - Organizando la estructura de página - Añadiendo elementos maestros.

- Trabajando con fotografías.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

Organizando la estructura de página Se organizara por carpetas: Cabecera Se colocaran todos los contenidos que estén el la zona superior de la pagina.

Contenido Inicio.

Contendrá el contenido Home Page o Pagina Inicial Contenido Acerca de Contendrá sobre la información necesaria de la empresa.

Contenido tienda Se podrán colocar los productos que ofrece la pagina web Contenido contacto Contendrá formularios donde los clientes se podrán comunicar con la empresa.

Pie de pagina.

Contendrá los créditos de la pagina y el fondo de pagina ya que este siempre sera visible en la pagina.

Esto nos ayudara a que la pagina web este Correctamente ordenada por un sistema de Navegación lineal.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

AĂąadiendo elementos maestros.

Muestras para trabajar la pagina Antes de elaborar nuestra pagina web necesitaremos colores que esten establecidos por la empresa a cual se este elaborando la pagina.

Se pueden cargar varios colores que ya esten predeterminados por el cliente.

Cargar Muestras: 1) En la parte superiro derecha del panel de muestras tenemos un icono de opciones el cual lo abrimos con el click derecho.

2) Nos mostrara varias muestras de colores, 3) Vamos a cargar muestra, buscamos la muestra en el explorador, el tipo de archivo debe ser .ASE 4) La cargamos y se nos agregara en el panel muestras junto con los demas colores.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

AĂąadiendo elementos maestros.

Colocar elementos Incrustados Podremos colocar elementos elaborados en Ilustrador y poder editarlos afectando al elemento incrustado en photoshop.

1) Archivo 2) Colocar elementos incrustados

CREANDO CREANDO PROTOTIPO PROTOTIPO YY MAQUETA MAQUETA WEB WEB EN EN PHOTOSHOP PHOTOSHOP

Añadiendo elementos maestros.

Nos saldra una ventana de Abrir como objeto inteligente.

Nota: Siempre tendra que estar en pagina para posteriormente editarlo Presionamos Ok y se incrustara el elemento de ilustrador.

Agregaremos la barra de navegación la cual contendra - CONTACTO - TIENDA - ACERCA DE - INICIO Esto estara en una subcarpeta navegación y en la carpeta de cabecera.

CREANDO CREANDO PROTOTIPO PROTOTIPO YY MAQUETA MAQUETA WEB WEB EN EN PHOTOSHOP PHOTOSHOP

Trabajando con fotografías.

Abriremos el Psd. con el nombre robts el cual contendra tres imagenes de robots para nuestra pagina.

Para copiarlos a nuestro diseño web seccionamos las tres capas y arrastramos al archivo de nuestro diseño.

Las ordenamos correctamente alineadas con lineas guias para que nuestro diseño quede estetico y presentado.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

Características adecuadas

Longitud de línea: El número de caracteres en una línea de texto contribuye a la legibilidad en gran parte. Si el texto es extremadamente amplio, puede resultar intimidante y difícil de leer. Lo mismo si la longitud del texto es demasiado corta, lo cual podría causar confusión y estrés a la vista de los lectores.

Interlineado: El espacio que existe entre las líneas del párrafo de texto es también importante. Imagina si en este artículo las líneas chocaran entre sí, de seguro no podrías comprender el texto.

Márgenes y espaciado: Así como el interlineado, la cantidad de espacio en medio y al rededor de las letras también tiene impacto sobre cómo el lector comprenderá el texto.

Color y contraste: El color de texto sobre el fondo correspondiente también tiene mucha importancia. Si se sitúa un texto de color verde sobre un fondo verde, este puede ser difícil de distinguir y leer. Existe una razón por la cual la mayoría de diseñadores optan por una letra de color claro sobre un fondo negro o una letra de color oscuro sobre un fondo claro. El contraste facilita la lectura.

El tipo de letra puede ser un gran número de cosas también, pero todos los textos deben tener algo en común: deben ser legibles.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

TRABAJANDO CON TEXTO Para web en photoshop

e podrá entender y usar correctamente las posibilidades que ofrece photoshop a la hora de trabajar con texto para una página web.

Mediante la herramienta texto se puede elegir cuatro opciones: Texto horizontal, texto vertical máscara de texto horizontal y máscara de texto vertical.

Cuando se trabaja con texto en photoshop tenemos dos opciones básicas, podemos crear objetos de tipo texto en una línea o párrafos de texto.

Cuando diseñamos para web debemos tener en cuenta una serie de restricciones que existen actualmente. Hoy en día se han considerado cierto tipo de fuentes que son apropiadas para el diseño web:

La diferencia entre estas opciones es que en la primera solo se necesita dar un clic en el lienzo y ya se puede empezar a escribir y la segunda se consigue dando clic en el lienzo y sin soltar se arrastra el cuadro al tamaño deseado.

Fuente con serifa: Georgia, Palatino, Linotype y Times New Roman Fuente sin serifa: Arial, helvetica, Lucida Grande y Verdana Manoespaciadas: Courier New, Lucida console.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

CREANDO CONTENIDO DE RELLENO

Se recomienda empezar una maqueta web con un prototipo, de esta manera tenemos una guía para determinar lo que son márgenes, la posición de elementos importantes como puede ser un logotipo, gráficos, imágenes, videos, cómo va a ser el fondo, etc. El prototipo es la maqueta básica usado como inicio para completar el diseño de una pagina web.

En el prototipo de una maquetación web en photoshop, al colocar los distintos recuadros que simulan cada parte de la web, se puede rellenar con imágenes que representen ya sea una galería o un video.

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

Crear botones Botones

aplique un degradado de ángulo tomando colores de la gama del verde en distintas tonalidad para producir el efecto deseado.

4. Para darle un efecto más vistoso, jugaremos con los efectos de la herramienta: situado en la capa donde tiene la forma, haga clic sobre los efectos de capa y juegue con ellos haciendo pruebas hasta conseguir el efecto que desee.

5. Para añadir el texto del botón: seleccione la herramienta texto y haga clic sobre el botón. Introduzca el texto que irá en el botón y seleccione la tipográfia más adecuada.

Los botones son uno de los elementos mas importantes a la hora de interactuar con el usuario. Los botones generalmente se suelen usar para acciones principales como comprar, ampliar información desde una página de inicio, etc.

Se debe tener en cuenta la paleta de colores que se esta usando en el resto de la página, hay que tomar en consideración el tamaño de los botones que debe ser un mínimo de 35 a 40 px, se puede utilizar sombras paralelas, tipografias, tamaños, etc.

Pasos para crear un botón: 1. Cree un archivo nuevo con el fondo de color blanco.

Sobre el dibujaremos la forma de nuestro botón.

2. Seleccione la herramienta Rectángulo redondeado.

Introduzca el radio de calado que desee para las esquinas, en este caso 10 px y rellenelo del color que desee.

3. Seleccione la forma creada y cree una nueva capa (layer). Sobre esta capa y con la forma seleccionada

CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

Maquetación web en photoshop

CONCLUSIONES - Podemos decir que la razón por la que dividimos las tareas en bocetos, guías y rejillas, y diseño con cajas es porque cada uno tiene un propósito diferente. Los bocetos nos permiten crear una idea inicial de forma muy rápida, realizar una “tormenta de ideas”.

Con las guías y los diseños de cajas, al centrarnos sólo en la estructuración, somos capaces de crear una estructura sólida sin distraernos por el momento con las imágenes.

- - Las guias son parte fundamental de

la construcción de un prototipo para web ya que ringen un orden así su posición y dirención será equilibrada también se aplica el sistema de regillas que es un instrumento para ordenar elementos gráficos del texto, imágenes y formas.

- Las herramientas de photoshop nos ayudan a tener un mejor manejo en cuanto a protipos y maquetación. De igual forma El manejar una tipografía adecuada, un tamaño y color ayuda a dar una mejor visión del sitio.

Bibliografía Sacota, A. (2013) Teoría y práctica del trabajo con Photoshop para crear tus diseños web. Recuperado de: https://www.video2brain.com/mx/cursos/dreamweaver-cc-1-creacion-sencilla-de-sitios-web/contenido-del-curso https://www.staffdigital.pe/blog/diseno-texto-web-legibilidad/ http://diseno.ciberaula.com/articulo/botones_photoshop/ https://mosaic.uoc.edu/2015/09/15/proceso-de-desarrollo-de-un-proyecto-digital/

DISEÑO WEB