Saltar al contenido principal
LibreTexts Español

2.5: Capítulo 10 Branding y Diseño

  • Page ID
    64307
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)

    alt

    Branding y Diseño

    COMO REGLA GENERAL, NO SE DEFINE EN LA MARCA Y EL DISEÑO El lado del marketing de las cosas determinará en última instancia su éxito en la atracción de clientes. Ese es el primer obstáculo.

    Sin embargo, la peor razón para perder esas adquisiciones duramente ganadas es construir un producto que sea difícil de usar o simplemente no funcione. Y si está externalizando el desarrollo, puede recorrer rápidamente un camino de interminables creep y rediseños de características.

    Es mejor si puedes pensar en el conjunto básico de características, páginas y pantallas para que tú o tu recurso de desarrollo sepan exactamente qué se necesita construir, dónde irán los elementos y qué debe experimentar el usuario al registrarse en su producto.

    Eso es lo que quiero decir con branding y diseño. Estoy mucho menos preocupado por lo hermoso que es tu producto que por lo bien que funciona. Parte de una buena función es una marca clara y navegación, así como un propósito obvio para todas y cada una de las páginas de su aplicación.

    Debe considerar los casos tanto para los usuarios invitados como para los usuarios que han iniciado sesión. Tener un proceso lógico para la incorporación, y un conjunto claro de páginas para que los usuarios administren la mayor cantidad posible de sus cuentas sin necesidad de contactarlo.

    Estos son los pasos que deberá seguir para convertir rápidamente una o dos de sus ideas en un boceto ligero de su producto mínimo viable.

    Comience por burlarse de su aplicación con esquemas de elementos de interfaz de usuario

    Una maqueta es un boceto incoloro de tu aplicación. Es una excelente manera de compartir la visión que tuviste en el paso Idea Discovery con tus amigos, clientes potenciales amigables y desarrolladores de contratos.

    Algunas herramientas de maqueta populares son Balsamiq y Ninjamock, las cuales dan un aspecto “incompleto” a sus elementos burlados. El punto es no quedar atrapado sobre si una caja debe tener bordes redondos o cuadrados. Eso no importa ahora mismo así que intencionalmente hacen que sus elementos sean rudos.

    Este ejercicio te permitirá construir páginas rápidamente y ayudarte a pensar en la ejecución de las características más críticas de tu aplicación. Hacer esto ahora te ahorrará tiempo después a medida que tú o tus desarrolladores empiecen a escribir realmente el código que da vida a tu idea.

    Como mínimo deberías burlar estas páginas:

    • El panel principal al que se redirige su cliente inmediatamente después de registrarse. Puede ser un conjunto de gráficos, un formulario para recopilar más información o la función o herramienta principal de su aplicación.
    • Una segunda o tercera página de función o herramienta que se requiere para su MVP.
    • Una página de configuración de la cuenta donde tus clientes pueden configurar tu aplicación para que se ajuste a sus necesidades.
    • Una página para contactarte si necesitan ayuda.
    • Una página para actualizar, degradar o cancelar su cuenta.

    No dediques mucho tiempo a las elegantes páginas de registro, inicio de sesión y restablecimiento de contraseña. La mayoría de los marcos de desarrollo web tendrán implementaciones listas para usar de estas páginas. Puede optimizar aún más estas páginas después de lanzarlas y comenzar a atraer tráfico hacia ellas.

    A medida que te burlas de las herramientas principales, realmente mírala a través de los ojos de tus clientes. A menudo olvidarás algo obvio que creará un escollo más adelante en el proceso de desarrollo. Haz esta maqueta en al menos dos sesiones diferentes para que vuelvas a ella con una perspectiva fresca.

    La mayoría de la gente es capaz de noquear esto en un par de días. No necesitas ningún software o experiencia en programación. Las herramientas que mencioné anteriormente, y cualquier otra de esta categoría que puedas descubrir, deberían ser muy fáciles de usar. La mayoría de ellos son gratuitos y es posible que encuentres que como soliopreneur nunca necesitarás sus funciones de pago, que están destinadas a vender equipos dentro de compañías más grandes en cuentas pagas.

    Usa plantillas cuando estés listo para comenzar a diseñar

    Los aficionados al diseño no estarán de acuerdo conmigo. Puede que no sea el enfoque correcto a largo plazo, pero siempre se puede volver atrás y hacer un diseño personalizado más tarde.

    Si buscas alrededor, encontrarás que hay docenas, incluso cientos, de plantillas de página de inicio y aplicaciones de aspecto profesional. Hay algunas buenas plantillas gratuitas y muchas plantillas premium buenas que cuestan entre $20 y $100 cada una.

    Te sugiero la variedad pagada por sus diseños de mayor calidad y para darle a tu aplicación un aspecto diferente al resto. Puede pasar fácilmente días hojeando vistas previas y buscando en cada galería en Internet. Resista ese impulso y elija uno que se sienta bien para usted con su sombrero de “cliente” puesto. No pases más de una hora mirando a tu alrededor.

    También puedes copiar el aspecto de las plantillas de landing page que usaste para tus pruebas de ideas. Si ya está funcionando, ¡no lo reinventes! Probablemente aún necesitarás comprar una plantilla, pero puedes elegir una plantilla que se vea similar a la página de destino que creaste y luego editarla para que se parezcan más.

    Usa estos atajos para colores y logotipos

    También será tentador pasar mucho tiempo eligiendo tus logotipos y colores. Tampoco gastes más de una hora en esto.

    Me gusta obtener ideas de otros sitios web de la misma industria. ¿Qué colores usan? ¿Son audaces y descarados o frescos y suaves? ¿Los logotipos tienen texto, símbolos comunes o son completamente personalizados?

    La mayoría de las veces puedes arreglártelas con una paleta de colores gratis de un generador de paleta de colores en línea. Dale un color base y creará opciones de color primario, secundario y terciario para ti. Por lo general, presentará una docena de combinaciones de paleta más o menos. Elija uno que sea atractivo para usted y que no esté muy lejos de los demás en el mercado al que está ingresando.

    Puedes usar un recurso como The Noun Project para buscar un icono o símbolo para tu logotipo. Póngalo junto al texto del nombre de su empresa en una fuente agradable y que sirva como un logotipo perfectamente agradable para su negocio. Sólo costará unos pocos dólares obtener los derechos comerciales de un icono prefabricado.

    No quieres arriesgarte a parecer demasiado audaz y disuadir a los clientes, así que no te apartes demasiado de las normas en tu campo. Necesitas atraer a una gama de clientes lo más amplia posible; algunos compradores se apagarán si aterrizan en tu sitio y ven algo demasiado más allá de sus expectativas. Claro, puedes destacar, pero destacar no siempre genera confianza y conduce a inscripciones.

    Puedes cambiar la marca más tarde cuando tus clientes estén usando tu producto y tengas un motor de boca a boca ya tarareando. Las empresas cambian sus logotipos y colores todo el tiempo. Incluso Google, con uno de los logotipos más icónicos y ampliamente vistos en Internet, lo ha hecho y sobrevivido. Tú también puedes.

    No te estreses por el color y el logotipo. Todavía no. Si tu idea finalmente falla, no será porque elegiste el tono equivocado de azul y no contrataste a un diseñador profesional para pasar un mes consultando sobre un logotipo personalizado.

    Así que haz lo mejor que puedas, elige algo que te quede bien y sigue adelante. Es hora de comenzar a construir.


    This page titled 2.5: Capítulo 10 Branding y Diseño is shared under a CC BY-NC-SA 4.0 license and was authored, remixed, and/or curated by Ryan Buckley.