Cómo crear una página de fans en facebook. Un plan paso a paso para crear y optimizar una página de fans en Facebook. El principio fundamental de llenar una página de fans.

¿Sientes que te has topado con un muro y no puedes avanzar en lo que respecta al diseño o la estructura de tu sitio web? No estás solo, a todos nos pasa esto de vez en cuando.

Con todas las ideas flotando en la web, puede resultar difícil determinar definitivamente qué aspectos son vitales para su sitio. Pero sin saber qué debe contener su sitio web, puede terminar creando algo que sea inútil y no represente adecuadamente a su empresa o no cumplir tus objetivos.

Si el diseño de la página no está bien pensado, la mayoría de los usuarios acabarán recurriendo a la competencia. Y viceversa, si el sitio tiene conjunto necesario cualidades y funciones, puedes crear una herramienta increíble que te ayudará a vender tu producto de manera efectiva.

Desde espacios en blanco entre bloques de contenido y diseño visual hasta llamadas a la acción claras y páginas Acerca de nosotros, hoy cubriremos lo que debe y no debe incluir en su oferta.

Espacio en blanco significa espacios entre elementos graficos, columnas, imágenes, texto, campos y otros bloques de contenido. Esta es una de las herramientas de diseño más importantes porque estos espacios determinan la estructura de la página y el orden de lectura.

El espacio en blanco es un área vacía en una página. Puede estar inundado color de fondo o una textura simple, o tal vez simplemente blanca.

Sitio web de la empresa Teamwork, creador. software para servicios Atención al cliente, representa un muy buen ejemplo uso efectivo espacios vacíos:

Los espacios vacíos se utilizan activamente en el sitio.

El encabezado del menú está claramente separado de los bloques de contenido. Las imágenes que acompañan al contenido en ambas caras de la página están separadas del texto a una distancia suficiente. Esto le permite comprender con qué partes del texto se relacionan, lo que facilita su lectura.

Cuando los espacios en blanco se utilizan correctamente, los usuarios pueden hojear fácilmente la página y captar la información en el orden deseado.

La navegación de su sitio es como un mapa del área: les dice a los usuarios adónde conducen las páginas y dónde pueden encontrar cierta información.

¿Cómo pueden los clientes potenciales conocer su producto si su mapa es inexacto? ¿Cómo sabrán dónde encontrar lo que necesitan?

Sin embargo, su navegación no debería ser complicada: debería ser fácil de usar. Trate de no abrumarlo y asegúrese de que la información del sitio esté organizada para que los usuarios puedan navegar por él fácilmente.

La navegación del sitio de la empresa de plataformas de marketing de vídeo Wistia está perfectamente organizada, con bloques ordenados que incluyen las páginas buscadas con más frecuencia ocultas bajo etiquetas de temas específicos. Estas páginas, así como varias otras, se encuentran bajo la “navegación de hamburguesa” (icono de tres líneas a la izquierda), que permite a los usuarios tener acceso a todas las páginas a la vez si es necesario:

Navegación organizada de forma minimalista con varios bloques principales y la posibilidad de acceder a todas las páginas a través de Hamburger Man.

Una página "acerca de nosotros" es uno de los cinco elementos imprescindibles para cualquier sitio web. Solo tienes unos momentos para conquistar a los usuarios e incluir una sección como esta es una de las mejores formas de hacerlo.

Esto es lo que dice Ramona Sukhraj, gerente de contenido de IMPACT, una empresa de soluciones de inbound marketing: “No existe una fórmula exacta que debas seguir. Sólo necesita hacer que su página Acerca de nosotros sea interesante, informativa y personal. Tienes que darles a los clientes potenciales una razón para enamorarse de tu marca”.

La página "Acerca de nosotros" del fabricante de software Orchid Software contiene un gran número de una variedad de imágenes atractivas, que en parte muestran relaciones amistosas dentro de la empresa, lo que crea en el visitante una sensación de implicación en lo que de otro modo podría parecer aburrido y poco interesante.

