Веб-дизайн

индекс
119,88
6 октября 2010 в 23:16

Блокнот для веб-дизайнера

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

image

Можно скачать pdf и можно заказать
+41
2835
130
mrjj 49,9
30 сентября 2010 в 10:37

Цвета в web-дизайне: Выбор правильного сочетания для вашего сайта из песочницы

Цвета в web-дизайнеЦвет, безусловно, является важным источником эмоции. Цвета могут устанавливать правильный тон и передавать необходимые эмоции посетителям, могут взволновать, вызвать множество чувств и стимулировать к действиям. Он является чрезвычайно мощным фактором воздействия на пользователей.
+95
44715
452
Loner 4,0
17 сентября 2010 в 15:07

Маленький анализ тенденций в оформлении кнопок «Add To Cart» («Положить в корзину») перевод

В 2007 году, сайт «Get Elasic» опубликовал интересную подборку кнопок «Положить в корзину» из различных интернет-магазинов, сопроводив это некоторым анализом надписей и внешнего вида кнопок. Я решил, что будет полезным освежить эту тему. Было собрано более двухсот кнопок «Положить в корзину», в том числе с сайтов самых популярных онлайновых продавцов.
+43
2060
68
uggallery 11,7
9 сентября 2010 в 15:23

Динозавры vs. Тараканы перевод

Динозавры были королями и королевами этой планеты. Кроме друг друга никто не вставал у них на пути. Они были разных форм и размеров. Одни питались растениями, другие — мясом. Они были сложными существами, и каждый из них был уникален по-своему.
20 мая 2010 в 23:19

О правильном распределении и наименовании слоёв в Adobe Photoshop

+65
1914
140
FUEL 29,8
19 мая 2010 в 14:40

Новая клавиатура Гугла: epic fail или шутка?

Мне действительно интересно, чем руководствовался Гугл, делая в поисковике вот такую клавиатуру для российского пользователя:
google russian virtual keyboard
(символы по нажатию Alt+Ctrl)
Это такой жёсткий стёб?

И ещё.
1) Почему виртуальная клавиатура не умеет набирать английские символы?
1) Почему вне зависимости от национального домена (.ru, .jp,..) можно набирать только «родные» символы? Искать на других языках (что, по идее, и должна делать эта клавиатура), она не позволяет. А символы, соответствующие моей локали, и так есть на моей «железной» клавиатуре.
2) Зачем поисковику, который не учитывает регистр символов, виртуальные кнопки смены регистра (Caps/Shift)?

Надеюсь, эти вопросы не риторические.

Внимание: теперь в дискуссии участвует разработчик клавиатуры.
+53
2183
8
mt_ 76,9
17 апреля 2010 в 16:59

Что, если «Оскары» вручались бы сайтам? перевод

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

image

Большинство современных киносайтов сделаны во Flash’е, даже если это совсем не оправдано. При создании сайтов часто не соблюдаются стандарты и требования по переходу со сплэш-страниц и доступу к контенту. Разработчики позволяют себе такую роскошь, как пренебрежение общими принципами и юзабилити-стандартами, поскольку основная задача — привлечь внимание к фильму и помочь его раскрутить. Предположим, однако, что эти разработчики получили своих «Оскаров», «Медведей» и «Пальмовые ветви». Не будет ли это мощным стимулом к созданию ярких и удобных сайтов?

+78
885
84
nobr 26,5
31 марта 2010 в 01:37

Обязательные поля при регистрации

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

В голову пришли следующие варианты:

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

1 поле: email
Пользователь оставляет email, id создается автоматически, на email он получает пароль, авторизация либо по ID либо по email, username задается пользователем уже в профиле

+ Черт, это все таки одно поле! По умолчанию может быть сгенерен устойчивый к перебору пароль.
± username свободно меняются, и могут оставаться пустыми. Учитывать пользователей по айдишникам мне не хочется
— ЧПУ приобретают вид ufosite.nl/users/18567/, скорее всего пользователь захочет сменить свой пароль. При ЧПУ вида ufosite.nl/users/customusername/ наступает ад для поисковиков. Строить ЧПУ на основе email, который, к тому же, далеко не все захотят публиковать — это подарок спамерам и ЧПУ становятся не совсем ЧПУ.

+7
1092
38
mrjj 49,9
30 января 2010 в 20:59

Скажи «Нет!» стоковым клише перевод

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

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

WellDyne-20100104-123103

Изображение не предоставляет никаких сведений относительно характера веб-сайта. Это просто пустышка для того, чтобы заполнить пространство.
+85
1124
84
p1xel 18,0
27 января 2010 в 22:16

В защиту читателей перевод

