Гештальт — немецкое слово, означающее “целостная форма или структура” это единое определение может быть одним из самых важных правил дизайна.

Чаще всего, веб-дизайнеры сосредоточены на деталях веб-дизайна, а не на общий внешний вид. Они сосредоточены над круглыми краями, тенями, шрифтами и т.д. и т.п. Все это хорошо, но это может иметь никакого значения, когда заказчику дизайн не понравился на первый взгляд. Человеческий мозг воспринимает сначала общую форму и только затем начинает сосредотачиваться на деталях и нюансах.

Взгляните на этот пример изображения …

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

Теперь давайте посмотрим на следующие 2 примера, где детали действительно не имеют принципиального значения:

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

1. Черная птица в левом верхнем углу смотрит в противоположном направлении
2. Шляпы сомбреро на двух картинках отличаются
3. На второй картинке трость у старика повернута и немного темнее
4. Во втором изображении, тротуар в правом нижнем углу немного крупнее
5. Женщина смотрит в противоположном направлении

Ни одно из этих изменений не повлияло на восприятие картины в целом, теперь давайте посмотрим другой распространенный пример:

Эти 2 версии Volkswagen Beetle, 1937 и 1973 года, и, несмотря на несколько серьезных изменений в дизайне деталей, за все это время дизайне в целом не претерпел серьезных изменений. Это объясняется тем, как работает наш мозг, мы видим целые картины и определяем весь вид гораздо быстрее и проще, чем рассматривая изменения в деталях.

Взгляните на это изображение на которой изображен далматинец нюхающий землю в тени нависающих деревьев. Мы не видим собаку сразу и не видим ее четких деталей (ноги, уши, хвост, нос и т.п.) собаку можно увидеть лишь в общем образе.

То же самое происходит и  веб-дизайне, дизайн никогда не воспринимается путем выявления его отдельных частей (заголовок, навигация, контент, кнопки, вкладки и т.д.) В первую очередь, дизайн всегда воспринимается в целом т.е. совокупность всех деталей сразу.

Один из преподавателей моего колледжа как-то сказал “Если вы видите дизайн и в целом он вам нравится, и вы только потом начинаете прорабатывать детали — это хороший дизайн. Если вы начинаете менять детали в дизайне чтобы добиться единой красивой картины — это плохой дизайн. Не тратте свое время напрасно, менять такой дизайн нужно в целом.”

Попросите любого в мире человека нарисовать Биг Бен или Эйфелеву башню или пирамиду Гизы. Любой из людей начал бы рисовать с общей формы. Форма как ориентир для человека, мы можем запоминать его откуда угодно (фотографии, фильмы, брошюры для путешествий и т.п.)

Применение принципа Гештальта в рабочем процессе веб-дизайна

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

Дизайн будет выглядеть одинаково, пока вы не внесете изменения в структуру Гештальта

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

Теперь давайте посмотрим на примеры макетов и их структуру:

Как правило, если придерживаться  стандартной или вообще квадратной структуре в дизайне (как в 4 нижних макетах из примеров выше) то это приведет к обычной конструкции и ничего нового и креативного вы не внесете. Старайтесь экспериментировать с структурой вашего будущего макета.

Попробуйте использовать такие обычные приемы, как вращение объектов, обрезание и разделение объектов, использование нестандартных форм.

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

Когда работа над структурой блоков будет закончена, вы можете начинать работу над деталями. Вы будете удивлены, как сильно каркас (структура) влияют на общее восприятие дизайна в целом.

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

Представьте вашу конструкцию, как арахис в шоколаде. Наружный шоколадный слой всегда будет зависеть от формы и размера арахиса и никак иначе. И если вы изначально не задумаетесь о самом арахисе, то в конечном итоге вы слабо сможете контролировать конечный результат.

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

Оригинал статьи: The Gestalt Principle: Design Theory for Web Designers

Гулял по интернету и наткнулся на сайт с советами, как готовиться к свадьбе http://www.nevesta.info/. Те, кто решил окольцевать себя, велкам планировать как это сделать.

Начальный вопрос для написания поста «А кто такой дизайнер?». Я прочитал достаточно информации по этому поводу и по своему опыту у меня есть, что ответить на этот вопрос.

Для начала обратимся к вики:

Диза́йн (англ. design инженер-конструктор, от лат. designare отмерять) — это творческая деятельность, целью которой является определение формальных качеств промышленных изделий. Эти качества включают и внешние черты изделия, но главным образом те структурные и функциональные взаимосвязи, которые превращают изделие в единое целое как с точки зрения потребителя, так и с точки зрения изготовителя. Дизайн стремится охватить все аспекты окружающей человека среды, которая обусловлена промышленным производством.

Источник: Дизайн — Википедия

Чем занимается дизайнер?

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