El uso de secciones que explican la filosofía y la cultura de la empresa agrega transparencia a la empresa y también permite que los clientes potenciales sepan que la gerencia se preocupa por su equipo:

Incluir fotografías del personal en la página Acerca de nosotros, además de resaltar la filosofía y la cultura de la empresa, crea una sensación de apertura y sinceridad de intenciones.

Los llamados a la acción (CTA) se crean para alentar a los visitantes a realizar una acción, como descargar versión electrónica libros, suscribirse a un seminario web, participar en un evento, etc.

Las llamadas a la acción se pueden colocar en cualquier lugar de su sitio (por ejemplo, en la sección de descargas o contenido, o al final de un artículo de blog). Sin embargo, debes asegurarte de que su significado y ubicación coincidan con el contenido de la página; de lo contrario, los usuarios no querrán hacer clic en ellos.

Puedes usar tipos complejos diseños que contienen una imagen y tienen una forma no estándar, o recurrir a simples llamadas que no tienen más de una línea de texto y son un botón. A continuación se muestran las CTA ubicadas al final del artículo del blog y en pagina de inicio sitio web:

Ejemplos de botones CTA en el sitio web IMPACT

La parte visual del diseño puede ser un poderoso elemento estimulante en cualquier sitio web si llama la atención de inmediato. Todo diseñador conoce el poder de la influencia. Imágenes visuales sobre tu marca y cómo fotografías, vídeos o imágenes pueden visualizar tu producto y los beneficios derivados de su uso.

Para un sitio de alquiler de viviendas como Homeaway, selección correcta Las imágenes deciden mucho. El vídeo de fondo de la empresa en el encabezado de su página de inicio internacional ayuda a establecer el tono para unas vacaciones perfectas. Las fotografías a continuación de propiedades disponibles para alquiler crean el mismo efecto. Muestran toda la diversidad. tipos posibles Viviendas que los usuarios pueden encontrar en alquiler:

Salvapantallas de vídeo activado pagina de inicio El recurso Homeaway crea el ambiente para las vacaciones que a todos les gustaría tener

Los vídeos del sitio mencionado constan de muchas imágenes e historias atractivas, pero debes tener cuidado al utilizar dichos medios. Estos salvapantallas pueden tardar mucho en cargarse y, a menudo, distraen al usuario del contenido. Así que antes de pegar vídeo de fondo en la estructura de la página, asegúrese de que esto es lo que se convertirá solución ideal para diseñar su sitio web.

Una propuesta de venta única (o propuesta de valor) es el primer elemento que se ve cliente potencial cuando visitan tu página. A menudo determina si un usuario navegará por su sitio o hará clic en el botón Atrás y volverá a la búsqueda.

El PVU debe explicar cómo su producto resuelve el problema del cliente, mejora su situación, qué beneficios aporta y por qué debería elegirlo a usted sobre un competidor.

Stripe ha colocado su PVU de tal manera que los usuarios que visitan el sitio por primera vez comprendan inmediatamente lo que hace la empresa:

La inscripción en el sitio web: “Servicio en línea y pagos móviles, creado específicamente para desarrolladores de sitios web"

¿Cómo puedes demostrar que tu producto o servicio realmente funciona? La mejor manera— incluir en la página de destino reseñas de clientes satisfechos que expliquen cómo les ayudó el servicio.

Al crear un diseño para su página de testimonios, no olvide incluir la posibilidad de cargar una foto del cliente; esto ayudará a personalizar la recomendación y agregar credibilidad a la recomendación.

Invision, una empresa que proporciona una plataforma de diseño para empresas, ha ido más allá. Agregaron logotipos de empresas antes de las reseñas. Este puede ser un movimiento táctico exitoso para atraer la atención hacia las recomendaciones, pero solo si la empresa que recomienda es bien conocida y tiene buena reputación:

Por eso, hemos enumerado los elementos que tienen un efecto positivo en la conversión de la página de destino. Sin embargo, además de ellas, existen tecnologías cuyo uso es mejor evitar, ya que pueden afectar negativamente la evaluación de su PVU e incluso causar irritación entre los usuarios.

