Хорошая игра. Снимает стресс и напряжение, помогает отвлечься. Но здесь не о ней.
Все мы постоянно находимся в сети и частенько сёрфим по разным сайтам, натыкаясь на результаты работ настоящих или вынужденных дизайнеров. Да, именно дизайнеров. Не важно, кто и для кого разрабатывает сайт. Даже если человек делает это сам для себя, на какое-то время он превращается в дизайнера, представляя образ будущего интернет ресурса и мысленно расставляя элементы на свои места. Затем он может нарисовать макет, например, на бумаге или в специальной программе. Но продвинутый человек все будет делать немного иначе.
Грамотная разработка сайта делится на несколько этапов: интервью, дизайн, верстка, программирование и продвижение. Поговорим о первых двух.
На этапе интервью выясняется, что вообще будет из себя представлять будущее окно в интернет. Какие будут использованы цвета, стили и прочее. А вот на этапе дизайна вырисовывается сам макет, того что конечный пользователь будет видеть на своем мониторе. Но как же мы нарисуем макет, будем лепить картинки и кнопки как попало и по всей странице? Чтобы четко представлять, что и где должно располагаться, необходимо сделать прототип. Обычно на нем схематично показано, где будет располагаться какой-либо блок или элемент. Часто они строятся на основе каких-то шаблонов, ведь большинство сайтов имеют схожее строение. Сверху обычно располагается шапка, в центре блок с основной информацией, сбоку может находиться, например, дополнительная навигация. И уже на базе прототипа дизайнер заполняет каждый блок красками, в результате чего, получается макет.
Прототип можно изобразить как угодно, даже карандашом на листе бумаги. Но понравится ли это клиенту, который пришел за услугой. Конечно нет. Это стоит сделать с помощью графических редакторов, чтобы все выглядело красиво и презентабельно. А лучше всего использовать специализированный софт или ресурс. Их великое множество. Я познакомился с несколькими и на одном из них накатал прототип своего будущего сайта портфолио. Если кому интересно, прикрепляю ссылку.
Эта тема огромная монета в копилку знаний. А изученные инструменты сильно помогут в будущем.
Кстати, сервис, который я использовал — https://wireframe.cc/.
http://ayverstalshhik.ru/for_blog/prototyp/front_dev_by_maximus%20-%20Wireframe.cc%20Preview.html
