-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproceso.html
178 lines (115 loc) · 9.82 KB
/
proceso.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!doctype html>
<!--[if lt IE 9 ]> <html class="ie ie8 no-js" lang="es"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="es"> <![endif]-->
<!--[if IE 10 ]> <html class="ie ie10 no-js" lang="es"> <![endif]-->
<!--[if gt IE 10]><!--><html class="no-js" lang="es"><!--<![endif]-->
<head>
<meta name="generator" content="DocPad v6.69.0" />
<title>Nuestro proceso | Medula Diseño</title>
<!--[if lt IE 8 ]><link rel="stylesheet" href="/styles/ie.css" /><![endif]-->
<!--[if gte IE 8]><!--><link rel="stylesheet" href="/styles/styles.css" /><!--<![endif]-->
</head>
<body>
<ul>
<li class="">
<a href="/index.html">
Home
</a>
</li>
<li class="">
<a href="/nosotros.html">
Nosotros
</a>
</li>
<li class="">
<a href="/portafolio.html">
A quienes hemos ayudado
</a>
</li>
<li class="active">
<a href="/proceso.html">
Nuestro proceso
</a>
</li>
<li class="">
<a href="/servicios.html">
Servicios
</a>
</li>
</ul>
<h1>El proceso de Diseño y Desarrollo de un sitio web</h1>
<p>El proceso de crear un proyecto web varía de caso a caso, pero en líneas generales sigue la siguiente estructura.</p>
<h2>Descubrimiento e investigación</h2>
<p>No en vano existe el dicho <em>el cliente tiene la razón</em>. Nuestra primera etapa consiste en empaparnos de todo el conocimiento disponible en una organización, para tener una idea clara de qué constituirá el proyecto, cuales serán sus objetivos y sus limitaciones. De esta manera podremos tomar desiciones informadas y guiar al cliente con los mismos objetivos en mente.</p>
<p>Evaluamos el proyecto en su estado actual, estadísticas de visitas, guías de estilo de la marca, encuestas, entrevistas y cualquier material que esté ya disponible.</p>
<p>Si existe un documento de requerimientos, cuestionaremos cada punto para asegurarnos de estar en la misma página que el cliente con respecto a los objetivos y motivadores del proyecto.</p>
<p>Según lo requiera cada proyecto, además de las reuniones con los encargados, tenemos algunas actividades que suelen ser muy reveladoras, tanto para nosotros como para la organización.</p>
<ul>
<li>Entrevistas a involucrados (<em>Stakeholders</em>).</li>
<li>Relatos de usuarios (<em>User stories</em>): Para definir el rango e impacto del proyecto dentro de la organización.</li>
<li>Análisis de estadísticas existentes.</li>
<li>Entrevistas a usuarios.</li>
</ul>
<h4>Sugerencia:</h4>
<p>Buen contenido escrito hace maravillas por un sitio web, pero no es fácil de hacer, les recomendamos trabajar con un redactor profesional.</p>
<h2>Arquitectura de la información y Planificación</h2>
<p>Estos son los verdaderos cimientos de un proyecto, la planificación de lo que se construirá, rápidamente empezamos a organizar la información usando diferentes métodos que nos permiten hacer cambios y correcciones de manera ágil y efectiva.</p>
<h3>Estrategia</h3>
<p>Ya no es suficiente que un sitio web sea un brochure digital, generamos herramientas para ventas o procesos internos de la organización con resultados mesurables.</p>
<p>No existe la panacea, pero conocemos muchos remedios para diferentes aflicciones y dependiendo del contexto. Dedidamos buena parte de nuestro tiempo a mantenernos al día con tecnologías, metodologías y tendencias de diseño, no estamos amarrados a ninguna tecnología o marca en particular, por lo que somos libres de sugerir lo más conveniente en cada caso.</p>
<h3>Recopilación de contenidos</h3>
<p><strong>El contenido es el Rey</strong>, con los años hemos aprendido que debe ser lo primero en crearse y recopilarse, a veces descubrimos cosas que para personas de la empresa son obvias, pero para los que venimos de afuera no son evidentes y deben ser consideradas en el diseño.</p>
<h3>Mapas de contenido o Diagramas de flujo</h3>
<p>Con los contenidos más o menos listos, organizamos la información, ya sea un mapa de contenidos para sitios informativos o diagramas de flujo de acciones, tareas y objetivos para sitios más interactivos.</p>
<h3>Móvil primero</h3>
<p>Simple ejercicio de jerarquía de la información que nos gusta hacer. Consiste en organizar todo el contenido de una página como si fuese a verse en un dispositivo móvil, de pantalla chica, obligando a poner todos los elementos de la página uno sobre otro.</p>
<h3>Wireframes o Prototipos</h3>
<p>Dependiendo de la complejidad y tipo de proyecto hacemos usamos estar herramientas para organizar la diagramación y jerarquía de contenidos.</p>
<p>Para los prototipos desarrollamos una herramienta que nos permite ir modificando los prototipos en tiempo real, en HTML y CSS, incluso durante una reunión y que los cambios queden guardados instantáneamente, sólo con un navegadore moderno y una conexión a internet.</p>
<h2>Diseño visual</h2>
<p>Aquí le ponemos color al proyecto —literalmente— es donde desarrollamos la propuesta gráfica. Llevamos 2 etapas informándonos y definiendo qué irá en el sitio y qué esperamos de nuestros usuarios, ahora lo ponemos todo junto y le agregamos el valor estético, exacerbamos las jerarquías visuales, destacamos las llamadas a acción, esclarecemos funcionalidad, elegimos la imaginería e iconografía, definimos el manejo tipográfico, entre otras muchas tareas visuales.</p>
<h2>Desarrollo (programación)</h2>
<p>Esta es la etapa de construcción y armado del proyecto, todo lo planificado y diseñado se convierte en elementos con</p>
<h3>Maquetado (Programación HTML, CSS, JavaScript)</h3>
<p>En esta etapa se convierte todo lo que hemos hecho hasta ahora en código que puede entender un navegador. Pero no solo un navegador, si no que para la mayoría, contemplando los diferentes dispositivos y programas que hay para navegar por la web.</p>
<p>Al final de esta etapa de <em>front-end</em>, un sitio o aplicación ya se empieza a ver y sentir como el resultado final.</p>
<h3>Programación del servidor (<em>back-end</em>)</h3>
<p>Es la hora de construir y conectar todos los cables. Aquí finalmente ejecutamos toda la lógica que hemos venido preparando en cada paso anterior, trabajamos en el manejo de datos, bases de datos, seguridad, servicios de terceros, conversiones de formatos, etc.</p>
<p>En esta etapa se hacen cosas como la programación de la lógica de negocio; o la instalación y configuración de los Administradores de Contenidos (CMS), como Drupal, Wordpress, Perch o algún otro. Se escribe la lógica de los formularios y se verifican todos los datos.</p>
<p>La mitad de esta etapa es revisar y repasar todo lo que hemos planeado verificando que todo esté funcionando como debe. Al final de esta etapa las cosas están funcionando listas para publicarse</p>
<h2>Capacitación</h2>
<p>Muchas veces dejamos una serie de nuevas tecnologías en las manos de nuestros clientes, nos interesa que las aprovechen al máximo, por eso hacemos sesiones de capacitación y dejamos video-tutoriales de cómo hacer las tareas más comunes necesarias para la mantención del sitio. Estos videos quedan accesibles sólo para los administradores y editores del sitio.</p>
<h2>Lanzamiento</h2>
<p>Si disponemos del tiempo, publicamos silenciosamente el sitio para probar las aguas con quienes llegan espontáneamente, si hay problemas los corregimos antes de llenarnos de tráfico. Finalmente se hace el gran lanzamiento a público.</p>
<h2>Seguimiento e Iteración</h2>
<p>El lanzamiento es sólo el inicio, idealmente tendremos <em>feedback</em> muy pronto luego del lanzamiento. Con ese feedback se puede informar una nueva etapa. nosotros entregamos 30 días de garantía para cambios y ajustes; 6 meses de garantía para errores. Además tenemos diferentes planes de mantención por horas de trabajo según las necesidades de cada proyecto.</p>
<p>Los proyecto más exitosos a lo largo del tiempo son aquellos en los que se vuelve a trabajar constantemente, haciendo arreglos, cambios y ajustes según vayamos descubriendo el efecto que ha tenido en el público objetivo.</p>
<h1>El proceso de diseñar un logotipo</h1>
<p>A lo largo del proceso se requiere que cada etapa sea aprobada por quien corta el queque en el proyecto, partiendo por el brief original.</p>
<h2>Descubrimiento</h2>
<ul>
<li>Brief con el cliente</li>
<li>Cuestionario de Branding</li>
</ul>
<h2>Entrega 1</h2>
<p>Internamente pasamos por una etapa de <em>brainstorming</em> donde se generan muchas alternativas y luego de revisar la competencia vamos filtrando las mejores y más varias opciones.<br />Se entregarán 3 alternativas de logo que esbozarán caminos para seguir explorando, el cliente debe elegir uno.</p>
<h2>Entrega 2</h2>
<p>Se profundizará sobre el camino elegido, presentando variantes en el isotipo, composición, color, tipografía y proporciones.</p>
<h2>Entrega 3</h2>
<p>Se entrega la versión final que queda abierta a observaciones menores y ejemplos de aplicaciones.</p>
<h2>Entrega definitva</h2>
<p>Se entregará el logo definitivo con múltiples formatos y con un manual de normas gráficas que normará aproximadamente los siguientes usos.</p>
<ul>
<li>Logo horizontal</li>
<li>Logo vertical</li>
<li>Uso del isotipo pos sí mismo</li>
<li>Logo en escala de grises</li>
<li>Logo en Blanco y Negro</li>
<li>Logo para tamaños pequeños o en baja resolución</li>
<li>Uso sobre fotografías</li>
<li>Uso sobre colores</li>
<li>Márgenes mínimos</li>
</ul>
<p>Todo lo anterior es una pauta general, se podrán hacer exepciones o negociar modificaciones según lo requieran las circumstancias.</p>
</body>
</html>