Лучшие читатели — упрямые читатели. Они обладают почти безграничной настойчивостью, которая заставляет их читать вне зависимости от того, что творится вокруг. Я видела девушку, поглощённую чтением «Дон Кихота» за столиком в шумном баре; я видела типичного Нью-Йоркского читателя, который шёл по улице с книгой в руке; в последние дни мне довелось увидеть многих людей, поглощавших книги с экранов своих iPhone-ов (один из них признался, что прочёл всю трилогию «Властелина Колец», прокручивая текст пальцем). И миллионы из нас читают газеты, журналы и блоги с экранов каждый день — и всё это несмотря на утверждения, что никто больше ничего не читает.

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

Несмотря на то, что в интернете можно найти достаточно «чтива», читатели остаются забытой аудиторией. Большая часть того, что мы говорим о веб-дизайне, вертится вокруг идеи перемещения по странице: о пользователях думают как о тех, кто ищет, рассматривает, прокручивает, проглядывает. Мы измеряем частоту их кликов, но не время, которое они провели на нашей странице. Мы беспокоимся об их движении и об участии — о том, как они перемещаются с одной страницы на другую, с кем они говорят, когда приходят туда-то, — но забываем о тех, кто ищет спокойствия. Чтение процветает там, где есть пространство — то есть чуть вдали от гула толпы, и для нас, веб-дизайнеров, по-прежнему есть где хорошенько поработать, чтобы расчистить такое пространство.
12 января 2010 в 21:10

12 советов по созданию макетов в браузере

перевод статьи: 12 Killer Tips for Designing in the Browser
image

Как Вы создаете макет сайта?

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

Основная идея


Meagan Fisher на 24ways.org представил неотразимый довод проектирования в браузере. Хотя я и не разделяю его презрение к Фотошопу (Я люблю Фотошоп больше любого другого ПО на планете), я согласен с некоторыми другими его пунктами. Фишер говорит, что статическое изображение не дает по настоящему ощутить, как сайт будет работать и что проектирование в браузере направляет твои силы на организацию контента до дизайна, что гарантирует большее удобство и создание правильной структуры

Мы будем использовать статью Фишера как затравку для наших заметок по превращению в профессионала в создании фантастических in-browser макетов готовых к работе сразу по получению одобрения от клиента.

+31
1822
198
alspec 41,1
28 декабря 2009 в 12:37

Тренинг Павла Колодяжного в Питере

10 января 2010 г. впервые в Петербурге арт-директор дизайн-бюро «make» Павел Колодяжный проведет тренинг «Модульные сетки: готовим и подаем к столу».

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

Кроме дизайнеров, тренинг может быть интересен руководителям студий дизайна, заинтересованных в увеличении знаний, опыта и выразительных средств своих сотрудников.
+6
186
4
CrazyGirl 28,0
26 декабря 2009 в 19:23

PastryKit: средство разработки сайтов для iPhone, написанное в Apple

Обратите внимание вот на какую картинку:

[пример web-приложения PastryKit]

На экране этого iPhone вы видите приложение, которое выглядит как обычное приложение; тем не менее оно запущено через Интернет, оно является сайтом, который просматривается в мобильной версии браузера Safari. Этот эффект достигается использованием библиотеки PastryKit, разработанной в Apple: библиотека отключает адресную строку Safari, библиотека обеспечивает фиксированное позиционирование панелей инструментов, библиотека даже заменяет способ прокрутки сайтов Safari, добавляя к нему такое «сохранение импульса», которое свойственно именно приложениям iPhone, а не сайтам Safari.

Библиотека PastryKit состоит из CSS и джаваскриптов. Она используется в «iPhone User Guide», а также, до некоторой степени, в LP-файлах iTunes, но ещё не очень ясно, собирается ли Apple пропагандировать и документировать использование PastryKit; блоггер и разработчик Джон Грубер (John Gruber; это тот самый, который придумал язык разметки Markdown) сравнительно случайно обнаружил библиотеку PastryKit на сайте Apple и дал знать о её существовании другим заинтересованным разработчикам.

Подробнее обо всём этом вы можете прочесть во блоге Ajaxian; там же рассказывается, как и где можно скачать и подключить PastryKit.
+14
232
59
Mithgol 21,4
18 декабря 2009 в 12:15

Клиент не всегда прав или опять про дизайн…

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

В частности, хочу поговорить о разработке дизайнов и конкретно о дизайне сайта. Всем известно, что процесс это тонкий, и иногда превращается в сущий ад.

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

+1
1841
29
SECL 96,0
15 декабря 2009 в 12:56

С днём рождения Эсперанто!

Сегодня, в честь 150-го дня рождения Лазаря Заменгофа, основателя языка Эсперанто, Google немножко видоизменил свой логотип во многих странах, и в России это тоже не стало исключением.

image

Tio estats tre agrabla kaj tre grava signo, kara kamaradoj!
+11
149
3
30 ноября 2009 в 14:15

Делаем сайт своей компании