Согласование макетапроекта с заказчиком, это первая стадия и начало работы. Дизайнер должен объяснить заказчику, как лучше выполнить поставленные задачи. Веб-дизайнер, должен показать и рассказать какие виды и типы сайтов существуют, какой из вариантов сайтов больше подходит заказчику и почему. Понять чего хочет заказчик и в эстетическом плане, т.к. дизайнер еще и отвечает за «красоту исполнения». И именно дизайнер потом будет отправлять дизайн-макет заказчику на утвеждение. И соответственно выслушивать претензии заказчика и уметь правильно вносить корректировки по желанию заказчика. Порой это бывает очень трудно.

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

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

Если говорить более конкретно, то дизайнер занимается сочетанием эстетической и технологической стороны проекта.

Чем обладает современный дизайнер?

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

Чувством вкуса. Умение сочетать и создавать из частей одно целое по истине определяют самого дизайнера. Умение преподнести красиво и со вкусом. Именно дизайнер придает «индивидуальности» проекту.

Современный дизайнер обладает знанием в работе с целым рядом программ. Нужно уметь работать с растровой, векторной графикой + умение обрабатывать фотографии тоже очень помогает. А это уже как минимум, знание Adobe Photoshop и Adobe IllustratorCorel Draw. Для печатной продукции очень полезно изучить Adobe Indesign или QuarkXPress. Для создания flash анимации – Flash MX.  Вообщем путей для саморазвития дизайнера очень много. Остается пробовать себя, искать что-то новое и выбирать, что тебе больше по душе.

На правах рекламы:

• Незабываемые путешествия и отдых в Индонезии доступные цены и горячие скидки!
• Увлекательные и развивающие детские игрушки. Большой выбор.
• Хотите бросить курить? заменители сигарет> – высокотехнологичных способ борьбы с курением.

Минимализм в веб-дизайне.

Минимализм – понятие, употребляемое в различных контекстах. Будь то стиль  жизни или форма искусства, говоря о чем-либо  «минималистский»,  можно подразумевать большое количество значений.

В области веб-дизайна минимализм занимает постоянно увеличивающуюся нишу среди проектировщиков, которые стремятся придать содержанию новую форму. Но, как и любая тенденция или теория в мире веб-дизайна, минимализм может быть понят неверно.

Так что же представляет собой минимализм в веб-дизайне, и не менее важный вопрос – чем он не является?

Часто веб-дизайны в минималистском стиле истолковывают превратно, как что-либо, требующее меньших усилий и времени для создания. Действительно, главной задачей минималистского дизайна является именно передача чистоты форм и ключевой идеи. Однако, высказывания о небольших затратах сил далеки от истины, ведь веб-дизайны в минималистском стиле лишены дополнительных приемов и возможностей для преподнесения целевой аудитории самой необходимой информации в доступной форме.

Мышление в стиле минимализма.

Для того чтобы должным образом  реализовать минимализм  в вашем дизайне, прежде всего необходимо определиться с ведущей темой проекта, ведь в этом и состоит основная функция данного стиля  – ясное и лаконичное раскрытие центральной идеи. Попытка дать большой объем информации, придерживаясь минимализма, может привести  к плачевным последствиям, поэтому прежде чем окунуться в процесс проектирования, немаловажное  значение будет иметь  наличие проектного плана и четко ограниченной сферы деятельности.

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

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

Вы будете удивлены, как мало информации достаточно представить пользователю за один раз, чтобы убедительно изложить свою точку зрения.

Искусство удаления.

Французскому автору Антуану де Сен-Эксюпери  принадлежит фраза: “Совершенство достигнуто не тогда, когда нечего добавить, а тогда, когда нечего убрать”.

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

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

Правильный цвет.

Веб-дизайны в минималистском стиле в большинстве своем черно-белые, хотя это и не является правилом. Минимализм вовсе не подразумевает нехватку цвета, скорее наоборот -  призывает к интеллектуальному использованию идеально продуманных цветовых палитр.

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

Более уникальные цветные варианты могут быть столь же эффективны, как и черно-белая гамма. Дело не в выбранном цвете, а в его правильном использовании.

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

Цвет, применяемый в веб-дизайне, играет огромную роль в ощущении, которое создает сайт. От спокойных и изысканных черно-белых проектов до ярких и смелых цветовых решений, дизайн в стиле минимализма допускает использование любых цветовых гамм.

Типографика.

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

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

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

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

Структура.

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

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

Если дизайн вашего проекта вынуждает пользователей задумываться во время его использования или искать информацию, в которой они нуждаются, то вы нарушаете одно из основных правил веб-дизайна. Иногда, даже когда сайт хорошо выполнен и  у него удобная навигация и наглядное содержание, он все равно может не отвечать всем требованиям минимализма.

Свободное пространство.