Lo recuerdes o no, en algún momento muchos sitios web se crearon usando Adobe Flash. Se utilizó esta plataforma porque era fácil de usar y permitía agregar varias animaciones. Pero la era de Adobe Flash se ha hundido en el olvido.

Los sitios creados de esta manera se cargan lentamente y están mal optimizados para los motores de búsqueda. Además, no trabajan para dispositivos móviles(en particular de Manzana) y normalmente tienen un diseño que no responde.

Flash también requiere que el usuario descargue e instale software adicional, y lo último que desea es complicar la experiencia de navegación.

Intenta encontrar más métodos modernos, si deseas incluir animaciones y transiciones para no ralentizar tu sitio usando Flash.

Bancos de fotos gratis

Todo diseñador ha recurrido al menos una vez en la vida a bancos de fotografías gratuitos. Allí podrás encontrar fotografías que parecen bastante profesionales e interesantes, así como trabajos nuevos que no se han visto anteriormente en otros sitios.

Aún así, es mejor no utilizar bancos de fotografías como fuente de imágenes. Como opción, realiza tu propia sesión de fotos para lucir brillante, fotos originales su equipo u oficina.

Las fotografías de los empleados y el entorno laboral de su empresa pueden ayudar a ofrecer una imagen más sincera de su entorno interno y su cultura. Será más fácil para los usuarios confiar en tu marca si ven caras reales, detrás de los productos o servicios presentados en su sitio.

Principio general: no te cases.
No te cases. No dejes pasar el matrimonio.
Toyota.

Rara vez asumimos proyectos con diseños ya implementados, pero esto sucede. Cuando los diseños se crean dentro del estudio, en cualquier etapa problemática del diseño, el desarrollador puede aclarar con el director del proyecto o con el propio diseñador qué se quiso decir y cómo debe verse. Pero en una situación en la que el cliente ya le ha dado dinero a alguien por los diseños y luego acude a usted para desarrollarlo, esto no funcionará: la comunicación entre el diseñador y el desarrollador se vuelve imposible y no hay nadie que corrija los defectos en los diseños. . En este artículo aprenderá dónde se equivocan los aspirantes a diseñadores y qué vale la pena comprobar antes de enviar diseños para su diseño.

"Casi" en la parrilla

La cuadrícula está diseñada para simplificar el diseño y determinar la ubicación. elementos clave. En algunos casos, los diseñadores se desvían deliberadamente de la cuadrícula de 12 columnas para crear diseños extraordinarios.

Pero si, al crear el diseño, aún se adhirió a la cuadrícula, asegúrese de que esto sea cierto. Los maquetadores se quejan constantemente de que en un proyecto el diseño puede variar mucho de una página a otra: a veces aparecen bloques idénticos a la izquierda y otras a la derecha, iconos diferentes tamaños, y los botones no son similares entre sí.

Cuando los elementos se eliminan de la cuadrícula, el proceso de diseño se retrasa: desperdicio Tiempo extra para aclarar la posición de los bloques o realizar ediciones si el diseño de la página no coincide visualmente con el diseño. También hay problemas con la capacidad de respuesta de la página, ya que no está claro cómo deberían comportarse los objetos que quedan fuera de la cuadrícula en dispositivos más pequeños.

Sergey, desarrollador del estudio Sibiriks:
"Probablemente el más el problema principal es que no todos los diseñadores lo saben conceptos básicos de html y css, razón por la cual los diseños se realizan sin tener en cuenta el diseño. Por ejemplo, sucede a menudo que los bloques de un sitio web adaptable se reorganizan de tal manera que es imposible prescindir de duplicar el contenido para las versiones móvil y de escritorio, lo que ralentiza el trabajo de diseño”.

Vladimir, director del estudio:
“Hay un millón de casos en los que un programador dice “esto es imposible” y luego lo toma y lo hace según sea necesario. Entonces es posible. Y la mayoría de las restricciones que son inconvenientes para un programador, pero interesantes desde el punto de vista del diseño, son artificiales. Es imposible trazar un límite claro. Sólo funcionan las discusiones iterativas y los intentos de implementar planes. Pruebe, mire, discuta, haga, experimente. De lo contrario, todo se deslizará hacia patrones aburridos. Para algunos proyectos esto está bien. Pero para algunos, no. ¿Trabaja en líneas de montaje o en festivales? Escribimos sobre esto con más detalle en el control deslizante de creatividad”.

