Condicionalmente, el proceso de creación de un sitio web (proyecto web) se puede dividir en 3 etapas:
-Planificación
- Cómo limitar el área arrastrable a una región div particular en una página que usa Angularjs ngDragDrop
- ¿Qué herramientas en línea son las mejores para aprender a programar páginas web a partir de la nada?
- ¿Cuál es la diferencia entre gruñido y yeoman?
- ¿Por qué se usa Javascript principalmente para el desarrollo web?
- ¿Cuál es una explicación simple de la capa de abstracción en el desarrollo web?
Planificación:
Esta etapa se puede dividir en varias sub-etapas:
-Crear una idea
-Desarrollo de la estructura del proyecto.
-Proceso del diseño del proyecto.
Creando una idea:
En esta etapa, necesitamos determinar el tema del proyecto (sitio, servicio). Además, de acuerdo con el tema elegido, es necesario recopilar los materiales relevantes: texto, gráficos.
Desarrollo de la estructura del proyecto:
Cuando decidimos sobre el tema del proyecto, seleccionamos el material necesario, el siguiente paso sería el desarrollo de la estructura del proyecto. La estructura del proyecto implica las secciones del sitio bajo las cuales se formará el menú de navegación y se construirá el diseño del proyecto. En esta etapa, puede clasificar el material en temas y secciones.
Elaboración del diseño del proyecto:
Después de haber decidido la estructura del proyecto, podemos elaborar un diseño del proyecto (esquemáticamente).
Para dibujar el esquema, puede usar papel y lápiz, Photoshop, cualquier otro editor de gráficos (solía usar Adobe Fireworks). Es importante tener en cuenta que esta etapa no es dibujar el diseño de diseño terminado, sino solo un boceto hecho para comprender cómo el sitio alojará los principales bloques de información, gráficos y otros elementos de diseño.
Elementos básicos de la página:
A menudo, los elementos principales de la página son: que contiene la unidad (contenedor, contenedor), logotipo, navegación, contenido, pie de página (pie de página), espacio libre (de hecho, el espacio libre no es un elemento de diseño, sino el concepto, recordando que al compilar un diseño de página, nuestro proyecto no se verá como un montón de bloques).
Bloque de contenedores:
El rol del contenedor en la página puede ser realizado directamente por el elemento body o el div. El ancho del bloque contenedor puede ser de goma (fluido) y puede ser fijo (fijo).
Logotipo:
Componente de texto o gráfico del proyecto y distinguiéndolo de los demás. El logotipo se encuentra con mayor frecuencia en la esquina superior izquierda de la página o en el medio (según la idea, el diseño).
Navegación:
La barra de navegación principal contiene enlaces a las secciones principales del sitio. La barra de navegación a menudo se encuentra en la parte superior de la página (independientemente de si los elementos de navegación son verticales u horizontales).
Contenido:
El contenido es el componente principal de una página web. Asume un papel de liderazgo en el diseño de la página, por lo que ocupa más espacio, es compatible, además del texto, con gráficos.
Pie de página:
Este elemento se encuentra en la parte inferior de la página y generalmente contiene información sobre el titular de los derechos de autor, información de contacto y legal, enlaces a las secciones principales del sitio (a menudo duplica la navegación principal), enlaces a redes sociales, formulario de comentarios, etc. .
Diseño fijo:
Un diseño fijo implica que, independientemente de la resolución de la pantalla del usuario, su sitio siempre ocupará el mismo ancho.
Diseño de goma:
El diseño “de goma” significa que la página del sitio intentará ocupar todo el espacio disponible en la pantalla del usuario, ajustándose a la resolución.
En este contexto, vale la pena comprender conceptos tales como Diseño web receptivo (RWD) y diseño web adaptativo (Diseño web adaptativo, también conocido como AWD). El primer concepto se ajusta al concepto de “goma” y significa que cuando cambia el tamaño de la pantalla que su sitio se adapta, el segundo concepto implica que cuando diseña, determina los permisos principales (tamaños de pantalla) para los cuales su contenido se adaptará (adaptará) En ambos casos, debe desarrollar no uno, sino varios diseños, que corresponderán a diferentes resoluciones de pantalla. A menudo, se crean 3 diseños para la resolución del iPhone (teléfono Android), iPad (tableta Android) y escritorio.
¿Por qué un diseño “de goma” crea varios diseños y no usa uno?
Cuando se desarrolla una versión móvil del sitio, se intenta llevar el contenido principal a la vanguardia, por lo que a menudo se oculta el menú de navegación, se ocultan grandes pancartas y elementos decorativos, los bloques de contenido generalmente se colocan uno debajo del otro. En un diseño precompilado, puede determinar qué elementos dejamos en el móvil y qué ocultamos.
Rejilla modular:
Antes de elaborar el esquema del proyecto, también es necesario comprender el concepto de una red modular. La cuadrícula modular implica la separación de la página en columnas separadas verticalmente y la construcción de contenido, cuando se desarrolla el diseño del diseño, se encuentra en esta cuadrícula.
También vale la pena señalar que al desarrollar un diseño de página “de goma”, existe el concepto de ancho máximo. Esta declaración se basa en la conveniencia de percibir información. Si suponemos que nuestro sitio no tiene el valor máximo en ancho, entonces, en monitores grandes, la información se ampliará enormemente y no será conveniente leerla. Muy a menudo limitado a un ancho de 1280 píxeles.
Diseños de página web:
Entre toda la diversidad del diseño de una página web, se pueden distinguir cuatro más comunes:
-Navegación en la columna izquierda
-Navegación en la columna derecha
-Navegación en tres columnas.
-Navegación horizontal. En esta etapa, los sitios con este tipo de navegación constituyen la mayoría. La conveniencia de este enfoque se explica fácilmente por el hecho de que en este caso, tenemos más espacio para el contenido que conforma nuestro sitio.
Primero móvil:
Dadas las tendencias de los últimos años, este enfoque ocupa un lugar denso en el desarrollo y diseño de sitios. La tendencia es que casi el 60% de los usuarios de Internet usan dispositivos móviles para acceder a la red, por lo que la regla de buena forma es el desarrollo no solo de la versión de escritorio del sitio, sino también de la versión móvil. Con este enfoque, el desarrollo del diseño del sitio, el diseño y el diseño comienza con la versión móvil, y luego ya se están trabajando en los diseños para otros permisos: bloques, pancartas, elementos de diseño adicionales, etc.
Este enfoque tiene en cuenta casi todo el ciclo de desarrollo, por lo que volveremos a él.
Habiendo dominado todo lo anterior, puede pasar a la siguiente etapa: Diseño.
Diseño:
Después de crear un diseño de proyecto, puede ir directamente a crear un diseño de diseño. En esta etapa, comience con la definición del esquema de color del proyecto.
Una forma de determinar el color principal de un proyecto es crear un panel de ánimo. Para hacer esto, debe escribir todos los sinónimos asociados con el tema del proyecto, y luego cada tipo de sinónimo en la búsqueda de imágenes Google o Yandex. Según las imágenes encontradas, escriba los colores que se encuentran con mayor frecuencia en ellas (qué colores son más grandes). Los colores encontrados constituirán una percepción visual de nuestro proyecto y harán que el usuario tenga los sentimientos apropiados.
Para trabajar con el color seleccionado y crear una paleta de colores de nuestro sitio, puede usar las siguientes herramientas:
-Diseño de esquemas de color 3
Además de elegir un esquema de color, este servicio le permite ver un ejemplo de cómo se verán los colores seleccionados en el sitio
-Adobe Color CC
Este recurso, en contraste con Color Scheme Designer 3, le permite crear paletas también basadas en imágenes descargadas (que, por ejemplo, pueden aparecer en nuestra compilación del panel de ánimo). Además, este servicio tiene un gran archivo de paletas de otros usuarios.
-COLORLOVERS
Una vasta comunidad donde puedes recoger una variedad de paletas.
Es importante tener en cuenta que al elegir colores para una paleta, siempre vale la pena elegir al menos 2 colores contrastantes. Lograr el contraste adecuado entre colores es un requisito previo para que puedas obtener un buen diseño interactivo.
Al trabajar en el diseño de las páginas principal e interna, vale la pena recordar algunos principios básicos.
Elementos del llamado a la acción:
El concepto de llamado a la acción se refiere a elementos interactivos del sitio: botones, pancartas, etc. Estos elementos están diseñados de tal manera que el usuario deba hacer clic necesariamente en ellos. Por ejemplo, puede ser un botón con un llamado a la acción (Push, Buy, Save), un banner brillante con una oferta tentadora, una imagen vívida, etc.
Este concepto encaja bien con el principio de AIDA (Acción de interés de deseo de atracción).
AIDA:
Este concepto se usa con más frecuencia cuando se diseñan las páginas principales, páginas de recursos compartidos, etc., donde debe impulsar al usuario a una acción particular: suscripción, compra, etc.
-Para llamar la atención
-Interesar
-Un deseo
-Acto
Por lo tanto, el principio de construir un diseño basado en este concepto queda claro: por ejemplo, una imagen brillante, un banner debe atraer la atención del usuario, el mensaje que acompaña al texto debe causar interés y deseo, y la clave final debería ser, por ejemplo, un botón con un llamado a la acción.
Pero este principio no funciona por sí solo sin otros: un esquema de vista de página (la forma más natural de movimiento ocular en la página), guías visuales.
Esquema de diseño de página:
Muy a menudo hay un esquema Z para ver la página. En consecuencia, los elementos de la página generalmente se organizan de la siguiente manera: el logotipo en la parte superior izquierda, el menú en la parte superior derecha, los bloques de información, las imágenes en la parte inferior izquierda, el botón de llamado a la acción en la parte inferior derecha.
Guías visuales:
Las guías visuales se denominan elementos decorativos de la página, que redirigen la vista del usuario de ciertos elementos de diseño, formas, botones, etc. Como guías visuales, puede aparecer la flecha, la dirección de la vista de la imagen por parte de la persona, la dirección del índice. dedo, en general, todo lo que luego puede indicar en una dirección u otra.
Marcos:
También vale la pena señalar que a veces, al diseñar un diseño de página, usan los marcos Bootstrap, Foundation, Material Design Lite, que, además de elementos de diseño listos para usar (botones, formularios de entrada, etc.), ofrecen su cuadrícula modular, Fragmentos de CSS (parte del código, marcado, que se puede usar repetidamente) para insertar elementos en la página (los mismos botones, elementos de formulario, etc.) y clases de marcado, así como scripts JS para los elementos interactivos correspondientes.
El uso de estas bibliotecas puede ahorrar una cantidad significativa de tiempo al diseñar un proyecto (diseño, diseño), aunque al mismo tiempo puede hacer que su sitio se vea como otro si usa los elementos de diseño de los marcos tal como están. En función de cada marco, puede encontrar una gran cantidad de temas y páginas de pago y gratuitos, así como desarrollar los suyos propios.
Si no logra desarrollar un sitio web por su cuenta, le recomiendo que se ponga en contacto con la empresa Genico Desarrollo de software web y móvil | Genico LLC. Crearon un sitio web para mi negocio. La empresa Genico – profesionales en el mercado de TI y pueden realizar cualquier idea.
