О ВЕБ-ДИЗАЙНЕ ПРОСТО И СО ВКУСОМ!
Вот такие симпатичные гранжевые текстурки можно загрузить на сайте desizntech.info. Каждая картинка размером 3000х2000 пикселей.
И хоть сама я уже практически отошла от этой темы, но мало ли кому может пригодиться. Пользуйтесь на здоровье! Текстурки абсолютно бесплатные и довольно качественные.
Тогда мы идем к вам! :) Есть такой замечательный ресурс uistencils.com, предлагающий всем веб дизайнерам, предпочитающим карандаш и бумагу для предварительных набросков, специальные наборы трафаретов.
В наличие есть стальные трафареты для разработки сайтов и комплекты бумажных заготовок. Причем не только под обычное окно браузера, но и специально для iPhone, iPad и Android.
Ну и специально для суровых разработчиков UI — не менее суровые футболки! :)
Шутки шутками, но я бы не отказалась от такого трафарета. Все-таки наброски на обычном листе бумаги служат хорошим подспорьем, когда обдумываешь очередную идею дизайна. Как вы считаете?
Один из читателей моего блога задал мне вопрос о том, как и чем я собственно работаю, создавая дизайны для сайтов. Я поняла, что нигде сам процесс толком и не описывала. Поэтому спешу исправиться и поделиться опытом :)
Вначале об инструментах. Сколько я не порывалась изучить Illustrator, но, как говорится, воз и ныне там. На изучение нужно время, а его всегда не хватает. Кто-то крикнул про тайм-менеджмент?! Дайте что-нибудь тяжелое, я в него кину! Шутка.
На самом деле не так уж важно, какой графический редактор использовать. Я все рисую в Photoshop и пока мне этого хватает за глаза. Хотя не спорю, некоторые вещи проще сделать в Иллюстраторе, так как там масса готовых инструментов.
Шаблоны для WordPress я верстаю сама. Для этого использую текстовый редактор pspad и Денвер в качестве сервера. Очень удобно на самом деле. Верстка в принципе не такая уж и сложная. Многие вещи в шаблонах однотипны и со временем ты уже легко ориентируешься где там и что.
Ну и, конечно же, браузеры. У меня их 4: Opera, FireFox, Chrome и IE6. Последний не для извращений, а просто потому что он есть в XP по-умолчанию. Правда в последнее время я им практически не смотрю результат. Слишком страшно :)) Особенно когда дело касается png изображений.
На сайте webdesignledger.com опубликован пост Жаклин Томас (Jacqueline Thomas) «Web Design Trends in 2011». Представляю вам не дословный перевод, но выжимку самого интересного и полезного.
Основная тенденция — уход от «красивостей» в сторону все большей функциональности и вовлечения посетителя в процесс. Дизайн призван не ослепить или заворожить, а предложить что-то интересное и полезное. И при этом быть по возможности простым, но не скучным. Во как!
1. Больше CSS3 и HTML5. Медленно, но верно отходим от Flash и все больше используем магию HTML5. Ну и CSS3, конечно же. Все больше предпочтения отдается возможностям CSS3 в плане оформления таких приятных штучек как закругления, тени, полупрозрачности и пр.
2. Простые цветовые схемы. Преимущественно монохромный дизайн. Красный, желтый, зеленый или синий — не суть важно. Важнее контрастно выделить главную часть — контент. Все остальное в приглушенных тонах. Чисто и просто.
3. Мобильность. Тут и к тетке, как говорится, не ходи. Если ваш сайт не готов вступить в мир мобильных устройств, то вы явно не готовы к 2011.
4. Параллакс эффект. Прикольная штуковина. Примеры: romancortes.com, spritely.net. Это чтобы стало понятно, о чем речь. В двух словах: придайте вашему сайту 3D глубину! CSS и jQuery вам в помощь.
5. Дизайн для тачскрина. Если ваша мышь здохнэ! Сладкая нирвана для ревнителей юзабилити: все можно и нужно потрогать и правильно порулить. Долгие годы дизайн не задумываясь творился под мышь. Теперь все по-другому. Мыши нет. Есть жидкий экран, который ко всему прочему можно повернуть и тем самым изменить ориентацию. Может даже лучше отказаться от вертикальной прокрутки в пользу горизонтальной, как это уже стало привычным на смартфонах?
6. Еще раз о глубине. Пятна от чашек с кофе и канцелярский бардак — это уже давно moveton. Объем должен не просто присутствовать, он должен быть интерактивным.
7. Большая фотография в качестве фона. Разумеется, в высоком разрешении и исключительно для подчеркивания тематики сайта. Не доминирует, не раздражает, все в меру, стильно и к месту.
8. Далась вам эта .com! Заиметь красивый домен в этой зоне становится все сложнее. Но на подходе масса новых и весьма занятных доменных зон вроде .me или .us. Не упустите свой шанс!
9. QR или реагируй быстрее! Штрих-код в виде марсианского иероглифа уже не редкость в печатных журналах, наружной рекламе, визитных карточках и пр. Способов применения уже немало: от пиара собственного сайта до отслеживания посетителей. В конце концов, сделайте его своим аватаром! Все больше пользы, нежели в опостылевшей физиономии доктора Хауса. Получить QR можно здесь.
10. Дизайн в миниатюре. Гугль сейчас предоставляет возможность применить специальный инструмент – лупу, которой можно быстро просмотреть миниатюрный вариант вашего сайта. И пусть разобрать там что-либо из текста практически невозможно. Однако «встречают по одежке» еще никто не отменял. Готов ли ваш сайт к этому? Если он сугубо на флэше, то вряд ли.
11. Лайфстрим или будьте живчиком. Актуально в большей степени для блогов, хотя и другим сайтам не помешает. Последние твиты, фото, потоковое видео, социальные статусы и прочее — все на виду. Сайт — не просто архив данных, пусть и свежих, но живое представление вас в сети.
Вот. Как-то так примерно :) Поживем — увидим!
Постовой: Нет вдохновения рисовать иконки? Посмотри здесь бесплатные иконки на любой вкус.
В канун НГ писать о чем-то серьезном или полезном — пустая затея. Головы у людей заняты совсем другим. Если уж и читать, то что-то легкое или веселое. А тут как раз под руку попался интересный сайт на самую что ни на есть животрепесчущую для нас дизайнеров тему: заказчики и их закидоны. Прошу любить и жаловать — Адовые клиенты!
Это сборник перлов, рожденных в муках общения дизайнеров со своими заказчиками и наоборот. Что-то в духе башорга, но только по нашей дизайнерской тематике:
«У нас будут черно-белые приглашения — просто черный текст по белому фону, чтоб дешевле получилось… А скажите, белой краски для фона много уйдет?»
«А у вас шрифты еще есть? А то 5 — маловато…»
«Я тоже занимаюсь дизайном. Работаю в программе ACDSee. А Вы в какой? Фотошоп? Не слышала такой…»
Клиент желает заказать баннер 6х3 метра. Присылает почтой картинку. GIF 3х3 см и официальную заявку, типа… “Прошу изготовить…” и .т.д. Подпись “Зам директора Иванов И.И.”
Пишу ему:
— Я не могу напечатать эту картинку. Нужно другое разрешение.”
Через час получаю гневное письмо:
“Печать плаката разрешаю! Генеральный директор Бубин А.А.”
зачем тебе ТЗ? ты главное делай, делай быстрее. А в перерывах еще один заказик сделаешь…
Заказчик: Сделайте мне пожалуйста картинок на сайт на 5000 руб.
Я: Какие картинки нужны? для какого раздела?
Заказчик: Ну вы же дизайнер, вам видней. Сделайте что бы было красиво…
Автор сайта — Василий, он же дизайнер. Вот что пишет он сам:
Всё это началось много лет назад, когда я сделал сайт для местной фирмы, торгующей брендовыми калошами, а их гендиректор, посовещавшись с секретаршей, женой и любимой морской свинкой, попросил меня сменить шрифт на жирный розовый Comic Sans.
Знакомая ситуация, не правда ли? :) Можно по разному относиться к неадекватным запросам некоторых заказчиков. В любом случае не стоит видеть в них распоследних врагов. Все мы люди, и у каждого в голове свои тараканы. Каждый в чем-то белый и пушистый, а в другом упертый и вредный. Такова селявуха.
С наступающим всех! И пусть у вас все сбудется! :)
Вы уже заметили новый лого Гугла? :) Рождество на носу. Все прихорашиваются и занимаются украшательством сайтов. Бог в помощь! Добавлю тоже несколько своих находок. Все картинки кликабельны.
Рождественские обои на рабочий стол:
Новый год совсем близко. Кто-то еще только задумывается о елке, а кто-то уже вовсю занимается украшением жилища. Привычные всем с детства бумажные снежинки на окнах и гирлянды. Можно просто нарезать нехитрые снежинки, а можно подойти к этому занятию более креативно.
Как, например, художница из Лос Анжелеса Эльза Мора (Elsa Mora). Свои работы она выполняет обычными острыми ножницами. Однако посмотрите, какая тонкая и ажурная техника! Сколько терпения нужно приложить, чтобы сделать такое чудо.
Ник Ла (Nick La) сделал очередную выборку лучшего по его мнению из веб дизайна за 2010 год. В коллекцию попали как личные блоги и портфолио, так и коммерческие сайты. В 2010 году дизайн стал еще более интерактивным. Люди активно используют jQuery и CSS анимацию. Многие дизайнеры стали использовать font face для добавления собственных шрифтов на страницы сайта.
Остальную часть подборки можно посмотреть на сайте автора.
Уроки фотошоп. Halftone — весьма любопытный эффект. Его очень хорошо применять при рисовании постеров или деталей дизайна сайта в ретро стиле. В подробности особо вдаваться не будем. Скажу лишь, что само понятие Halftone чаще используется при печати. Общая идея такова: перевести изображение в набор точек заданного размера. Думаю, из картинки понятно, о чем собственно речь.
В наборе фильтров Фотошоп есть свой Halftone Pattern, но он нам не подходит, так как делает все точки одинакового размера, а это некрасиво. Поступим иначе.
Для начала возьмем подходящую фотографию. Я использовала снимок Зои Дейшенэл (Zooey Deschanel) — одной из моих любимейших актрис. Надеюсь, она не обидится :)
Уроки фотошоп. Если вы увлекаетесь ретро стилем, то хочу предложить вам простой способ изобразить старую страницу с потертыми буквами. Урок очень легкий, но эффектный. Нам понадобится какой-нибудь ретро шрифт, достаточно жирный, чтобы было где нанести потертости. А еще любую гранжевую текстуру старой бумаги. Скачать и то и другое не представляет особой сложности, благо в инете их сейчас полно и все бесплатно.
Приступим. Для начала создадим новый документ с белым фоном. Затем в палитре выберем какой-нибудь пастельный цвет. Например, бледно-желтый #fdffdd. Заливаем этим цветом всю поверхность. Затем добавим нашей основе текстуру холста. Для этого идем Filter – Texture – Texturiser. В выпадающем меню Texture этого фильтра нужно выбрать Canvas. Характер текстуры и направление света выбирайте на свой вкус.