Искусство расстановки интервалов наглядно продемонстрирует уровень профессионализма в  выполненном дизайне. Когда цель состоит в том, чтобы меньшим выразить большее, свободное пространство является одним из самых мощных инструментов, доступных проектировщикам.

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

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

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

Найдите баланс.

Со всем этими разговорами об удалении лишних элементов дизайна и уходе от графического изобилия, может показаться, что изображение  – враг минимализма.

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

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

В некоторых случаях элементы, такие как графики, диаграммы или картинки даже могут служить для освобождения пространства вашего сайта. Как говориться, картина стоит тысячи слов — если вы сможете использовать изображение, чтобы заменить тысячу слов, сделайте это!

Диаграммы, схемы и таблицы способны преподнести информацию более интеллектуальным способом, сделав дизайн организованнее, да и выглядеть они будут аккуратнее нескольких параграфов словесного объяснения.

Что оставить для себя?

Подводя итог, важно понять, каких целей вы надеетесь достигнуть, работая в стиле минимализма. Если вы создаете минималистский веб-дизайн ради испытания новой тенденции, то у вас неверные мотивы. Минимализм давно занимает свое место в искусстве, архитектуре и даже философии, превосходя среду интернета и компьютера.

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

Автор статьи: Jason Gross

Оригинал статьи: Minimalism in Web Design: A Guide

З – Добрый день, я бы хотел заказать у вас /* количество визиток*/ и сделать дизайн визиток.

И – Да, кончено. Это будет стоить вам /*много денег*/ и 500 р. за дизайн визитки.

З – Что нужно для дизайна визитки?

И – Просто скажите, что вы хотели бы написать.

З – … готово.

И – Все, через пару дней будет готово, мы с вами свяжемся.

*Заказчик уходит довольный*

Дальше самое интересное. Если сотрудник конторы адекватный и более или менее опытный человек, то он удосужиться спросить как минимум логотип фирмы, род деятельности фирмы или же просто цель создания визитки без указания должности.

Каким должен быть макет визитки за 500 р. ?

Я бы ответил – как минимум в векторном формате, CMYK палитре и запасом рисунка на 1-2 миллиметра для погрешности при резке визиток. Это минимум.

Как это происходит в большинстве случаев ?

Открывается фотошоп. Создается новый документ (не всегда даже ставят разрешение на 300dpi –  72pdi вполне достаточно). Выбирают цвет фона. Качают какой-нибудь симпатичный шрифт и выбирают ему цвет. Двигают в нужное место надпись и отправляют на печать.

Вопрос. Зачем тогда платить 500 р. ? Может следующий раз, перед походом за визитками вы повторите процедуру сами ? Уверяю вас, времени у вас это займет немногим больше чем ушло у дизайнера из конторы. Разница лишь в том, что вы не заплатите 500 р. и вы будете уверены в том, что визитка вам понравится, ведь делали ее вы сами. Вы можете сделать еще проще, скачать шаблоны визиток с какого-нибудь бесплатного фотостока и вы уже получите дизайн стоимостью от 1000 р. совершенно бесплатно. Останется лишь написать текст, все остальное уже готово в шаблоне.

А если хочется красиво?

Тогда следует уже стать более дотошным и придирчивым, но и начать понимать, что за 500р. нормального ничего не выйдет. На фрилансе за 1000-1500р можно получить вполне себе достойный дизайн для визитки + вы можете оценить уровень работ различных фрилансеров и выбрать наиболее понравившегося вам. Порой если чуть вникнуть и чуть разобраться в любой теме, оказывается, что выбор гораздо больше и приличней. Жалко многие люди просто не задумываются над этим.

Если же у вас совсем нет времени на такие (казалось бы) мелочи,  то удосужитесь хотя бы узнать несколько адресов ближайших контор или  заказать он-лайн с доставкой (на многих сайтах также можно выбрать кучу нюансов и ознакомится с работами ).

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

Самое забавное, что 500р. входит стоимость разработки логотипа (по сути это просто выбор шрифта в интернете). С одной стороны за 500 р. большего врятли можно ожидать и даже я не стал бы особо морочить себе голову и сделал все максимально просто. Но с другой стороны, работу то можно потом и в портфолио поставить, а «просто» показывать стыдно. Вот и думай брать вообще задание или нет.

Я привел только один пример работы, представить такие примеров можно тысячи.

Почему дизайн стал дешевле?

Стал дешевле только средний и низший уровень рынка. Среди профессионалов такой тенденции нет, было дорого, сейчас дорого и будет дорого. Т.к. человечество не стоит на месте, все пытаются открыть какой-то свой бизнес и тысячи всяких молодых людей зарегистрировавших ИП, ходят с гордым званием «Директор». И собственно в услугах мелкой полиграфии, печати различных вывесок и прочего нуждается все больше людей. Дешево и сердито – зато «своя фирма».

