Maquetación Html5 de página buscador basado en wireframe

El proyecto a grandes rasgos consiste en disponer en una página una lista de información que puede ser filtrada a través de un buscador. Lo que se espera como requisitos generales es lo siguiente:

* El sitio debe estar programado en HTML5 + CSS3
* El sitio debe ser responsivo y se debe adecuar correctamente en perspectiva horizontal y vertical en IPad y IPhone principalmente.
* Se otorgará una linea gráfica en colores, entregando logo y algunos componentes gráficos que podrían ser utilizados.
* El estilo del diseño debe tener componentes gráficos definidos, en contraste y grandes (es para una persona con escasa visión).
* La usabilidad de la página debe ser intuitiva (se aceptan sugerencias respecto al wireframe adjunto)
* Si lo deseas puedes usar algún framework html / css como bootstrap u otro (Acepto sugerencias)
* Ideal si puede usar un preprocesador como Less o Sass para el CSS
* Ideal que puedas usar un sistema de control de versiones como Git o Mercurial

Requisitos detallados

Los siguientes puntos que mencionaré a continuación se apoyan en lo wireframes propuestos y deben estar considerados en la solución final:

* En la parte superior izquierda irá un logo que será otorgado.
* En la parte superior derecha irá un menú de tres botones, los botones tienen que tener sus estados hover y pressed. Sólo se solicita la página del buscador, los otros dos botones también funcionarán pero solo harán la transición al cambio de páginas en blanco.
* El buscador debe ser grande y debería tener la lupa para buscar y una cruz para anular la búsqueda, ambos iconos tienen que tener visualización excluyente.
* Incorporar tambien un componente gráfico para poder mostrar sugerencias.
* Se debe posicionar en el centro de la página una imagen "cargando".
* Se debe incorporar (no aparece en el wireframe) una barra vertical al lado de la tabla de resultados que muestre cada letra del abecedario para poder ir directamente al conjunto de datos que empiece por la letra seleccionada (algo asi como lo tiene la lista de contactos del IPhone).
* Al presionar una fila en particular debe aparecer una ventana emergente que muestre el detalle. Incorporar también esta ventana emergente con posibilidad de que se pueda abrir con un efecto y pueda cerrarse haciendo "tap" fuera de ella.
* Para considerar, dentro de la ventana emergente, existe un campo en particular que contiene mucha información por lo que no todos estos campos deben contener el mismo espacio.
* No seguir al pie de la letra el wireframe en cuanto a estructura, es solo una idea, lo ideal es que el resultado final sea claro, definido, contrastado, grande etc...
* No se requiere que se realice programación backend para esto, se busca que se realice la maquetación HTML, efectos visuales, componentes gráficos y diseño.

Consideraciones Finales

* Es super importante que podamos definir una planificación inicial para definir propuestas iniciales y entregas.
* Me gustaría que puedas responder lo siguiente:

¿Usas algun sistema de control de versiones?
¿Usas algun pre procesador CSS como less o sass?
¿Tienes experiencia con diseño UX?
¿Cuanta disponibilidad a la semana tienes?