Год назад мы с stervec решили сменить работу. Одним октябрьским вечером мы встретились на кухне девятиэтажного дома и начали воспитывать свое новое детище (старое, кстати, не умерло, а просто спит).
Назвались — «Девять утра», а заниматься решили интернет-проектами и делать сайты для клёвых компаний нашего региона (для не клёвых сначала не делали).
Ох, через что нам пришлось пройти и сколько открытий сделать — стыд и позор, но об этом отдельный сказ. Сегодня мы хотим рассказать, в чем была наша основная ошибка.
+36
364
46
Virtim 11,8
27 ноября 2009 в 10:42

Какие вопросы задавать клиентам перед дизайном их сайта? перевод

Перевод свеженького поста «Questions to ask clients before designing their website» Брайана Хоффа, автора блога «The Design Cubicle».

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

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

Некоторые из нижеприведенных вопросов могут быть применены не только для веб-дизайна, так что я разделил их на группы, чтобы клиенту было понятней.
+43
1991
255
mikeAbasov 21,5
25 ноября 2009 в 11:59

Photoshop vs. Fireworks: сжатие перевод

Удивительно, но основываясь на результатах моего недавнего исследования существует немало пользователей Fireworks. Лично я им никогда не пользовался. Обычно, я использую Photoshop при ежедневной работе. Но, знаете ли вы, что Fireworks лучше, чем в Photoshop сжимает изображения? Я не программист, я не могу объяснить, почему Fireworks  сжимает лучше. Но я могу доказать это, показав серию экспериментов, которые я провел.
+22
1932
36
p1xel 18,0
14 ноября 2009 в 21:42

Создаём страницы-«заглушки» для своих сайтов перевод

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

Лучший выход из ситуации — создать простую страницу-«заглушку», которая будет рассказывать посетителям, что здесь, в конечном счёте, появится. Хорошая страница-«заглушка» может быть двух вариантов: информационная страничка, которая просто расскажет, что здесь будет после запуска; или страница, которая предлагает посетителям подписаться на уведомления или оставить запрос на бета (или альфа) тестирование. Ниже вы увидите несколько отличных примеров обоих типов, следуя которым, вы сможете создать свою такую страницу-«заглушку». Разумеется, среди них вы не увидите обычных страниц «В разработке» (с надоевшим дизайном), которых целая куча в сети.
+83
24789
245
AleXSuS 54,1
13 ноября 2009 в 13:03

51 Веб Приложение для Дизайнеров и Разработчиков перевод

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

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

Данная статья представляет 51 веб приложений для дизайнеров и разработчиков.
+71
3394
512
cycero 74,5
31 октября 2009 в 17:43

Картинки делают вашу информацию интереснее

Интересные картинки
Приветствую всех! Я представляю вам свой Первый Пост На Хабре, он является объединяющим симбиозом нескольких постов моего личного блога [Батоноблог], и речь сейчас пойдёт о универсальной вещи, которая поможет увеличить продажи вашего товара, задержать на вашем сайте лишний десяток посетителей, и сделать из сложной многобуквенной статьи простой доходчивый рассказ. Также будут даны описания и адреса хранилищ этих вещей.

А вещь эта называется «Картинка».

В чём суть?


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

+101
4985
411
batonoman 30,0
25 октября 2009 в 21:52

Разница в восприятии сайтов


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

Некоторое время назад, наша компания — www.eye-tracker.ru — провела тест на главной странице русскоязычного сайта известной CMS Друпал – www.drupal.ru Задачей теста было найти ссылку на демо-сайт этой CMS. В качестве испытуемых бралось две группы по 5 человек – «компьютерщики» и «менеджеры». Обе группы не имели отношения к сайтам и не работали с CMS.
+32
465
41
21 октября 2009 в 13:05

Простота в хорошем веб-дизайне перевод

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



Данная статья содержит список нескольких преимуществ простого дизайна сайта, также некоторые легкие методы для упрощения процесса дизайна.
+38
2547
144
cycero 74,5
16 октября 2009 в 19:45

Как сделать сайт более iPhone-совместимым за 5 шагов

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

Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

Шаг 1. Аналог favicon.ico

Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

<link rel="apple-touch-icon" href="res/iphone_icon.png" />

и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:


+75
8356
255
afan 138,7
28 сентября 2009 в 15:31

10 полезных выводов и принципов юзабилити перевод

Каждый согласится, что юзабилити является важным аспектом веб-дизайна. Несмотря на то, работаете ли вы над дизайном сайта портфолио, над он-лайн магазином или веб-приложением, важно сделать страницы удобными и простыми для пользователей. В протяжении последних лет было сделано много исследований о разных аспектах веб-дизайна и дизайна интерфейсов. Результаты этих исследований весьма значимы и помогают нам улучшить качество наших работ. Данная статья содержит 10 полезных выводов и принципов юзабилити, которые помогут вам улучшить впечатления пользователей от ваших сайтов.
+110
3695
308
cycero 74,5