Вторая причина, это повышение уровня образования. Когда я начинал изучать фотошоп и делал свои первые работы, ребята из местной сети выстраивались в очередь за новыми аватарками, другие просто не умели работать в ФШ даже на самом минимальном уровне. Сейчас же каждый школьник ежедневно меняет свои аватарки вконтакте, а девушки делают себя все красивее и красивее все более умело скрывая свои недостатки. Следовательно, если умеют делать больше, цены будут ниже.

Третья причина, люди просто не понимают за что они платят. И когда спрашиваешь их о том, что они хотят увидеть в конечном результате, они недовольно ворчат «Вы дизайнер, вы и разбирайтесь, главное что бы было красиво».

Четвертая причина. Доступность. Сейчас каждый пользователь в интернете имеет доступ к куче шаблонов для сайтоввизитокбаннеров и прочего. Я не говорю, что использовать клипарт это плохо, пользуются им все, но нужно это делать с умом. Все хорошо, но в меру. Если поискать, вы можете найти кучу веб-студий, который готовы изготовить сайт за 2 т.р. и 4 часа работы. Вот как нужно работать! 4 часа – 2т.р. – За день 2 макета – 4т.р. – в месяц примерно 100  т.р.  . А вы говорите веб студии…На таком фоне само слово «дизайнер» как-то теряет свою ценность.

Причин гораздо больше, я постарался выделить основные причины которые привели к падению цен на дизайн.

Весьма и весьма унылая картина. Хотел бы узнать ваше мнение по этому поводу.

]]> http://strokoff.ru/2010/08/07/o-dizaine-i-cenah/feed/ 4 http://strokoff.ru/2009/12/16/krasivye-i-udobnye-veb-formy/ http://strokoff.ru/2009/12/16/krasivye-i-udobnye-veb-formy/#comments Wed, 16 Dec 2009 10:33:47 +0000 Strokoff http://romanesque.ru/?p=178 Читать далее →]]> Сегодня я хотел бы поговорить о «веб формах». О том, как лучше их делать и о удобстве их использования.Ежедневно мы заполняем приличное  кол-во веб форм регистрацияобратная связьслужба поддержки и прочее. Вообще пользователи  в большинстве своем не очень любят их заполнять т.к. тут действует принцип  »я уже это заполнял». Итак, начнем сначала – какой должна быть веб форма ?

1. Форма должна быть удобная и доступная для пользователя, желательно с минимальным количеством полей. Очень часто регестрируясь на сайте, от которого мне нужно допустим скачать только один файл (а это могут делать только зарегестрированные пользователи), я ввожу свое ИмяФамилиюГод рожденияЛогинПароль, а порой еще обязательно ставят пункт «Немного о себе» – на кой черт все это нужно знать владельцам сайтов, если я все равно уйду с него после того, как скачаю нужный мне файл ? В итоге я просто трачу драгоценное время. Вывод – при создании веб формы, нужно ставить только нужные поля для заполнения, а второстепенные – либо делать необязательным, либо убрать их вовсе или же поставить, как дополнительные поля в профиле после регистрации (к примеру), где каждый пользователь уже по своему усмотрению может решить, стоит ли ему заполнять эти поля или нет. Сегодня я хотел бы рассмотерть и привести пример – обычной формы которую вы встречали не один раз, это форма для связи с техподдержкой или вообще администрацией какого-нибудь сайта.

Собственно вроде бы все понятно. Логин нужен для администрации сайтахостинга, Имя для дальнейшей связи с вами, email также для дальнейшей связи с вами, тема вопроса и собственно его подробное описание. Что в ней не так? Изначально, все нормально и вроде понятно, но мы же будем стремиться к совершенству и обустроим нашу формочку.

Первое что бросается в глаза, так это пробелы между словами и полями для ввода. Чтобы определить какое слово к какому полю принадлежит, нужно провести глазами визуальную черту, что при заполнении формы, увеличивает продолжительность ее заполнения и удобство восприятия формы в целом. Такие формы имеют огромный минус при неумелой «резиновой верстке», когда форма растягивается на большом разрешении – выглядит убого. Переделываем.

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

Форма выглядит более удобной и компактной нежели в предыдущем варианте, что помогает экономить драгоценное пространство на сайте. Также кстати обратите внимание на поля «Логин» и «Имя» они стали гораздо короче. При построении веб формы нужно учитывать также, что именно в нее будут вводить т.к. не имеет смысла делать допустим textarea для логина, на мой взгляд поля длинной в 20 символов для логинапароля вполне достаточно, а вот для Темы Вопроса и его описания нужны поля гораздо большедлиннее.  Теперь поговорим о подсказках, в моем примере я думаю нужна подсказка только для email и формы вопроса т.к. не очень ясно.

