Проектирование интерфейсов #2 — GV Gold 1

Автор Nadezhda Belousova
Проектирование интерфейсов #2 — GV Gold 1

Всем привет.

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

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

Просто этот сайт просто сделать интерфейс более современным у нас другие задачи из разговора с клиентом было понятно, что им нужен имиджевый сайт который показал их статус их величину работает с очень крупными интересными проектами то есть они хотят использовать много фотографий не так много текста перед нами задача на стандартный имиджевый сайт чтобы точнее задачу нам конечно нужно внимательно и тщательно изучить техническое задание я — это сделал задание и выписал требования к сайту первые требования как я уже сказал сайт должен быть imagens большим количеством фотографий показывающих статус компании теперь. Конкретно, что нужно на всех страницах в частности на главный главная страница мы и начнем сайт будет на русском и английском. Поэтому обязательно нужен выбор языка. Нужно обязательно строка поиска и также на всех страницах должна быть форма отправки письма связь для главной страницы попросили сделать шапку с большой фотографией с заголовком которой можно менять из этого можно сделать вывод, что в центре шапки будут не логотип компании какой-то слоган который будет соответствовать фотографии фоновый этот слоган они смогут менять периодически то есть в центре композиции у нас будет слоган и логотип компании на главной странице у нас. Обязательно должна быть информация о компании новости ещё в 3 есть пункт side-by-side то, что также называется боковая колонка когда справа или слева есть дополнительное место под контент в сайдбаре они хотят видеть возможность размещать какие-то ссылки или баннеры на внутренние страницы сайта то есть обобщённо говоря — это какая-то дополнительная анонсовый озона задача. Мы в целом разобрались ещё раз смотрим. Что нужно сделать конкретно для главной страницы и помимо сквозную. Шапкина главное — это информация о компании новостная лента и sidebar и сразу начинаем продумывать. Я думаю должно быть примерно так таким образом должны располагаться должна располагаться информация о компании напротив информация о компании размещаем sidebar одной лентой на всю ширину сайта. Пускай под этим всем новости количество новостей можно варьировать в зависимости экрана, тогда сайт будет адаптивный также не забываем про то, что как мы выяснили у нас будет большая красивая шапка скорее всего на большую часть экрана или может быть даже есть смысл чтобы она подстриглась под разрешение всегда занимала весь экран, но — это те детали которых лучше подумать на этапе дизайна пока, что обозначает её примерно так вот 670 пикселей основную часть мы ограничиваем ширине. Так сколько у нас тут по сетке должно быть 940 пикселей — это нормально удобная ширина для сайта. Обычно когда сайт шили особенно если речь идет о тексте то становится просто неудобно читать на больших мониторах яркий пример это. Википедия просто размазан в подвале же у нас. Судя по техническому заданию будут ссылки на все 100 плюс контактная информация в итоге наверное подвал должен быть не очень маленький должен быть высокий грубо прикинем примерно такого размера собственного. Теперь мы перед тобой видим готовый набросок сайта можно переходить к усложнению каждого отдельного элемента чтобы было понятно, что на фоне фотография обычно для их использовать одинаковые тёмно-серый цвет мне кажется достаточно очевидно, что здесь должна быть фотография в некоторых. Что делает перечеркивание крест-накрест, но на мой взгляд часто мешает восприятию прототипа в целом. Тем более, что здесь у нас будет текст ещё какие-то элементы если у нас просто картинка одно изображение то может быть есть смысл так сделать в данном случае точно не стоит здесь мы не будем ничего слишком сложного и супер оригинального. Придумайте разместим логотип в левом верхнем подойти к нам логотип не нужен. Ну чтобы понять какой он будет по пропорции нужно посмотреть на него. Так он у нас больше горизонтальной направленности. Примерно вот такого соотношения сторон получилось ровно 300 на 100 логотип уже содержит название компании поэтому ничего дополнительного здесь не нужно, а здесь основные ссылки со структурой. Сейчас я посмотрю и вставлю. Какие Тюмень у нас получилось такое массивный много пунктов. Поэтому просто расположить провода типа. Его похоже не получится нужно найти как другое решение так сделаем выравнивание, тогда мы сделать меню на всю ширину страницы. Я думаю, что — это самое логичное в данном случае логотип в таком случае есть смысл сделать поменьше чтобы всё было симпатична. Вот примерно так нашла для тебя — это очень массивные элемент. А меня достаточно тонкая поэтому мы видим, что по композиции сейчас левая сторона явно перевешивают. Чтобы не пришлось заморачиваться с фотографиями искать там центр тяжести подбирать специально лучше изначально сделать интерфейс в композиции таким образом чтобы любая фотография там смотрелось лаконично. Веном шапки как раз там много всего нужно ещё разместить пояс и.

0 комментариев
0

Читайте также