Copiar y pegar capas

Es conveniente duplicar capas en Photoshop: las copié junto con el estilo y todas las configuraciones y las arrastré a Lugar correcto. En un impulso creativo, algunos diseñadores no se molestan en dar nombres adecuados a las capas y ordenarlas entre sí, y luego ya no pueden entender a qué bloque pertenece cada capa y dónde buscarla en el diseño.

Al transferir para diseño, asegúrese de que sus capas tengan nombres inequívocos y se distribuyan en carpetas según la lógica del diseño. Y no olvide eliminar las innecesarias o al menos pegar las capas con efectos (por qué no siempre puede hacer esto, a continuación).

Sangrías poco claras

En un diseño ideal, todas las sangrías y tamaños de bloques deben estar unificados. Hay un píxel más aquí, uno menos aquí, y luego el diseñador de diseño se sienta y elige lo que es correcto. Puede que no tenga demasiado impacto apariencia páginas, aunque los clientes son diferentes: para algunos, cada píxel extra llama la atención. O tal vez el evaluador aplique el diseño terminado al diseño original usando el complemento Pixel Perfect y escriba una lista de un millón de errores, considerando tales inconsistencias como un error. Asegúrese de que el relleno del área de contenido del encabezado y pie de página sea el mismo en todas sus páginas.

Los objetos también están plagados de peligros ocultos: a veces, al crear formularios en Photoshop, incluso si el diseñador utilizó una cuadrícula, se producen los siguientes errores:

Es poco probable que el diseñador tenga en cuenta estas sutilezas y, muy probablemente, recortará el tamaño del objeto para que encaje exactamente en la cuadrícula. Por lo tanto, la regla es que TODOS los objetos deben tener tamaños enteros; de lo contrario, el resultado puede ser muy diferente del diseño original.

Colores a ojo

En Photoshop hay herramienta útil- "gotero", y a los diseñadores les encanta usarlo; empújalo y no tendrás que recordar el número de color. Pero si tocas el borde del elemento, el tono del fondo puede distorsionar el color. Otro peligro es que si el radio del cuentagotas es superior a 1 píxel, Photoshop mostrará el valor medio entre colores adyacentes.

Andrey, desarrollador

“Es especialmente molesto cuando el diseñador determina los colores “a simple vista” y luego estás sentado con un conjunto de grises de diferentes tamaños y no sabes cuál usar. Esto se debe al hecho de que no existe un mapa de colores banal para el proyecto en el que el propio diseñador pueda confiar cuando trabaje en paginas internas y diseñador de maquetación."

Una regla tácita no recomienda el uso del número negro #000000, ya que contrasta demasiado con el fondo blanco. Mira la diferencia:

Otro truco de diseño que irrita a los diseñadores de diseño es que para aclarar el color (incluido el texto), el diseñador simplemente aumenta la transparencia de la capa. El maquetador tendrá que utilizar una pipeta y, nuevamente, existe una alta probabilidad de error (especialmente en los casos con rellenos degradados en los elementos).

Elementos rasterizados

Texto

Si un diseñador antes de la web pasaba algún tiempo haciendo diseños para imprimir en una imprenta, es posible que tenga la costumbre de rasterizar los textos, pero para un diseñador de diseño esto se convierte en un problema grave: dicho texto no se puede copiar, solo se puede volver a escribir. manualmente. Y este es el menor de los problemas: ¿de dónde obtiene el maquetador el estilo, el tamaño y el color del texto rasterizado? Ésa es la cuestión.

Sombras y degradados

Durante el diseño, es más conveniente y rápido para el desarrollador observar los parámetros de la sombra o el degradado que pinchar con un gotero en diferentes áreas de esta zona cuando la capa está rasterizada. Esto acelera el diseño y afecta al resultado: las posibilidades de cometer errores con transición de color menos.