Для удобства пользователя и администратора, я добавил выпадающий список со службами в которые можно обратиться. Это удобно для пользователя т.к. он уверен в том, что обратился в нужную ему службу и удобно для администрации т.к. легче разбирать различные заявки и сортировать их. Что касается e-mail адреса, теперь пользователь знает, что после заполнения им формы и ее отправки, ему придет письмо на email  с дальнейшими инструкциямиответами и что нужно проверить почту (как показывает статистика, мало кто пользуется почтовыми программами, большая часть обращается к почте через веб интерфейс). Теперь можно добавить немного «дружелюбности» нашей веб формочке. К примеру это можнос делать так:

Согласитесь, получилась довольно симпотичная и легкая для восприятия веб форма. Остались нюансы.

На мой взгляд очень глупо использовать в форме кнопку «Сбросить» или «Очисить» т.к. ей по идее никто не пользуется. Если я ввожу какие-то данные и понимаю, что они неправильные, я стираю сам всего одно поле для ввода, а не начинаю заполнять всю форму заного. Также кстати очень много косяков, допустим при регистрации или неправильном заполнении формы т.е. когда я полностью заполнил всю форму и отправил ее, мне выдают ошибку аля «некорректный e-mail» или же «такой логин уже существует» и приходится заполнять всю форму заного.  Есть 2 пути решения, либо оставлять введенные данные и выводить ошибку, чтобы пользователь просто переоформил некоторые поля или же проверять «на ходу» правильность заполнения формы, что являеется очень удобным т.е. прям во время заполнения формы я вижу правильно ли она заполнена или нет.

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

p.s. Кстати один %username% пнул меня и сказал, что я пишу самые самые азы и что все это знают.  На мой взгляд может это и азы, но к сожалению их достаточно редко применяют на практике многие веб мастера, что очень печально.

Постовые:

Прикольные красочные футболки и просто интересные заметки на ArtMen creative blog.

Компания АртСаттера предостовляет услуги по автоматизации управления бизнес процессами.

Для выполнения этого урока, вам понадобятся:

• Photoshop CS4
• Karbaras’s IES Generator 3 (Скачать)
• Richard Rosenman’s Grid Generator 1.7 Plug-in
• Cybia AlphaWorks Plug-In (Скачать)
• 1589835-nice.IES (Скачать)

Шаг 1 – Настройка цвета.

Создайте новый psd документ, с размерами width 1024px и height 1024px.

Установите Foreground Color – #34240f и Background Color – #825826.

Залейте фон background цветом (сочетание клавиш Alt+Backspace).

Цвет фона

Шаг 2 – настройка фоновой текстуры.

Перейдите –  Filter>Render>Fibers и установите значения – Variance: 8 – Strength: 47. Нажмите кнопку Render несколько раз, пока не добьетесь равномерного распределения текстуры.

Настройки фильтра Fibers

Когда закончите выбирать текстуру, нажмите ОК. Результат должен быть примерно такой

Результат фильтра Fibres

Теперь зайдите – Filter>Distort>Glass и установите значения – Distorition: 15 – Smoothnes: 1 – Texture: Frosted и Scaling: 100% и нажмите OK.

Настройки фильтра Glass

Переименуйте слой в «corkboard»

Промежуточный результат

Текстура фона готова. Сохраните получившийся результат в файл «texture.psd» и не закрывайте его.

Шаг 3 – Настройка главного макета.

Создайте новый документ с параметрами hight: 300px – width: 500px. Размеры вы можете выбрать по вкусу, я указал лишь те, которые будут использоватся в этом уроке. Сохраните получившийся документ в «main_layout.psd«.

Переименуйте слой «Background» в «floor_color» и залейте его цветом #1a211c

Промежуточный результат

Шаг 4 – Совмещение текстуры и главного макета.

Вернитесь в документ «texture.psd«.

Кликните правой кнопкой мыши на слое «corkboard» и выберите пункт «Duplicate Layer«.

Дублирование слоя corkboard

В появившемся диалоговоем окне введите «corkboard» и внизу выберите «main_layout.psd»  в качестве конечного документа.

Дублирование слоя corkboard

Вернитесь в документ «main_layout.psd«. В списке слоев, слой «corckboard» должен оказаться над слоем «floor_color«.

Промежуточный результат

Шаг 5 – Трансформация и изменение текстуры corckboard.

Выберите слой «corkboard»  в списке слоев.

Нажмите сочетание клавиш Ctrl+T или выберите меню Edit>Transform>Scale.

В настройках трансформации нажмите на значок «Maintain Aspect Ratio» (сохранять пропорции) (значок я пометил красной стрелкой на рисунке ниже).

Введите значение Width: 75% и нажмите клавишу Enter чтобы завершить трансформацию.

Нажатие значка «Maintain Aspect Ratio» позволяет нам быть уверенными в том, что изображение трансформируется одинаково со всех сторон.

Значок Maintain Aspect Ratio

После трансформации, слой «corckboard»  может «съехать». Воспользуйтесь Move Tool (Клавиша V) и перетащите слой так, чтобы он занимал всю площадь документа.

