Покритикуйте дизайн

Опубликовано cross в Общее      10 комментов

Июнь
9

Нарисовал новый дизайн, для обновления сайта Профессионального фотографа Yurmary и по совместительству моей любимой девушки Прошу критики!

Deadline – ключ к развитию профессионализма

Опубликовано cross в Итоги, Общее, Разработка сайтов      3 комментов

Июнь
4

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

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

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

Уведомьте клиента

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

Определите, что стало корнем проблем

Довольно неоднозначный момент состоит в том, чтобы правильно определить для себя, что стало корнем проблем и правильно показать и объяснить это клиенту. Есть ситуации в которых вина напрямую зависит от вас, есть ситуации, где Вы виноваты лишь косвенно. Я встречался с разными проблемами:  отсутсвтвие или некомпетентность разработчика, невыполнимые задачи по разработке проекта для отсутствующего на руках iPhone или Android, тяжелые для верстки и разработки приложения под IE или маковские версии браузеров и тд и тп.

Создайте план действий

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

Не позвольте этому случиться опять

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

Верстка кнопок с помощью Sprite техники

Опубликовано cross в Дизайн и юзабилити, Общее, Разработка сайтов      3 комментов

Июнь
3

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

Есть замечательная техника верстки подобных задач, которая уже не раз описана в основном на многих иностранных блогах и сайтах. Вот мой перевод подобной статьи: How to Build a Simple Button with CSS Image Sprites.

Кнопка - это один из самых обычных элементов в вебе. В современном дизайне кнопки используются не только на формах, но и для визуальной помощи в привличении внимания к важным элементам на странице. Давайте посмотрим на построение простой кнопки использую технику CSS sprites, начиная с работы в Photoshop и заканчивая законченным кодом. Это хороший пример, для всех кто только начал изучать CSS!

Кнопка будет создана в традиционном стиле используя утонченные градиенты и обводку чтобы придать впечатление округленности, трехмерости объекта ожидающего клика пальца. У кнопки будет три положения: нажата, поднята и наведение придающее визуализацию полунажатия на элемента для реалистичности.

Начало работы в Photoshop, возьмите Rounded Rectange Tool, сделайте большой радиус и нарисуйте на канвасе объект.

Двойной клик на слое, чтобы открыть окно Layer Styles. Добавляем Gradient Overlay, настраиваем цвета по вертикали через всю кнопку от #a8a8a8 до #ffffff.

Далее, добавляем обводку кнопке, используя 5px ширину и цвет #cbcbcb.

Для внутренней обводки, делаем Inner Glow, меняя настройки на Normal / #c2c2c2 / 100% Choke / 3px.

Вводим текст команды кнопки и устанавливаем соответствующий шрифт. Располагаем тект по центру.

Для текст открывает Layer Styles окошко и добавляем Gradient Overlay от #9a9a9a до #7c7c7c.

Чтобы придать видимость гравировки, добавляем Inner Shadow с найтройками 21% Opacity / 2px Distance / 3px.

Теперь добавляем небольшой световой эффект используя Drop Shadow. Меняем настройки на Normal / #ffffff / 33% Opacity / 2px Distance / 1px.

Выбираем слои кнопки и текста и тянем вертикально внизу удерживая Alt и Shift чтобы создать дубликат. Размещаем новые слои точно по нижней границе оригинала. Добавляем обводке нового слоя чуть более темный тон.

Создаем 3ий дубликат, и на этот раз меняем Gradient Overlay - реверс направлению градиента делает иллюзию что кнопка была нажата.

Три состояния кнопки готовы для экспорта. Каждое изображение имеет различия, которые будут видны  по средствам кодинга в CSS.

Нарисуйте выделение вокруг кнопок, спрячьте бекграунд и сделайте Save for Web. Выбирете PNG24 чтобы сработала прозрачность.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>
<style type="text/css">
* { margin: 0; padding: 0; /* Quick and Dirty Reset */ }
body {
	background: url(bg-repeat.png);
}
#demo {
	width: 433px; margin: 100px auto;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>

Открывайте Ваш любимый редактор и создавайте небольшой XHTML документ.

<p><a href="#" class="press-it-btn">Press it</a></p>

Напишите код HTML для кнопки. Мы будем использовать обычную ссылку с текстом Press it, так как мы использовали ее в дизайне. Так как a это инлайн тег мы вложим его в тег p, и дадим ему класс, чтобы легче было работать в CSS.

#demo p a.press-it-btn {
	display: block;
	width: 433px; height: 174px;
	background-image: url(button-sprite.png);
	background-position: top;
	text-indent: -9999px;
}

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

#demo p a.press-it-btn:hover {
	background-position: center;
}
#demo p a.press-it-btn:active {
	background-position: bottom;
}

Задаем псевдо-классы для ссылки. Меняем позицию на центр при наведении и на низ для активного состояния кнопки. Это изменит вид кнопки при наведении мышки и клике. Попробуйте это в браузере.

a { outline: none; }

Все?! Страшная линия точками вокруг мышки на клике? Иногда браузеры добавляют свои собственные фичи, но они портят дизайн. Это легко может быть исправлено убирая outline. Но оставлять так нельзя, поскольку это оплошность в доступности элемента(через клавиатуру), потому не забываем следущий шаг.

#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus

Так как мы убрали outline, навигация по клавиатуре не будет видна. Мы можем добавть собственную подстветку добавляя псевдо-классы CSS, например добавив точно такой же эффект как и при наведении.

Вот и все, надеюсь данный урок будет полезен для Вас. Я для себя нашел новым работу с outline.