Si la imagen está superpuesta fondo oscuro(por ejemplo, un cursor), no se puede pegar a la imagen en sí; debe ser una capa translúcida o degradada separada para que pueda ver sus parámetros.

Efectos de superposición

Al superponer, se tiene en cuenta el contenido de las capas inferiores y no es fácil transmitir tales efectos durante el diseño, razón por la cual a los diseñadores de diseño no les gustan mucho. Y por una buena razón: no todas las versiones de navegador están preparadas para mostrarlos de la forma prevista por el diseñador.

Mezclar efectos en diferentes navegadores

Problemas de fuente

Tamaños fraccionarios

Esto suele ocurrir por accidente si, por ejemplo, la herramienta de transformación se aplica a todo el bloque: la fuente aumenta/disminuye en proporción a la imagen. El problema es que los navegadores no tienen en cuenta los valores fraccionarios y simplemente los redondean al más cercano.

Muchas fuentes

Es recomendable utilizar no más de 3 estilos para todo el proyecto; pueden ser fuentes del mismo tipo de letra (Claro, Regular y Negrita) o diferentes. Esto no es una limitación estricta, todo depende de los objetivos del proyecto, pero tiene un cierto significado: cuantas menos variaciones de fuente, mayor será la concentración del lector en el texto. Se considera una norma transmitir, junto con la maquetación, los tipos de letra que allí se utilizaban, o al menos proporcionar enlaces a Fuentes de Google.

Andrey, desarrollador:
“Ahora la mayoría de los navegadores se han alejado de las fuentes en formatos TTF y OTF, y si el desarrollador las usa a la antigua usanza, no se mostrarán correctamente en todas partes. Nosotros en el estudio cambiamos al formato WOFF o WOFF2 hace mucho tiempo para que no hubiera problemas. Puede convertir la fuente a este o ".

Usar fuentes personalizadas

Se deben verificar las fuentes no estándar y sus estilos para verificar la disponibilidad de la versión web. El hecho es que dichas fuentes afectan la velocidad de carga de la página; para mostrarlas, el navegador primero debe descargarlas, y esto llevará algún tiempo. Buen peso fuente no estándar no debe exceder 1 megabyte. Y es mejor si solo hay una fuente de este tipo en la página. Bueno, no olvides que las fuentes cuestan dinero. A veces, los grandes. Hemos tenido casos en los que la fuente se modificó especialmente para un proyecto específico; eso es todo un desafío.

tipografía torpe

A menudo sucede que Espaciado entre líneas y las sangrías entre párrafos no coinciden dentro de los bloques del diseño y difieren de una página a otra; asegúrese de que sean iguales. No separe los títulos de los párrafos en bloques de texto Para aumentar manualmente el espacio entre ellos, utilice la configuración de interlineado y párrafo.

Evgeniy, desarrollador:
“Si es posible, no debes usar efectos complejos en estándar paginas de texto, si se supone que el propio cliente podrá cambiarlos desde el panel de administración. Lo más probable es que pueda "envolver" dichos elementos en divs. A veces esto se puede solucionar con fragmentos u otras técnicas, pero sigue provocando dificultades a la hora de llenar de contenido”.

Definitivamente vale la pena mostrar en el diseño el diseño de un párrafo, párrafo, títulos de los niveles 1-4 (h1, h2, h3, h4), listas con viñetas y numeradas. Es incluso mejor recopilar todo esto en un documento separado: una guía o un kit de interfaz de usuario. Aquí puede agregar el comportamiento de los enlaces (activos, al pasar el mouse, visitados).

Kit de interfaz de usuario para el proyecto de la Torre Spasskaya

Animación incomprensible

Elementos como botones o listas desplegables tienen múltiples estados, pero a menudo los diseñadores solo dibujan uno de ellos. Gracias a esto, por ejemplo, se obtienen ventanas emergentes desordenadas, que el propio maquetador, a falta de una muestra, hizo él mismo.