Промежуточный результат

Шаг 6 – Создание пола и корректирование текстуры «corckboard».

На слое «corkboard» создайте выделение длинной 500px и высотой 230px,  начиная сверху.

Выделение на слое corckboard

Нажмите кнопку «Add Layer Mask» в списке слоев. Это создаст маску для слоя и откроет не выделенную выделенную область.

Применение маски слоя

С сочетании с полом текстура слоя «corckboard»  выглядит немного перенысыщенной. Это можно исправить с помощью настройки слоя.

Выделите слой «corckboard» и нажмите на значок «Create new fill abjustment layer» и в выпадающем списке выберите «HueSaturation«.

HueSaturation

В настройках введните значения Hue: -6 Saturation: – 7 и Lightness: -8.

Чтобы наши корректировки цвета влияли только на слой «corckboard«, в настройках «HueSaturation» нажмите на иконку с двумя пересекающимися кружочками.

Если вы все сделали правильно, то возле корректирующего слоя в списке слоев – появится стрелочка, а слой «corckboard» станет подчеркнутым.

Результат применения настроек HueSaturation

Шаг 7 – Добавление тени под текстуру.

Создайте новый слой над слоем «floor_color» и назовите его «corck_shadow«. (Кнопка создания нового слоя отмечена красной стрелкой на рисунке ниже).

Кнопка создания нового слоя

На слое corck_shadow создайте новое прямогульное выделения (Клавиша M) длина выделения 500px, высота 10px.

Переместите выделение под конец слоя «corckboard» (Выделение можно перемещать зажав клавишу Space).

Измените цвет foreground color на черный, просто нажав клавишу D (сбросить цвета).

Выберите Gradinet Tools ( G ) – в настройках Gradient Tool выберите линейный градиент от черного к прозрачному.

Настройка градиента

На слое «corck_shadow» не снимая выделения, примените Gradient Tool, проведя линию сверху вниз. (При проведении градиента удерживайте клавишу Shift чтобы создать идеально ровный градиент).

После того, как вы зкончите с Gradient Tool, нажмите сочетание клавиш Ctrl+D (снять выделение).

Применение градиента

Установите прозрачность слоя «corck_shadow» на 60%. Вы можете уменьшить прозрачность слоя, выделив его в списке слоев и поменяв параметр Opacity.

Прозрачность слоя

Шаг 8 – Добавление отсвета к текстуре.

Дублируйте слой «corck_shadow«. Чтобы дублировать слой, выберите нужный вам слой и нажмите сочетание клавиш Ctrl+J (Дублировать слой).

Получившийся слой перетащите в самых верх в списке слоев. Переименуйте получившийся слой в «lip«.

Получившийся слой "lip"

Выберите слой «lip» и нажмите сочетание клавиш Ctrl+I (Инвентировать цвета) у вас должен получиться белый градиент.

Вид слоя lip

Отразите слой по вертикали. Выберите в меню Edit>Transform>Flip vertical.

Edit>Transform>Flip Vertical

Перетащите слой «lip» на 9px выше (чтобы перетащить слой на 9px выше, просто нажмите 9 раз сочетание клавиш Ctrl+Стрелка вверх).

Установите вид смешивания слоя на «Overlay» и прозрачность слоя на 50%.

Промежуточный результат

Шаг 9 – Добавление тени полу.

Создайте новый слой над слоем «floor_color» и назовите его «floor_shadow«.

На слое «floor_shadow» инструментом Gradient Tool создайте ровный (от черного к прозрачному) градиент примерно на три четверти пола.

Установите прозрачность слоя «floor_shadow» на 50 %.

Применение Градиента

Шаг 10 – Добавление текстуры доски.

Теперь мы добавим текстуру доски. Создайте новый слой над слоем «floor_color» и назовите его «floorboards«.

Залейте слой черным цветом.

Слой floorboards

Теперь мы применим Grid Generator Plug-in от Richard Rosenman. На слое «floorboards»  перейдите в меню Filter>Richard Rosenman>Grid Generator.

Настройте плагин, как показано на картинке ниже

Плагин Grid Generator

Вот результат применения Grid Generator.

Промежуточный результат

Шаг 11 – Добавление перспективы и света к полу.

Выберите слой «floorboards» и перейдите в Edit>Transform>Perspective.  Перетяните опорные точки как указано на картинке ниже. Прошу заметить, что опорный точки выходят за пределы рисунка. После того как перетащите опорные точки, нажмите клавишу Enter чтобы завершить трансформацию.

Применение перспективы

Установите тип смешивания слоя «floorboards» на Multiply и уменьшите прозрачность слоя до 30%.

Промежуточный результат

Дублируйте слой «floorboard» (сочетание клавиш Ctrl+J) .

Переименуйте слой в «floorboard_hightlight» .

