Дизайн 15-ти сайтов веб-студий: сапожники с сапогами и без

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

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

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

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

Пример дизайна сайта веб-студии

Адрес сайта: http://armexdesign.ru

Читать полностью »

Как существенно ускорить работу в Photoshop

В этой статье я не буду рассказывать о технической стороне вопроса ускорения работы Фотошопа. Сколько должно быть жестких дисков и оперативной памяти мы подробно обсудим как-нибудь потом. На моем рабочем компьютере двухъядерник 1.86 ГГц, 3 ГБ оперативки и 2 винчестера по 250 Гб. Мне это позволяет комфортно работать. Но помимо мощного компьютера очень важно правильно организовать свою работу и не тратить слишком много времени на решение стандартных задач. Предлагаю свой рецепт из 10 основных правил ускорения работы в Фотошопе.

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

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

Осмысленные имена слоев и папок

Читать полностью »

Можно ли переименовывать иконку из формата bmp в формат ico?

В комментариях к своим статьям Как сделать иконку favicon.ico для своего сайта и Как сохранить иконку сайта favicon в Photoshop я столкнулся с распространенным заблуждением, что иконки для сайтов favicon необязательно сохранять в формате ICO. Достаточно сохранить иконку 16×16 в формате BMP, а затем просто изменить расширение изображения с BMP на ICO. И нет мол никакой разницы.

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

Прежде всего я решил сделать новую иконку favicon.ico и сохранить ее в форматах BMP и ICO с помощью Photoshop. Я качестве изображения для иконки сайта я использовал черно-белый рисунок мультяшного персонажа Doodlez:

Персонаж Doodlez

Читать полностью »

Заблуждения о бесплатном дизайне на шаблоне

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

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

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

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

Читать полностью »

С чего начать изучение веб-дизайна

Adobe Photoshop CS3

Пролог

Хотел бы рассказать небольшую историю, которая подойдет как эпиграф к этой статье. Года два назад я искал DVD диск на раскладках. Нужен был сборник дизайнерских программ, в котором, помимо Adobe Photoshop, Adobe Flash, Adobe Dreamweaver и Adobe Illustrator, были бы и CorelDraw, и несколько программ для создания иконок и скриншотов… Лень было искать и скачивать все по отдельности из интернета, а затем записывать на диск.

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

И тут парень засиял. С чувством собственного достоинства и с высоты своего дизайнерского опыта, он мне объяснил, что профессионалы сайты делают в Дримвивере. А остальные программы нужны для понторезов вроде меня. Он был так счастлив от переполнявших его знаний, что мне даже жаль было его прерывать и сообщать, что HTML-верстка сайта в Dreamweaver’е – это всего лишь один из этапов разработки сайта, далеко не первый и не последний.

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

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

Читать полностью »

Векторная и растровая графика для web

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

Нет идеального графического формата. В то же время важно научиться использовать преимущества того или иного формата для конкретной задачи, минимизируя влияние его недостатков.

Растровые (точечные) изображения

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP. Это привычные нам фотографии, иконки и рисунки, которые состоят из точек (пикселей, растров).

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

При увеличении размера файлов растровой графики теряется четкость изображения, становятся заметными отдельные пиксели, из которых состоит картинка. Самым популярным пакетом для обработки растровой графики является, конечно же, Adobe Photoshop (PSD).

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

Читать полностью »