Берем лист А4, сгибаем угол, как это принято у иконок, и фотографируем на телефон, на темном фоне, так потом будет проще вырезать.

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

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

Все готово, остается добавить мелочи — тень и зажим с обозначением формата файла.

Придумываем идею и композицию. При разработке не забываем про минимальную ширину сайта 1000 пикселей, и что он тянется на 100%. Т. е. фон нужно будет тянуть слева и справа.

Рисуем не клипартные текстуры для карт и фишек

Создаем 3д модель

У сырого рендера корректируем цвет, создаем неоднородность фона, добавляем цвета

Чтобы иллюстрация не смотрелась пустой, добавляем «мусор» в виде конфетти и огоньков. Последний штрих — добавляем блик

Краткое описание работы

С помощью JavaScript мы проверяем, доскроллил ли пользователь до конца страницы. Если да, то отправляем AJAX запрос PHP скрипту, который отдаем нам нужные посты. При этом будем передавать доп. параметры, например: количество постов, номер страницы, смещение и прочее.

JQuery

Начнем с JQuery. Скачайте скрипт, если у вас его еще нет. Подключаем JQuery в шапку блога. Для этого редактируем файл header.php.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>

У нас используется такой путь. Файл jquery.js должен лежать в одной папкой с темой блога.

Теперь переходим к файлу functions.php. Может получится так, что у вас этого файла нет. В этом случае создайте его в папке темы.
В WordPress есть так называемые экшены (actions), которые можно привязать к выполнению какой-либо функции. Нам необходимо добавить наш JavaScript в тег head наших страниц. Начнем с добавления экшена (он может быть расположен после функции) и добавления функции.

<?php
add_filter('wp_head', 'javascript_page');
function javascript_page() {
	global $query_string;
?>
<script type="text/javascript">
	/* Наш код будет размещен здесь */
</script>
<?php
}
?>

Добавляем JavaScript вместо комментария. Объявляем несколько полезных переменных и проверяем не доскроллил ли еще пользователь до конца страницы.

$(document).ready(function() {
	var number = 5; //количество постов
	var offset = 0; //смещение постов
	var page_number = 2; //номер страницы
	var busy = false;
    var loc = '<?php echo $query_string; ?>';
    if(loc==""){
        $(window).bind('scroll', function(e) {
            if($(window).scrollTop() + $(window).height() > $(document).height() - 250 && !busy) {
                busy = true;
                $.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
                    action: 'and_action',
                    off: offset+number,
                    pagenumber: page_number,
                    query_string: '<?php echo $query_string; ?>'
                    }, function(data) {
                        if(data == "") {
                            //больше нет постов
                        }
                        else {
                            offset = offset+number;
                            $('.content').append(data);
                            busy = false;
                            page_number += 1;
                       }
                });
            }
        });
    }
});

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

