Cómo crear un sitio web para un nuevo producto (y cómo lo hicimos) |

Si todavía no tiene un resumen creativo, comience aquí. Un resumen creativo describe exactamente cómo planea hablar sobre su producto o compañía. Define el tono de voz de su marca, su paleta de colores, su declaración de valor y mucho más. Su resumen creativo define cómo se comunicará su sitio web con los clientes.

Es posible que ya haya redactado un resumen creativo si ha pasado por el proceso de desarrollo del logotipo. Si es así, puede reutilizarlo para su sitio web. Si aún no ha desarrollado un resumen creativo, ahora es el momento de crear uno.

Afortunadamente, ya he escrito un artículo detallado que le enseña cómo hacerlo, que incluye ejemplos del brief creativo de Outpost, por lo que puedes ver cómo construimos el nuestro. Por lo tanto, si necesita trabajar en su resumen creativo, consulte mi artículo sobre cómo desarrollamos nuestro logotipo y su resumen creativo y luego regrese aquí cuando esté listo.

Cree un mapa del sitio

Con su resumen creativo en mano, comenzarás a trabajar en tu mapa del sitio. Un mapa del sitio es simplemente un esquema que enumera todas las páginas (incluidos sus propósitos y objetivos) que planea incluir en su sitio.

Aquí está el mapa del sitio que desarrollamos para Outpost:

1. 1. Inicio : Descripción del producto y una "llamada a la acción" para inscribirse en una prueba gratuita. Enlaces secundarios a otras páginas que describen características.
   2. Descripción general de funciones : descripción general de todas las características con enlaces a páginas de características detalladas.
      1. Detalles de funciones para la característica A: detalles de la función A.
      2. Detalles de funciones para Característica B: Detalles de la Función B.
      3. Repita para todas las funciones.

• Precios: detalles de los planes de precios y enlaces para registrarse para una prueba gratuita.
• Clientes: Perfiles de clientes exitosos.
• Sobre nosotros: Resumen de quiénes somos, nuestra declaración de misión y nuestra historia.
• Contáctenos: Información de contacto, horas, ubicación.
• Empleos: Una lista de nuestras vacantes actuales.
• Declaración de privacidad: Política de privacidad de Outpost.
• Blog: Página de inicio del blog que enumera las publicaciones recientes de blogs.
• Publicación del blog: Habrá múltiples publicaciones en el blog. Esta página será la plantilla para ellos.
• Centro de ayuda: Nuestro centro de ayuda contará con la tecnología de Zendesk.

Por supuesto, su sitio probablemente sea muy diferente al sitio web de Outpost. Si eres un restaurante, por ejemplo, probablemente tengas una página o dos para menús y una página para reservas. Si está construyendo una tienda en línea, probablemente tenga muchas páginas de productos diferentes.

Su sitio web documenta, lo mejor que pueda, lo que cree que su sitio incluirá. Esta pequeña planificación hará que el resto de la planificación y el desarrollo del sitio sean mucho más fáciles, por lo que vale la pena invertir en esta etapa inicial.

Escriba su copia antes del diseño

Creerá que no hice obtener la orden aquí. ¿No debería diseñar su sitio web antes de pensar qué palabras va a poner en la página?

De hecho, el mejor enfoque es hacer las cosas "hacia atrás" y pensar primero en la copia de su sitio web y luego diseñar alrededor esa copia. ¿Por qué? Porque lo que desea comunicar a sus clientes es mucho más importante que el diseño final real de su sitio. Por supuesto, el diseño importa y desea tener un sitio que se vea bien, pero si no puede comunicar sus mensajes clave a sus usuarios, un buen diseño no compensará la diferencia.

Primero escriba su copia también lo ayuda a usted y a los diseñadores potenciales a comprender lo que cada página intenta comunicar. Esto se traduce en un mejor diseño de diseño que refuerza su mensaje. Incluso si va a construir su sitio usted mismo con una herramienta como Squarespace, saber lo que cada página debe decir antes de elegir un diseño ahorrará mucho tiempo.

Cuando llegue el momento de su diseño, puede Necesita refinar su copia para asegurarse de que las cosas se ajustan correctamente, pero eso será más fácil que tratar de copiar para un diseño que no fue construido para su mensaje.

Para su página de inicio, es probable que desee un titular que describe exactamente lo que hace: su propuesta de valor clave para sus clientes. Seguirá una breve descripción ampliada de lo que hace su empresa.

Aquí está el título y la descripción ampliada de Outpost, el producto que estamos construyendo:

Agilice su correo electrónico compartido

Realice un seguimiento, colabore fácilmente, y responda a los mensajes enviados a direcciones de correo electrónico genéricas, como support @ o info @.

A partir de ahí, la copia que incluirá en su página de inicio dependerá del tipo de empresa que sea, de quiénes sean sus clientes son, y lo que necesita para comunicarse.

Para Outpost, tenemos que comunicar las características y beneficios clave de nuestro producto y alentar a los clientes potenciales a obtener más información. También queremos hablar sobre nuestro equipo de servicio al cliente y lo buenos que son.

Pero esta puede no ser la configuración correcta para su página de inicio. Si es un restaurante, tal vez quiera tener enlaces a sus menús o información sobre cómo obtener una reserva. Cada compañía es diferente, así que averigüe lo que necesita decir y luego anótelo.

Sin embargo, no se preocupe por comenzar con una página en blanco. En su lugar, elabore una lista de sus sitios web favoritos en su industria y piense qué le gusta y qué no le gusta de cada sitio. ¿Qué tipo de navegación usan? ¿Qué páginas incluyen? ¿Qué tipo de imágenes usan? No es necesario reinventar la rueda, y usar un sitio favorito como punto de partida es una excelente forma de comenzar.

Un consejo final: Menos suele ser más. No se sienta tentado a escribir párrafos interminables de copia para su sitio web (¡a menos que eso sea lo que esperan sus clientes!). Si prestas atención a la forma en que usas los sitios web, verás que a menudo revisas el texto sin leer cada palabra. Debido a que así es como la mayoría de las personas lee en línea, hojeando en lugar de leer cada palabra, mantenga su copia breve y al grano.

Desarrollar un wireframe

Un wireframe es un diseño aproximado de su sitio web. No es realmente un diseño, exactamente. Es un documento que muestra aproximadamente dónde irán las cosas en la página, sin preocuparse por el color u otros gráficos.

Si está trabajando con un diseñador para construir su sitio web, producirán una estructura para usted como parte de la proceso de diseño. Si está construyendo su sitio web por su cuenta, utilizando un servicio como Squarespace o Shopify, puede construir fácilmente un wireframe por su cuenta.

No se deje intimidar por este paso. No necesita herramientas especiales para construir un wireframe. Una libreta de papel y un bolígrafo son suficientes para esbozar cada página de su sitio. Recuerde, no está "diseñando" y una estructura de alambre no tiene que ser bonita. Solo necesita comunicar qué sucede en una página.

Si necesita inspiración, consulte otros sitios que le gusten y observe cómo estructuran la información en cada página. Está muy bien tomar prestados diseños de otros sitios y encontrar inspiración para su propio sitio.

Si usar lápiz y papel no es lo suyo, puede usar PowerPoint o Keynote para crear wireframes. También hay herramientas dedicadas de wireframing como Balsamiq que facilitan el proceso.

He incluido el wireframe de la página de inicio de Outpost a continuación para que pueda hacerse una idea de cómo es un wireframe. También puede echar un vistazo a la copia que creamos en el paso anterior y un boceto de una idea para un elemento gráfico que queremos que cree un diseñador.