Переместите слой «floorboard_hightlight» под слой «floorboard«.

Инвентируйте цвета слоя (сочетание клавиш Ctrl+I)

Установите тип смешивания слоя на Overlay и прозрачность слоя 30%.

Сдвиньте слой «floor_hightlight» на 1 px вправо (просто 1 раз нажмите Стрелку вправо).

Промежуточный результат

Шаг 12 – Добавление света к полу.

Создайте новый слой и назовите его «floor_hightlight«.

Установите foreground color на белый цвет (или же просто нажмите клавишу X).

Выберите Gradient Tool. В настройках Gradient Tool установите градиент от белого к прозрачному и кликните на значок Radial Gradient.

Применение радиального градиента

Создайте градиент от центра до верха изображения, как показано на рисунке ниже.

Применение радиального градиента

Нажмите сочетание клавиш Ctrl+T и переместите опорные точки как показано на рисунке ниже. (При перемещении боковой опорной точки удерживайте зажатыми кнопки Shift+Alt это позволит трансформировать слой одинакого с двух сторон).

Трансформация градиента

Переместисте слой «floor_hightlight» в списке слоев над слоем «floorshadow«.

Установите тип смешивания слоя на Overlay и  прозрачность слоя 50%.

Промежуточный результат

Шаг 12 – Создаем «потолок».

Создайте новый слой и переименуйте его в «light_housing«.

Перетащите слой на на первое место в списке слоев.

Создайте в самом верху документа прямоугольное выделение (клавиша M) высотой 10px и длиной 500px.

Выберите цвет #17150e и залейте им выделение нажав сочетание клавиш Alt+Backspace.

Промежуточный результат

Теперь добавим тени нашему «потолку». Дублируйте слой lip и переименуйте получившийся слой в «housing_hightlight«.

Переместите слой «housing_hightlight» под слоем «light_housing«.

Используя Move Tool (клавиша V) состыкуйте тень с нашим «потолком».

Уменьшите высоту тени вдвое используя сочетание клавиш Ctrl+T (Трансформация).

Трансформация тени

Шаг 13 –  Доработка тени потолка.

Выберите слой «housing_hightlight» и дублируйте его.

Переименуйте слой в «housing_shadow«.

Инвертируйте цвета с помощью клавиш Ctrl+I

Отразите слой по вертикали (Edit>Transform>Flip Vertical).

Сдвиньте слой на 1px вниз (Нажмите 1 раз стрелку вниз).

Установите прозрачность слоя 80%.

Промежуточный результат

Шаг 14 – Создаем свет.

Запустите скаченый IES Generator.  Нажмите кнопку Load и загрузите скаченый файл 1589835-nice.IES.  (Впринципе вы можете попробовать создать свет сами и получить другой результат, порядок действий никак не изменится, если вы будете использовать свой варианта света).

IES Generator

Установите значения в настройках Brightness: 1.11 и Away from wall: 1.11

Настройки IES Generator

Шаг 15 – Обрабатываем свет в фотошопе.

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

Сделайте скриншот рабочего стола.

Создайте или откройте уже существующий документ в Photoshop.

Нажмите сочетание клавиш Ctrl+V чтобы вставить скриншот.

Вставляем скриншот

Выделите область со светом, как показано на рисунке.

Выделение области света

Перейдите Select>Inverce – чтобы инвертировать выделение.

Залейте получившееся выделение черным цветом.

Промежуточный результат

Шаг 16 – Обтравка света и перенос его в нашу работу.

На слое с нашим светом, перейдите в Filter>Cybia>Alphaworks и в настройках в выпадающем меню выберите LINEAR BlackOut – remove from BW lineart. Нажмите ОК.

Результат выполнения фильтра

Нажмите сочетание клавиш Crl+A (Выделить все) и копируйте слой в наш документ «main_layout.psd«.

Переименуйте получишвийся слой в «ies_light«.

Переместите слой «ies_light» под слоем «lip«.

Промежуточный результат

Переместите наш свет на 6px выше нашего «потолка» (Переместите свет к началу потолка и нажмите 6 раз стрелку вверх).

Установите режим смешивания слоя на Overlay.

Шаг 17 – Усиление света.

Дублируйте слой «ies_light» 2 раза.

Установите прозрачность верхней копии «ies_light copy 2» на 50%.

Вид слоев

Выделите в списке слоев 3 слоя «ies_light«, «ies_light copy» и «ies_light copy 2«.

Нажмите сочетание клавиш Ctrl+G (Сгруппировать слои) в диалоговом окне введите называние группы Light.

На рисунке ниже показан порядок действий для группировки слоев.

Порядок действий

Сгруппированные слои

Шаг 18 – Создаем объем света.

Выделите все слои в группе «Light» и снова сгруппируйте их. Переименовывать группу не нужно.

Новая группа