var loc = '<?php echo $query_string; ?>';
if(loc==""){

У нас в теме только один файл, который выводит все страницы сразу.
В этой строке $(document).height() – 250 можно установить в какой момент вы хотите начинать подгружать новые посты. Например, у нас это 250 px до конца страницы.

PHP

Продолжаем работать в functions.php
Переходим в верхнюю часть файла и добавляем два экшена (один для людей с правами администратора, второй для всех остальных) и функцию для получения новых постов.

add_action('wp_ajax_and_action', 'get_posts_page');
add_action('wp_ajax_nopriv_and_action', 'get_posts_page');

function get_posts_page() {
/* Описание функции будет здесь */
}

Обратите внимание, мы вызываем and_action, который мы ранее отправляли в функции JQuery $.post(). Теперь нам нужно написать функцию, которая выбирает все подходящие посты и выводит их в нашей верстке.
Объявляем глобальную переменную (класс) $wpdb, формируем строку запроса и в цикле выводим все наши посты.

$query_string = $_POST['query_string'];
global $wpdb;
query_posts($query_string . '&posts_per_page=5&post_status=publish&offset='.$_POST['off']);	//получаем посты
if ( have_posts() ) : while ( have_posts() ) : the_post();
/* Вывод постов в цикле */
endwhile; endif;
die();

На место моего комментария в цикл необходимо вставить HTML код вывода поста. Его нужно скопировать из файла index.php
У нас он вот такой:

<div class="post" id="post-<?php the_ID(); ?>">
	<h2 class="storytitle">
		<?php  if (!is_single() && !is_page() ) { echo '<a href="'; the_permalink() ; echo '">';}; the_title();
	if ( !is_single() && !is_page() ) echo '</a>'; ?>
	</h2>
	<em class="date"><?php the_time('j F Y') ?></em>
	<div class="storycontent">
		<?php the_content(); ?>

		<div class="feedback">
			<!-- Я убрал отсюда социальные кнопки, чтобы сократить код -->
			<span class="author"><?php the_author() ?></span>
			<?php wp_link_pages(); ?>
			<span class="comment"><?php comments_popup_link(__('0 комментариев'), __('1 комментарий'), __('% комментариев')); ?></span>
		</div>
	</div>
</div>
<?php comments_template( '', true ); ?>

Вот и все.

Скачать

Скачать файл functions.php в архиве можно здесь. Демо можно посмотреть на главной странице нашего блога.

Зачем-то мы решили сделать сервис для проверка валидности пластиковых карт. Никаких данных вашей карты мы не сохраняем. Параноики могут заглянуть в исходный код страницы и найти там чистый JavaScript без отправки данных куда-либо. Надеемся, что кому-то это будет полезно и не будет использоваться в незаконных целях.

А еще недавно мы сделали новый сайт по акции. Клиент, в очередной раз, остался очень доволен хорошим сайтом за совсем скромные деньги. Торопитесь, мы не знаем сколько еще продлится все это.

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

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

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

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

Как оказалось, прототипы создавать очень просто, удобно и быстро. Мы выбрали для этого программу Microsoft Expression Blend. О процессе создания простого протипа вы сможете узнать из видео по ссылкам ниже.

Зачем нужно делать прототип? Многие команды разработчиков их не делают вовсе, считая это тратой времени. Даже в 37signals писали о том, что чаще сразу верстать макет начинают, чем тратить время на рисование его в том же Photoshop.

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

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

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

Видео, в котором я попытался кратко (длительностью час) рассказать о том, как мы делаем прототипы. Его можно посмотреть прямо у нас на сайте (173 Мб, 1280х800) во флеш проигрывателе или скачать с Яндекса версию в avi формате (862 Мб, 1280х800. Ну не получилось у меня сделать размер меньше, не по-лу-чи-лось.) и более хорошем качестве.

Некоторая часть информации в видео взята с AGI тренинга Microsoft. Видео не служит учебным пособием по всему Expression Blend. Речь лишь про создание простых прототипов в этой программе.

Некоторые ставят на пустой домен картинку вроде этой. Можно еще любую картинку из этих. Иногда просто надпись «сайт в разработке». Что должна делать и на что способна заглушка, когда речь идет о нормальном сайте?

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

За последние две недели нам пришлось делать сразу две заглушки: для сайта он-лайн покера и химического завода. Сначала про покер.

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

А справа и слева как-будто сидят какие-то мужчины и «курят» карты (судя по мастям в дыме).

На заглушке для химического завода уже сложнее также явно показать, чем они занимаются, поэтому пришлось это описать.

Название, контакты, краткое описание продукции и/или услуг компании — все это на сайте есть. Кроме того, небольшая игра с молекулами. Кликая на шарики их можно соединять. Была идея сделать это все немного интереснее, но реакция Internet Explorer версий 6-8 и FireFox на такие штуки заставила нас остановиться.

Вся анимация на страницах сделана с помощью волшебной библиотеки Raphael.js. Техническая реализация достаточно проста и описывать ее тут нет смысла.

Только, молю, не спрашивайте, почему карты в скрипте не сделаны в виде массива.

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

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

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

Дизайн сайта — это организация и подача материала на страницах сайта, а продуманная структура поможет донести до посетителей эти материалы как можно лучше.

Для создания схем мы используем программу XMind.