Всем привет!
Это мой первый блин вклад в историю Хабрахабра! Прошу поддержать :)
Речь пойдёт о навигации и интерфейсах. О самом простом решении облегчить жизнь пользователя любого браузера или интерфейса, использующего вкладки или окна.

PDF, 512Kb — носить в кармане
EPS, 753Kb — вешать на стенку
PY, 4.173 — генерить svg (немного корявый)

С новым годом, Хабранарод!

Добрый день, друзья, хочу поведать вам один секрет, который помогает мне быстро и правильно найти цветовую схему для сайта.Прошу строго не судить, возможно, некоторые из вас знают этот прием, но вот мой друг, не знал, а когда я поведал ему, как легко найти цвета для цветовой схемы сайта – он был поражен простотой решения. Я не претендую на уникальность, либо открытие нового метода, просто я это знаю, и мне это помогает.
Для того чтобы нам создать цветовую схему. Нам понадобится такая хорошая программа, как Adobe Photoshop, причем подойдет практически любая версия. Особых знаний работы с фотошопом для этого т.с. трюка не НАТО, все делается буквально в пару кликов.

Такие фразы как «лучшее — враг хорошего» или «зачем чинить то, что не сломано» просто таки сказочно отображены на следующей иллюстрации. Photoshop. 20 лет назад и сейчас. И дело не только в одной панели инструментов. Вообще весь пользовательский интерфейс Photoshop в основе своей остался практически таким же, как и в 1988 году. Браво, Adobe.



via gizmodo

1. Что такое PNG?
2. PNG vs GIF.
3. PNG vs JPEG.
4. Жизнь после Photoshop'а или сжимаем дальше.
5. Adobe Fireworks или PNG-8 с альфа-каналом.
6. Вердикт.

Осторожно, много картинок! Все кликабельны.

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



Скачать архив с пээсдэшником (49 kb)

UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари

Ссылка от niker
designerstoolbox.com/designresources/elements/

Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/

Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners

Ссылка от 3fonov
Yahoo Design Stencil Kit

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

Товарищ CurlyBrace уже сверстал представленный здесь макет, спасибо ему!

Для начала посмотрите на то, что мы будем стараться сделать:

Прочитал дружный стёб хабрасообщества над девушкой, которая делает сайты за 15 минут в «Метрограде», какое-то время держал себя в руках, а потом не удержал.

Давайте-ка рассмотрим не конкретную девушку за конкретной стойкой, а явление сайтов «за 15 минут», «за 1000 рублей» и т.п. в принципе, с точки зрения жизненного цикла систем и вашей – да, конкретно вашей — жизни.

Незамысловатый обход Network Security в ранних версиях MS систем. Что называется дыркой в дизайне.
Увидел и вспомнил уроки информатики в школе, подобным занимались, вводив преподавателей в ступор.

Почти уже два года назад, когда я еще не учил людей зарабатывать на стартапах, делать быстрые фотомодели, гугл не был еще такой фигней, а веб-толпы не выиграливали у меня 2:0, я создавал сайты. И вот один из клиентов попросил меня сделать что-то такое, от чего все офигели бы для его магазина элитной мебели. Сначала у меня получился вполне заурядный дизайн, который они и не приняли, но вот вторая идея снесла всем голову. За эти два года, я увидел только один сайт, который сделан по такой технологии, хотя она лежит на поверхности, и это была компания уровня Sony (кто именно — забыл.)


Помните, когда в статье про быструю фотомодель вчера, я сказал, что скоро мы будем работать в объемном мире? Думаете, я шутил? Ну что ж ты встал путник — входи, разувайся, я тебе поведаю историю как Сеть перестала быть плоской два года назад…

Всем нам известны кнопки Ok и Cancel, которые используются в диалоговых окнах. При помощи этих двух кнопок пользователь может соглашаться или не соглашаться со следующим действием программы. Однако использование кнопок типа «Да» (Yes) и «Нет» (No) в диалоговых окнах не так удобно для пользователя. Вместо этого лучше использовать глаголы в надписях на кнопках. Я продемонстрирую это на конкретном примере.

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

1. Использование дефисов вместо тире em-dash.



Если вам нужно прервать мысль, то делайте это с помощью символа (alt+0151), а не парой знаков «минус». Это, пожалуй, главный источник раздражения для всех редакторов.

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

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



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

Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт?.. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).



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

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

Сегодня увидел видео, которое меня просто поразило. Систему разрабатывают студенты из University of Washington. Разрабатываемая ими система позволяет вносить автоматические улучшения в фотографии или отдельно взятые кадры из видео. Улучшения просто потрясают воображение. В общем — лучше один раз увидеть, чем сто раз услышать.

Это перевод статьи «Why we skip Photoshop» Джейсона Фрайда (Jason Fried) из 37signals

При разработке UI мы обычно переходим от бумажного наброска сразу к HTML/CSS. Разработку макета в Photoshop мы пропускаем.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

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

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

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

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