Compruebe que los objetos involucrados en animaciones e interacciones estén en capas. Por ejemplo: la vista al pasar el cursor sobre un objeto es una capa, la vista al hacer clic en ella es otra, la vista estática es la tercera. Las mismas reglas se aplican a los banners.

Es recomendable marcar capas con animaciones e interacciones con colores y proporcionarles comentarios. También es muy recomendable escribir en los comentarios exactamente cómo debería funcionar esto y dar ejemplos.

Evgeniy, director de arte:
“Photoshop es Photoshop, pero ahora han aparecido tantas herramientas progresivas, dentro de las cuales se crean inmediatamente las líneas de código necesarias para cada elemento; no es difícil para un diseñador de diseño convertir un diseño en una página de diseño. En general, por supuesto, todo depende del propio diseñador de diseño: si él está bien, entonces el resultado será bueno, sin importar en qué editor se haya dibujado :)"

Iconos en PNG

En un proyecto, dependiendo de las tareas, los iconos son diferentes: a veces el diseñador crea conjunto único Con sus propias manos, a veces le resulta más fácil y rápido encontrar en algún lugar el que necesita entre un millón de opciones y modificarlo si es necesario.

Pero sucede que los diseñadores usan íconos en formato PNG- en él, al escalar en pantallas de alta resolución (y ahora incluso en los teléfonos móviles la densidad de píxeles es una locura), los bordes de la imagen se vuelven borrosos. De ahí la regla: todos los iconos deben estar en formato SVG- De esta manera quedan claros, sin importar su tamaño.

Algunos diseñadores prefieren que los iconos se recopilen en un solo lugar: en carpeta separada- y para que sus nombres sean idénticos a las capas del diseño. Otros prefieren tener las imágenes SVG incrustadas en el archivo principal, ya que es mucho más fácil y rápido cortar el archivo SVG del diseño que buscar el icono deseado en otra carpeta.

Lista de Verificación

En un apuro creativo, es difícil asegurarse de que todo se haga correctamente. Allí la capa se copió y permaneció sin nombre, allí el objeto se salió ligeramente del borde de la columna, aquí la fuente fue accidentalmente "grasosa" por la configuración incorporada de Photoshop en lugar de seleccionar el estilo deseado, ¿quién no? pasar con esto? ¡Y con el que tiene nuestro checklist!

Lista de verificación para preparar un diseño de Photoshop para transferirlo al diseño

1. Si el diseñador utilizó una cuadrícula, todos los bloques del diseño están ubicados estrictamente a lo largo de ella.
2. Todos los objetos del diseño tienen tamaños enteros.
3. Los elementos repetidos en las páginas son siempre los MISMOS.
4. Todas las capas se agrupan en carpetas y se distribuyen según la lógica del diseño. Se eliminaron los innecesarios y se combinaron los similares.
5. Las sangrías de los elementos están unificadas.
6. Los colores del diseño coinciden con los colores principales del proyecto.
7. Texto como texto (no rasterizado).
8. Los efectos de superposición, las sombras y los degradados no se rasterizan.
9. Usar efectos de superposición tiene sentido.
10. Las fuentes tienen tamaños no fraccionarios.
11. Las fuentes utilizadas en el proyecto se recopilan en una carpeta separada.
12. Se ha comprobado la disponibilidad de fuentes no estándar y sus estilos en la versión web. El peso de una fuente no estándar no supera 1 MB.
13. Se unifica el interlineado y la sangría en el texto.
14. Todos los iconos están en formato SVG y están recopilados en un solo lugar. Los nombres de los iconos son iguales y claros, coinciden con los nombres de capas idénticas en el diseño.
15. Para todos elementos activos Hay capas con el desplazamiento.
16. Los objetos involucrados en animaciones/interacciones están en capas. Para los banners es lo mismo.
17. Las animaciones y las interacciones interactivas van acompañadas de comentarios y ejemplos de cómo debería verse.
18. Se ha creado una guía para el diseño con una paleta de colores para el proyecto y estilos de texto.

Etiquetas: Agregar etiquetas

Monitor 27 pulgadas comprar en el sitio web klavakomp.ru