Нужно красиво, качественно, удобно, быстро - мы просто обожаем такие заказы =)

 

 

Жилой комлекс Ancora Residence это семи этажный жилой комплекс с двумя этажами подземной парковки, спа и фитнес зонами, огромными квартирами и еще кучей приятностей.
Ancora Residence часть проекта Bacu white city осуществляется в рамках Указа Президента Азербайджанской по улучшению экологической ситуации. 

 

 

 

Что же такое Ancora Residence для нас как проект. 
Это очень большой проект который нужно сделать так что б он казался очень легким.

 

"Ancora: Начало"

Начинали мы работу конечно же со слов что мы уже опаздываем, хотя проект только начался!) 
Нужно сделать множество этапов, собрать материал, провести кучу анализов и на все это нет времени, но делать надо.
По этому мы "посидели, потрындели" и постарались оптимизировать данное нам время на разработку сайта. Что-то на оутсортс , что-то запускали одновременно, а какие то части разделили на мелкие этапы что бы тоже можно было делать паралельно, так например верстка главной страницы шла паралельно дизайну внутренних страниц.

Userstory  или что нужно обычному человеку от сайта.

Прежде чем что то начинать проектировать, рисовать или писать, нужно определить: что человеку нужно от этого сайта, какие вопросы у него возникают в первую очередь, а что лучше вообще разместить в подпункты, как будет человек себя вести на сайте.

И так у нас в проекте жилой комплекс, соответственно определяем круг потенциальных покупателей, это мужчины и женщины в возрасте от  23 лет доооо последнюю цифру определить не просто так как покупать могут до позней старости, но пользоваться интернетом....смогут не все. По этому последняя цифра 55 лет. Лезть к людям которые покупают в киосках журналы о недвижимости мы не стали, а вот определить потенциальных покупателей среди своих друзей, коллег, знакомых - стали ) Прошелестев свои Вконтакты, Фейсбуки и телефонные книги, мы террорезировали своих друзей в течении двух дней, и собрали 25 общих вопросов которые волновали наших предпологаемых потенциальных покупателей. Мужчин волновали вопросы по типу, "цена за кв метр", "парковка" и "разрешение на строительство", а вот женщин волновало огромное количество моментов, такие как "есть ли рядом школа", "в каком виде я получу квартиру" и еще много чего о чем парни даже и не задумывались.

 

Mind map

Составим структуру сайта которая будет в дальшейшем нашей картой сайта. Прорабатываем ветки сайта одну за другой глубже и глубже, указывая каждую мелочь, каждую функци и возможность. Рисуем возможные переходы между ветками, в общем отсекает вопросы в дальнейшем по типу "вот сюда нажму что далжно произойти?"

карта в процессе работы.

Прототип

Теперь нужно определить куда разместить кнопочки, а где должно быть навигационное меню, что б человек не заблудился и не свалил от нас подальше. Прототип можно сделать на "axure" или "adobe muse", но мы решиле его делать на "бумажке" это отличный инструмент от компании "снегурочка" мы воспользовались пакетом A4 который отлично нам подходил по формату =) Да мы решили не делать прототип на программах а просто рисовали скетчи на листках и whiteboard. Так мы сэкономили кучу времени, ресурсов да и проект сам не нуждался в таких сложных этапах. В начале мы вынесли на главную страницу множества кнопочек, но в процессе работы что-то исключили, а что-то объеденили. Главное внимание по нашему замыслу должна привлекать кнопочка, "подобрать квартиру", так как это и есть вся суть сайта, кнопки второй привлекательности, это "инфроструктура" ,"парковка" и "осмотреться", это те пункты которые набрали большее количество голосов по нашему опроснику среди друзей, остальные пункты были аккуратно размещены во внутренних разделах, или получили меньшую привлекательность.

Именно на этом этапе мы уже должны иметь весь контент, что бы правильно сконструировать, область под информацию которая будет размещаться на сайте. Ведь страница "о компании" может включать в семя текст в 2 строчки, а возможно это небольшой рассках с множеством картинок и документов. И конечно же они должны отличаться в проектировании а в последствии и в дизайне.
Fortis, это компания девелопер нашего проекта снабдила буклетами каталогом и информацией с семого начала и блогадаря нашему человеку который по первому зову уже через 12 часов был в баку так же предоставила нам дополнительную информацию в краткие сроки.

Учитывать нужно и то, что человек может зайти с разных устройст имеющих разные экраны и соотношения. Следующие этапы это 3D,  дизайн главной страницы и на этих этапах мы уже точно должны знать как сделать так, что бы все элементы были доступны  и не обрезались на разных экранах. Сложив результаты нескольких источников в интернеты мы получили вот такой график

Разрешение Пользователей Динамика  
 
1366x768 25.10 % +0.47%
1920x1080 13.35 % +0.18%
1280x1024 11.36 % +0.11%
1024x768 5.82 % -0.46%
1600x900 5.71 % +0.07%
360x640 5.49 % +0.48%
1280x800 4.69 % -0.10%
1440x900 4.15 % 0%
768x1024 3.79 % -0.22%
320x568 3.18 % -0.05%
1680x1050 3.02 % -0.02%
1360x768 1.56 % -0.01%
320x480 1.40 % -0.09%
320x534 1.36 % +0.15%
1280x720 1.21 % -0.02%
1024x600 1.14 % -0.04%
375x667 1.03 % +1.03%
 

Как говорят рекламные ролики из магазина на диване "но и это еще не все!" разрешение экрана это хорошо, но у нас есть окно браузера и оно отличается от размера экрана! Дело в том, что ваши вкладки, поисковая строка, строка закладок и нижняя панель windows занимает еще 100 пикселей. Таким оброзом ваш браузер показывает сайт с разрешением не в 1366х768, а 1366х668 пикселей (если вы конечно не нажали F11) что может повлиять на правильность отображения сайта.
Какая разница какой у меня монитор и сколько там пикселей?  Разница есть, и она заключается в том, что элементы на разных екранах, должны быть разных размеров. на экранах с маленьким разрешением, элементы должны быть меньшего размера нежеле на на мониторе с большим разрешением, иначе кнопки могут занимать очень большое пространство на экране и они будут закрывать собой всю картинку, друг друга, а некоторые вообще останутся за пределами экрана.

Соотношение сторон. Самое популярное соотношение сторон на компьютерах это: 16на9 и 4на3 и нужно так же принимать это в учет иначе рабочая область может срезаться, красивая картинка стать не красивой, а пункты меню которые помещали на широкоэкранке, не поместятся на квадратненьком 4на3.

Вернемся мы в наш проект и посмотрим что же мы сделали.

На примере одного из проектов мы вынесли все разрешения, и продумывали как задняя картинка должна себя вести в зависимости от разряшения, и каких размеров картинка нам нужна от тридешника, что б потом не пришлось опять все переделывать и перерендеривать.

И вот что мы решили, нам нужны рендеры выставленные по композиционной сетке 3х3 таким образом что бы рабочая область,находилась в центральном прямоугольнике как показано на рисунке. Общий размер картинки должен составлять 4000 x 3000px

 

3D и Дизайн

Эти этап ы у нас шли паралельно потому как времени было очень мало. Спасибо Егору Гораю за крутые тридешки