Выберите все слои в группе «Groupe 1» и добавте к ним маску, маска должна появится перед названием группы.

Маска для группы слоев

Создайте градиент как описано в шаге 6 и примените его примерно как показано на рисунке ниже.

Применение градиента к группе

Шаг 19 – Добавляем отсвет к полу.

Сверните группу «Gropue 1«.

Дублируйте слой «»floor_hightlight» (выделить слой и нажать Ctrl+J).

Добавте получившийся слой «floor_hightlight copy»  в грппу «Light» (Просто перетяните в списке слоев, слой «floor_hightlight copy» на название группы «light«).

Перенос слоя в группу

Трансформируйте слой «floor_highlight copy» примерно на 50% своей текущей ширины.

Переименуйте слов «floor_highlight copy» в «spot«.

Установите прозрачность слоя на 70%.

Трансформация слоя spot

Шаг 20 –  Дублируем свет.

Сверните группу «Light» и перетащите ее на иконку создания нового слоя в самом низу списка слоев.

Дублирование слоя

Дубликат группы «Light» должен появится выше оригинальной группы.

Повторите процедуру еще раз и создайте еще один дубликат группы. В итоге у вас должно получиться 3 группы «light«, «light copy» и «light copy 2«.

Промежуточный результат

Шаг 21 – Распределяем свет.

Выберите группу «light copy 2» и переместите ее на 140px влево (Зажмите клавишу Shift и нажмите 14 раз стрелку влево (удержание клавиши Shift позволяет передвигать слои на 10px при одном нажатии)).

Повторите процедуру с группой «light_copy» только теперь переместите слои вправо.

Перемещение слоев

Переименуйте получившиеся группы. «light» в «light center«, «light_copy» в «light_right» и «light_copy2» в «light_right«.

Промежуточный результат

Шаг 22 – Добавляем отсвет к потолку.

Выделите наши 3 группы и дублируйте их (перетяните на значок создания нового слоя).

Выделите получившиеся 3 группы и нажмите сочетание клавиш Ctrl+E - все 3 дублированные группы превратятся в 1 слой.

Переместите получившийся слой в списке слоев над слоем «housing_shadow«.

Переименуйте слой в «spill«.

Перейдите в Edit>Transform>Flip Vertical (отразите слой по вертикали).

Отражение слоя по вертикали

Поднимите слой на 230px выше (зажмите клавишу shift и нажмите стрелку вверх 23 раза).

Перемещение слоя

Создайте прямоугольное выделение шириной 500px и высотой 10px. Выделение должно совпадать с нашим «потолком».

Создайте маску для слоя «spill» – это ограничит его распространение по нашему рисунку.

Установите режим смешивая слоя на Overlay.

Маска слоя spill

Шаг 23 – Акцентрируем свет (необязательный шаг).

Теперь мы затемним области стены между нашими источниками света, это придаст акцентрированости свету.

В списке слоев выберите слой «lip» и создайте под ним новый слой.

Переименуйте новый слой в «top_shadow«.

Выберите Gradient tool от черного к прозрачному цвету и примените градиент примерно как показано на рисунке ниже.

Применение градиента к слою top_shadow

Вновь дублируйте 3 группы как описано в шагах выше и «склейте» их между собой т.е. приведите к одному слою (эту процедуру мы уже выполняли).

Зажмите клавишу Ctrl и нажмите на получившемся слое, тем самым мы выделили наш слой.

Перейдите в Select>Inverce и инвертируйте выделение.

Не снимая выделения, в списке слоев выберите слой «top_shadow«.

Создайте маску слоя.

В результате маска слоя должна быть, как показано на рисунке ниже.

Маска слоя top_shadow

Удалите слой который мы получили от «склейки» групп, он нам больше не понадобится.

Шаг 24 – Добавляем текст (Финальный шаг).

Теперь вы можете добавить свой текст по вкусу .

Автор использовал 2 шрифта Arista 2.0 light и  DIN Mittelschrift (оба шрифта можно скачать в свободном доступе).

Переместите ваши слои с текстом в самых верх списка слоев.

Слои с текстом

Примените к слоям следующие стили. (Чтобы настроить стиль слоя, просто дважды кликните на нужном вам слое.)

Применение стилей к слою

Автор использовал следующие стили

Drop shadow:

Drop shadow

Inner shadow:

Inner shadow

Color overlay:

Color Overlay

Финальный результат автора :

Финальный результат

Собственно ссылка на оригинал урока –  How to Create a Realistic IES Lighting Effect in Photoshop

Фуф, вот и перевел (ушло на перевод 2 дня), извиняюсь за косяки в переводе т.к. переводил не слово в слово, а просто описывал порядок действий. Если понравился урок, напишите в комментах «спасибо» – лучшая награда для меня за проделанный труд. Если есть вопросы по уроку – спрашивайте, с удовольствием отвечу.