Cómo Crear un Diseño de sitio web Limpio en Photoshop

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 rellenar texto en los marcos de texto. Es un enfoque que dice mucho sobre el 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 todo aspirante a diseñador web. Este tutorial está destinado a guiarlo a través del proceso de crear un diseño de sitio web simple y limpio desde cero. Durante el proceso, aprenderá puntos importantes que le ayudarán a obtener más conocimientos sobre el diseño web.

Anote sus requisitos antes de diseñar un diseño del sitio web.

Antes de comenzar a diseñar un diseño de 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 elementos de diseño de sitios web que su cliente necesita en su sitio web. Junto con eso, la calidad de un buen diseñador es preparar una maqueta de todo el sitio web antes de comenzar a trabajar en la plantilla final.

Varias empresas de diseño adaptan varios niveles de estrategias de pre-diseño, que pueden contener estructuras de alambre, prototipos, maquetas, versiones beta y mucho más. En este tutorial, crearemos una versión de maqueta antes de iniciar el diseño de plantilla original. Estoy usando los tonos grises, que permiten identificar el bloque de maqueta.

Canvas

Años antes, si bien 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 escritorios de varios tamaños, teléfonos móviles, iPads y Tabletas. No hay posibilidad de que pueda fijar su página web a un tamaño particular en esta situación diversa. Pero hay algunos tamaños estándar de la industria que se aplican a cada dispositivo. Encontrarás lentamente tu talla favorita, o tu cliente puede referirte a un sitio web para imitar las tallas.

En este caso, estamos trabajando en las siguientes dimensiones. No te preocupes por la altura, ya que va a cambiar con el tiempo. Cuanto más contenido agregue a su sitio web, más altura tendrá.

Recuerde, es común desplazarse hacia abajo de 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 según los estándares de la industria y no se ponga creativo con el desplazamiento horizontal.

Para la web, la resolución está limitada a 72. Hay imágenes y páginas de mayor resolución que se encuentran en iPads y algunas tabletas recientemente. Pero es una ocasión rara, y es mejor quedarse con 72 teniendo en cuenta 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 organizado cuidadosamente con cada elemento organizado de manera coherente entre sí. Y las pautas de diseño del sitio web lo ayudan a obtenerlo fácilmente.

Consigue tu maqueta listo.

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 le ayudará a diseñar los marcos. Completar los elementos de diseño con detalles, disposición de tipos y alineación tomará más tiempo que dibujar el diseño del sitio web.

Combinación de colores y otras opciones

Lo siguiente que debe hacer después de preparar su marco es elegir una combinación de colores. Pero, es mejor tener sus colores listos antes de comenzar a trabajar en el diseño.

Todo se reduce al mensaje de que, preparen sus armas antes de comenzar el diseño. Todo, incluidos los iconos, las imágenes y las opciones de color, debe estar listo antes de comenzar a trabajar. Organizar y planificar su trabajo ahorrará más tiempo y se centrará en el diseño sin obstrucciones intermedias.

Elegir colores puede ser la elección de un diseñador si la empresa es nueva y no tiene una identidad corporativa antes. Los clientes dan una idea de qué tonos quieren que tenga el logotipo o el fondo en algunos casos. En el caso de las empresas existentes donde es posible que necesite rediseñar un sitio web completo, es posible que tenga que elegir los mismos colores según las necesidades del cliente.

Hay 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 colores. No olvide elegir tres o cuatro combinaciones de colores diferentes, ya que no sabemos qué color preferirá el cliente. Una vez que el cliente finalice un esquema de colores, 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 maneras de llevar a cabo a sus diseñadores. No hay reglas de diseño de sitios web duras y rápidas 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 quieren construir los bloques y marcos completos y comenzar a trabajar en los detalles en la segunda etapa, seguida por el tipo y, finalmente, alineaciones y ajustes. A algunos les gusta terminar una parte de la página a la vez y llevarla a la siguiente parte. Estamos siguiendo el segundo estilo.

Terminaremos el sitio web en los siguientes pasos

• Encabezado & Pie de página
• Lo que hacemos
• Servicios
• Formulario
• Noticias
• Pie de página

Encabezado & Pie de página

La regla general para definir las dimensiones de su encabezado o banner se deja a su creatividad. De acuerdo con 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 va bien con marcos 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 a la pancarta 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 del 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 de encabezado & Banner. El nombre de la empresa, el mensaje de la marca, con enlaces y servicios, se agregan en el texto. También puede observar un botón transparente en el banner.

Texto plano o demasiado texto sin características especiales estropeará el aspecto 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 adecuada para el negocio. Hay millones de imágenes de stock disponibles en la web, y no tomará mucho tiempo 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 el banner.

Intente descargar algunas imágenes HD de los sitios de imágenes de stock gratuitos que se muestran a continuación

www..com.

Mezclar es un arte que debes dominar para producir hermosos banners. Aquí mezclé tres capas para lograr el efecto que se muestra en la imagen de arriba. Esto es lo que hice

• Coloque la capa de imagen en la parte superior del banner de color azul
• Coloque la superposición de degradado sobre la imagen
• Cambie la opacidad de la imagen 40 por ciento y cambie el modo de fusión a diferencia.
• Consulte la paleta capas de la imagen de arriba para comprender cómo se apilan las capas entre sí.

Así es como se verá su encabezado & Banner cuando acabamos de terminar de trabajar en él. Estamos trabajando en una parte a la vez, y es hora de pasar al siguiente nivel.

La alineación es 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 tus mejores amigos. La coherencia dentro del tipo y los objetos se puede obtener haciendo un buen uso del espacio en blanco y de 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 adecuados, lo que resalta una buena cantidad de espacio en blanco.

El siguiente paso de nuestro diseño es crear el campo de 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 encima de las dos capas para lograr un mejor aspecto. 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 con él. 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, utilice las opciones de enmascaramiento de capa.

Eche un vistazo a la paleta de capas de la imagen de arriba. La capa de color azul sólido se encuentra 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.

Utilicé el mapa de degradado en la parte superior de las dos capas. El modo de fusión se cambia a tono y la opacidad permanece igual.

La caja del formulario está lista, 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 asemeja al nivel dos de la página web, y utilicé alineadas las dos cajas similares a la parte superior. Mantener la coherencia en la alineación es una buena manera de usar el espacio en blanco.

Al llegar a la parte final de la página, es hora de mirar las dimensiones del pie de página una vez más. 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. El 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; hacemos uso de 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.

Por favor, eche un vistazo al diseño de toda la página a continuación una vez más.