Cree un diseño de sitio web limpio en Photoshop: diseñar un diseño de sitio web es más que organizar imágenes coloridas y llenar texto en los marcos de texto. Es un enfoque que habla mucho del negocio de su cliente. Los colores y gráficos del sitio web definen la naturaleza del negocio, mientras que la calidad del diseño y el flujo de navegación fácil del sitio web deben vincular al usuario con la organización y convertirlo en un cliente potencial.
Diseñar un diseño de sitio web atractivo y de fácil acceso es obligatorio para todos los aspirantes a diseñadores web. Este tutorial tiene como objetivo llevarlo a través del proceso de creación de un diseño de sitio web simple y limpio desde cero. Durante el proceso, aprenderá puntos importantes que lo ayudarán a obtener más conocimientos sobre el diseño web. 
Escriba sus requisitos antes de diseñar el diseño de un sitio web
Antes de comenzar a diseñar el diseño de un sitio web, debe saber cómo se verá su sitio web y cuáles son los temas que debe incluir en el sitio web. Es crucial hacer una lista de los elementos de diseño del sitio web que su cliente necesita en su sitio web. Junto con eso, la calidad de un buen diseñador es preparar un simulacro de todo el sitio web antes de comenzar a trabajar en la plantilla final.
Varias compañías de diseño adaptan varios niveles de estrategias de diseño previo, que pueden contener estructuras de alambre, prototipos, maquetas, versiones beta y mucho más. En este tutorial, crearemos una versión simulada antes de iniciar el diseño de la plantilla original. Estoy usando los tonos grises que permiten identificar el bloque de la maqueta
Lona
Años antes, aunque había muy pocos sistemas operativos y dispositivos limitados para acceder a sitios web, las dimensiones de la página se fijaron en uno o dos tamaños. Hoy el escenario es completamente diferente. Los usuarios finales acceden a sitios en computadoras de escritorio de varios tamaños, teléfonos móviles, iPads y tabletas. En esta situación diversa, no hay posibilidad de que pueda arreglar su página web a un tamaño particular. Pero hay algunos tamaños estándar de la industria aplicados para cada dispositivo. Lentamente encontrará su tamaño favorito o su Cliente puede recomendarle un sitio web para imitar los tamaños.
En este caso, estamos trabajando en las siguientes dimensiones. No se preocupe por la altura, ya que va a cambiar con el tiempo. Cuanto más contenido agregue a su sitio web, mayor será la altura.
Recuerde que es común desplazarse hacia abajo en la página verticalmente, por lo que no puede fijar una altura particular para su página web a menos que no desee que el usuario se desplace en su página de inicio como Google. Pero, es necesario no desplazarse horizontalmente. Por lo tanto, limite su ancho de acuerdo con los estándares de la industria y no sea creativo con el desplazamiento horizontal.
Para la web, la resolución está limitada a 72. Recientemente se han encontrado imágenes y páginas de mayor resolución en iPads y pocas tabletas. Pero es una rara ocasión, y es mejor quedarse con 72 considerando la velocidad de Internet en todo el mundo.
Seleccione los archivos con el comando Ctrl + A y dibuje guías por igual en toda la plantilla. Un sitio web debe estar perfectamente organizado con cada elemento organizado coherentemente entre sí. Y las pautas de diseño del sitio web lo ayudan a obtenerlo fácilmente.
Prepara tu maqueta
Colocar su archivo de maqueta en su plantilla original le ayuda a ahorrar mucho tiempo. Diseñar su sitio web se vuelve tan fácil que terminará completando el marco en pocos minutos. Sin embargo, la maqueta solo lo ayudará a diseñar los marcos. Completar los elementos de diseño con detalles, tipo de disposición y alineación llevará más tiempo que dibujar el diseño del sitio web.
Esquema de color y otras opciones
Lo siguiente que debe hacer después de preparar su marco es elegir un esquema de color. Pero, es mejor preparar sus colores antes de comenzar a trabajar en el diseño.
Todo se reduce al mensaje de que debes preparar tus armas antes de comenzar el diseño. Todo, incluidos los iconos, las imágenes y las opciones de color, deben estar listos antes de comenzar a trabajar. Organizar y planificar su trabajo ahorrará más tiempo y se centrará en el diseño sin obstrucciones en el medio.
La elección de los colores puede ser elección del diseñador si la empresa es nueva y no tiene una identidad corporativa antes. En algunos casos, los clientes dan una idea de qué tonos quieren que sea el logotipo o el fondo. En el caso de las empresas existentes donde es posible que deba rediseñar un sitio web completo, es posible que deba elegir los mismos colores según las necesidades del cliente.
Existen numerosos sitios web que pueden ayudarlo a elegir millones de esquemas de color de los archivos. Pruebe los siguientes sitios web para disfrutar de una amplia variedad de combinaciones de colores.
Color.adobe.com
Colourlovers.com
Aquí elegí algunos tonos de azul para usar en el sitio web. Todo el sitio web se planificará con el siguiente esquema de color. No olvide elegir tres o cuatro combinaciones de colores diferentes, ya que no sabemos qué color preferirá el cliente. Una vez que el cliente finaliza un esquema de color, guarde los valores de sombra y asegúrese de que los colores desempeñen un papel vital en cada vertical de la organización. Especialmente en la identidad corporativa.
Proceso de diseño
Hay muchas formas de llevar a tus diseñadores. No hay reglas de diseño de sitio web rápidas y duras para definir o seguir el proceso de diseño, es principalmente un proceso que el diseñador elegirá según su conveniencia.
Algunos diseñadores desean construir bloques y marcos completos y comenzar a trabajar en los detalles en la segunda etapa, seguidos del tipo y finalmente las alineaciones y los ajustes. A algunos les gusta terminar una parte de la página a la vez y pasar a la siguiente. Estamos siguiendo el segundo estilo.
Terminaremos el sitio web en los siguientes pasos
- Encabezado y pie de página
- Que hacemos
- Servicios
- Formar
- Noticias
- Pie de página
Encabezado y pie de página
La regla general para definir las dimensiones de su encabezado o banner se deja a su creatividad. Según las últimas tendencias, los sitios web aparecen con una imagen enorme que cubre toda la pantalla de su computadora. El estilo se conoce como imagen de héroe, que se hizo bastante popular recientemente.
En este caso, comenzamos con un encabezado de altura de 120 píxeles y una altura de 550 píxeles para el banner. El ancho debe coincidir con el tamaño del documento.
Los diseños con color sólido tienen un aspecto plano que no combina bien con cuadros o imágenes más grandes. Para evitar el aspecto plano, apliqué una capa de superposición de degradado en la parte superior del banner. Le da al banner una profundidad que se transforma lentamente de un tono a otro.
A continuación, comenzamos a importar el logotipo y colocarlo en la esquina superior izquierda del encabezado y otro logotipo más grande en el centro del banner. También puede observar las formas vectoriales de diseño del sitio web en la esquina superior derecha, que se utilizan para compartir los enlaces de las redes sociales.
En esta etapa, terminé de agregar el tipo en la parte Encabezado y Banner. Nombre de la empresa, mensaje de marca, con enlaces y servicios, se agregan en el texto. También puede observar un botón transparente en el Banner.
Texto sin formato o demasiado tipo sin características especiales estropearán la apariencia de su página web; la página pronto aburrirá al usuario, lo que puede permitirle abandonar su sitio rápidamente. Echa un vistazo a la forma vectorial que agregué a los enlaces de servicios en la parte superior derecha del banner. El estilo es simple, pero llena el vacío evitando el aspecto mundano.
Elija una imagen apropiada para el negocio. Hay millones de imágenes disponibles en la web, y no tardará mucho en encontrar una imagen que se ajuste a sus necesidades.
En mi caso, encontré una imagen de alta calidad que creo que irá bien con mi sitio web. No tengo un tema de negocios para el sitio web, así que soy libre de elegir cualquier imagen que se vea bien en la publicación del banner.
Intente descargar algunas imágenes HD de los sitios de imágenes gratuitas que se muestran a continuación
www.pixabay.com
La fusión es un arte que debes dominar para producir hermosos estandartes. Aquí mezclé tres capas para lograr el efecto que se muestra en la imagen de arriba. Aquí esta lo que hice
- Coloque la capa de imagen en la parte superior del banner de color azul.
- Coloque la superposición de degradado encima de la imagen.
- Cambie la opacidad de la imagen en un 40 por ciento y cambie el modo de fusión a diferencia.
- Consulte la paleta de capas en la imagen de arriba para comprender cómo se apilan las capas entre sí.
Así es como se verá su encabezado y banner cuando acabemos de trabajar en él. Estamos trabajando en una parte a la vez, y es hora de pasar al siguiente nivel.
Alineación en crucial cuando se trata de escribir; tenga una idea de cómo debe verse su sitio y el texto debe estar alineado antes de iniciarlo. En este nivel, utilicé dos marcos de texto diferentes, ambos alineados a la izquierda.
El siguiente paso es diseñar la parte de servicios de la página web. Diseñé una estrella metálica en tonos grises para mostrar varios servicios de la empresa. La intención detrás del uso del símbolo de estrella es servicios de 5 estrellas.
Cuando se trata de alinear el texto, las guías son sus mejores amigos. La coherencia dentro del tipo y los objetos se puede obtener haciendo un buen uso del espacio en blanco y espacios iguales entre los elementos de diseño. Utilicé muchas pautas de diseño de sitios web para ver que todos los objetos en el marco deben mantener espacios y distancias adecuadas que generen una buena cantidad de espacio en blanco.
El siguiente paso de nuestro diseño es crear el campo Formulario. En este caso, estoy trabajando en forma opuesta al método que usamos para diseñar el banner. Colocaremos la capa de imagen debajo de la capa de color sólido y aplicaremos una capa de degradado en la parte superior de las dos capas para lograr una mejor apariencia. Jugar con los modos de fusión siempre es esencial al colocar imágenes más grandes.
La elección de las imágenes para este sitio no tiene un tema específico relacionado. Creo que esta imagen ayudará a que el sitio se vea mejor.
Coloque la imagen debajo de la capa de fondo de color. Para fijar la imagen exactamente al tamaño de la capa de color, use las opciones de enmascaramiento de capa.
Eche un vistazo a la paleta de capas en la imagen de arriba. La capa de color azul sólido está en la parte superior de la imagen, el modo de fusión se convierte en superposición y la opacidad se reduce al 65 por ciento.
Usé el mapa de gradiente en la parte superior de las dos capas. El modo de fusión cambia a matiz y la opacidad permanece igual.
El cuadro de formulario está listo, lo que nos lleva al final del cuarto nivel en el diseño de nuestro sitio web.
Nuestro siguiente nivel consta de dos marcos de texto simples. Se parece al nivel dos de la página web y utilicé los dos cuadros alineados de manera similar a la parte superior. Mantener la coherencia en la alineación es una buena forma de utilizar el espacio en blanco.
Cuando llegamos a la parte final de la página, es hora de volver a mirar las dimensiones del pie de página. El diseñador tiene que planificar la altura del pie de página en función de los enlaces que debe usar allí. En este caso, le di una altura de 170 píxeles a mi pie de página. Ancho sigue siendo el mismo que el sitio web.
Coloque los enlaces e imágenes según su requisito.
Con esto, concluimos la parte de diseño de nuestro sitio web. Las combinaciones de colores que utilizamos son mínimas, utilizamos mucho espacio en blanco en nuestro diseño y agregamos texto simple con fuentes mínimas. La intención es diseñar una página web limpia, que esperamos se cumpla.
Eche un vistazo al diseño de toda la página a continuación una vez más.
