Архив рубрики: Дизайн

40 лучших PSD шаблонов сайтов — абсолютно бесплатно

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

Шаблон для бизнес блога «Скачать»

Макет для дизайн блога

PSD Бизнес макет «Скачать»

professional business PSD шаблон

Портфолио «Скачать»

6r wooden portfolio PSD шаблон

Шаблон продажи приложений «Скачать»

Appswizards PSD шаблон

Макет Бизнес решений «Скачать»

bizsolutions PSD шаблон


Гламурный магазин

«Скачать»

shopstar PSD шаблон


Box & Cube

«Скачать»

box and cube PSD шаблон


Business Time

«Скачать»

businesstime PSD шаблон

Celeste Скачать

Celeste PSD шаблон

Corporatix Скачать

corporatix PSD шаблон

Crisp Presentation Скачать

crisp presentation PSD шаблон

Complexity Скачать

Complexity PSD шаблон

Business Company Скачать

busines company PSD шаблон

Creative Studio Скачать

creative studio PSD шаблон

Design Tree Скачать

design tree PSD шаблон

Education Website Скачать

education website PSD шаблон

One Page Portfolio Скачать

One Page Portfolio PSD шаблон

Herbal Treats Скачать

herbal treats PSD шаблон

Insurance Company Скачать

insurance company PSD шаблон

IT Technologies Скачать

it technologies PSD шаблон

Owire Скачать

owire PSD шаблон

Magnifico Скачать

magnifico PSD шаблон

Memostra Скачать

memostra PSD шаблон

Dellifolio Скачать

dellifolio PSD шаблон

Minimalist Website Скачать

minimalist website PSD шаблон

My Resort Скачать

myresort PSD шаблон

Summer of love Скачать

summer of love PSD шаблон

Nature Tour Скачать

NatureTour PSD шаблон

New Fresh Скачать

new fresh PSD шаблон

Open Mint Скачать

OpenMint PSD шаблон

Sifiso Скачать

Sifiso PSD шаблон

Sleeko Скачать

Sleeko PSD шаблон

Dark iPhone Скачать

dark iphone PSD шаблон

Small Cellphone Скачать

small cellphone web PSD шаблон

Yogurt Shoppe Скачать

yogurt shoppe PSD шаблон

Web Source Скачать

WebSource PSD шаблон

Paper Clip Скачать

paper clip PSD шаблон

Smart Investors Скачать

smart investor PSD шаблон

Ecommerce Скачать

ecommerce PSD шаблон

Creative portfolio Скачать

creative portfolio PSD шаблон

Подборка русских шрифтов

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

Public type Sans

Отличный шрифт с поддержкой всех языков народов СССР. Отлично подходит для деловой корреспонденции.

pt sansСкачать шрифт PT Sans

Молот

Новый акцидентный шрифт, который распространяется бесплатно. Автор шрифта — Роман Ершов

Акцидентный шрифт MOLOT

Скачать акцидентный шрифт Molot

Etelka

Шрифт был разработан летом 2005 год. Основной средой применения данного шрифта является корпоративный стиль, дизайн упаковок и электронные публикации.

шрифт elektraСкачать шрифт Etelka

43 Грубейшие ошибки веб-дизайна

Обычно статьи различных авторов описывают 10-15 пунктов ошибок веб-дизайна. В этой статье хочется представить вам 43 таких ошибки. Эти ошибки собраны с различных статей, каждая из которых имеет краткое описание.Грубейшие ошибки

1. Посетитель сайта должен сразу понимать, о чем сайт

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

2. Не упускайте правила написания текстов для контента

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

3. Шрифты должны быть стандартными

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

4. Шрифт должен легко читаться и восприниматься пользователем

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

5. Не делайте выбор за аудиторию вашего сайта

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

6. Не изменяйте пользовательские настройки

Не изменяйте размеры окна браузера посетителей. Это раздражает аудиторию. Сделав это, вы спугнете посетителя своего сайта.

7. Не требуйте регистрации, если она себя не оправдывает

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

8. Посетители сами знают, куда им подписываться

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

9. Используйте Flash там, где не получается обойтись статикой

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

10.Фоновая музыка на фоне сайта — старо как мир

Не используйте автоматическое воспроизведение фоновой музыки на сайте. Это пережитки зарождения Интернет.

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

Если вам необходимо дать что-либо прослушать своим посетителям, дайте им самостоятельно сделать выбор, когда им это сделать. Разместите на сайте кнопки «Play/Pause» и «Stop».

12. Не преувеличивайте с банерами

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

13. Используйте главные страницы

Не используйте «входных» страниц. Чем быстрее посетитель получит доступ к контенту, тем лучше.

14. Размещайте контактную информацию

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

15. Кнопка «Назад» — один из основных принципов юзабилити

Ни в коем случае не лишайте функционала кнопку браузера посетителей «Назад». Для того чтобы не совершить такой ошибки избегайте JavaScript и настроек при которых ссылки открываются в новом окне браузера

16. Мигающий и мерцающий текст – старее не придумаешь…

Эта, по вашему мнению «красота», использовалась еще в 96 году…

17. Откажитесь от URL

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

18. Верстка CSS более функциональна и надежна чем табличная верстка

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

19. Старайтесь, чтобы все страницы сайта были проиндексированы

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

20. По возможности не используйте выпадающих навигационных меню

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

21. Используйте текстовую навигацию

Как вы считаете, если вы сёрфите сайты с отключенной графикой и попадаете на сайт со скриптовой или Flash навигацией, какой будет ваша реакция? А была бы на этом сайте текстовая навигация, все было бы иначе. Да и к тому же текстовая навигация доступна и надежна.

22. Явно указывайте, если вы ссылаетесь на PDF-документ

Не раздражайте посетителей. Не делайте так, чтобы они ждали, пока откроется неизвестный PDF-документ. Если даете ссылку на него — укажите на это.

23. Не ставьте посетителей перед выбором

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

24. Размещая рекламу внутри контента, вы можете потерять посетителя

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

25. Создавайте интуитивно понятную систему навигации

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

26. Не задерживайте посетителей «вступлением»

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

27. Не верстайте сайт в FrontPage и ему подобных редакторах

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

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

При изменениях проверяйте сайт во всех основных браузерах, таких как Internet Explorer, Mozilla Firefox и Opera, так как не все браузеры одинаково воспринимают одни и те же правила.

29. Якоря к ссылкам должны отражать суть

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

30. Не стоит запрещать отображение ссылок в статусной строке браузера

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

31. Не создавайте непонятных ссылок

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

32. Не создавайте видимость ссылки

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

33. Выделяйте ссылки, на которые посетитель уже заходил

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

34. Не отвлекайте посетителей от контента

Как вы знаете, в рекламных баннерах в основном применяются анимированные GIF’ы. Большим их недостатком является то, что они отвлекают посетителей от контента.

35. Прописывайте ALT и TITLE атрибуты для всех изображений на вашем сайте

Это важно для посетителей сайта с отключенной графикой. Да и к тому же даст вам преимущества для продвижения вашего сайта.

36. Цвета не должны быть раздражающими

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

37. Не используйте всплывающие окна (поп-апы)

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

38. Не создавайте ссылки с помощью JavaScript

Ссылки сделанные в JavaScript поисковыми системы не видят. К тому же пользователям они создадут только проблемы, а у некоторых они могут вообще не открываться.

39. Футер должен быть функциональным

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

40. Пользователи не любят длинных Интернет страниц

Большие статьи стоит разбивать на несколько небольших страниц, либо создавать по ним навигацию с помощью якорей.

41. Создавайте сайты с учетом мониторов ваших пользователей

Вы должны помнить, что самое распространенное разрешение мониторов на данный момент составляет 1024х768. Создавайте сайты, учитывая эти данные. Горизонтальный скроллинг – это очень плохо.

42. Тщательно проверяйте свой сайт на наличие речевых, орфографических и грамматических ошибок

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

43. Не используйте капчу

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

Бесплатный набор иконок для разработчиков на тему программирования

Набор бесплатных высококачественных иконок для разработчиков на тематику программирования. Размеры иконок на любой вкус от 32×32 до 512х512px. Иконки новые, их нарисовал — Thomas McGee. У нас вы можете скачать набор иконок абсолютно бесплатно, и использовать их у себя на сайте как вам захочется без каких либо ограничений или запретов.


Скачать иконки

Спасибо Томасу за потраченное время и усилия!

Руководство использования и приминения JPG

JPEG — алгоритм сжатия, который оптимизирован под фотореалистичные изображения,с которыми нам приходиться постоянно сталкиваться. У JPEG нет ограничения на количество цветов ( в отличие, например, от GIF ) и популярен он из-за больших возможностей в выборе сжатия изображений, что дает нам возможность легко управлять уровнем сжатия, для получения более качественного изображения. В этом руководстве, мы обсудим самые важные моменты, которые вам необходимо знать о JPEG.


Краткий обзор JPEG

Список деталей, которые необходимо знать о JPEG:

  • JPEG — алгоритм сжатия изображений без потерь качества, то есть, при сжатии некоторые данные из изображения убираются для сокращения размера файла.
  • JPEG часто обзывают «jay peg»
  • JPEG — акроним от Joint Photographic Experts Group — организация, которая разработала формат JPEG
  • .jpg и .jpeg — являются самыми распространнеными расширениями файлов изображений, которые сжаты с использованием алгоритма JPEG; они одинаковы, разница лишь в том, что система DOS имеет ограничение в 3-символа для расширений файлов. Современные операционные системы распознают как .jpg, так и .jpeg
  • Файлы, которые также используют алгоритм сжатия JPEG — .jpe, .jfif и .jif

Семантика и неоднозначности: JPEG против JFIF/Exif

Большинство людей называют любой формат изображения, который использует алгоритм сжатия JPEG «файлом JPEG». Но, большинство устройств захвата изображений ( например цифровая камера ) и программ редакторов изображений на самом деле создают файлы в формате JFIF или Exif. При любых упоминаниях файлов как «Файл JPEG» или когда в программе говорится о сохранении файла в формате JPEG, нужно понимать, что это файл который только использует алгоритм сжатия JPEG, а на самом деле является файлом JFIF или Exif.

Почему используют JPEG?

JPEG позволяет управлять степенью «потери качества» путем выбора уровня сжатия, что позволяет получить очень маленькие файлы с минимальными потерями качества.
Второе важное преимущество JPEG — хранение полноцветной информации: 24 бита на пиксель ( 16 миллионов цветов ). А GIF, который также очень часто используется в интернете, хранит только 8 битов на пиксель ( 256 цветов ). Способность к хранению полноцветной информации изображения — основное преимущество JPEG для использования его в сжатии изображений, которые имеют яркие цвета и фотореалистичное качество.

Сжатие JPEG

В отличие от формата PNG ( который использует алгоритм сжатия изображений без потерь качества ), JPEG использует метод сжатия с потяреми качества.

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

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

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

Baseline JPEG vs. Progressive JPEG

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

baseline vs progressive JPEG

Лучше использовать Progressive JPEG, потому что он сразу дает пользователю представление о изображении которое будет показано ему вконце. Также, Progressive JPEG повышает производительность при загрузки странички, так как он не проявляется шаг за шагом при загрузке.

Формат JPEG Baseline / Progressive в Photoshop

При использовании опции в Photoshop «Сохранить как…», для сохранения изображения используя метод сжатия JPEG, вы увидите следующие опции сохранения файла:

photoshop format options

  • Baseline: картинка будет загружаться «строка за строкой»
  • Baseline Optimized: То же что и стандартный Baseline, но используя алгоритм кодирования Хаффмана.
  • Progressive: Можно выбрать количество сканов между 3-5, что определить количество фаз, прежде чем будет отображено четкое изображение.

Когда Использовать JPEG

Фотографические изображения, которые богаты цветами — основные «клиенты» для использования алгоритма сжатия JPEG.

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

В каких случаях не использовать JPEG

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

Также не стоит использовать его в файлах с простой цветовой гаммой, например: логотипы, иконки, фавиконки, векторные рисунки; так как используя PNG или GIF в подобных файлах, Вы получите изображения с меньшим размером и лучшим качеством нежели используя JPEG.

jpg vs png gif

Сохранение JPEG в photoshop

Ниже показано сравнение разных уровней сжатия одного и того же изображения.

Сжатие JPEG под микроскопом

На картинке ниже мы можем увидеть микро-отличия увеличенного изображения размером 8x8px от оригинала к худшему качеству:

Возможна ли прозрачность используя JPEG?

В настойщий момент JPEG не поддерживает прозрачность. Если нам необходимо сохранить изображение с прозрачностью, необходимо использовать алгоритм, который поддерживает сохранение прозрачности — PNG или GIF.

Внизу можно увидеть прозрачность JPEG и PNG :

Конкурент JPEG — WebP: новый формат изображений.

WebP — новый формат изображений, который сжимает фотографии без потерь качества, наподобии JPEG. Недавно, Google анонсировал, графический формат WebP ( под названием “weppy” ). Тесты показывают, что, используя этот алгоритм сжатия можно уменьшить размер исходного файла с тем же качеством на 40%. Что дает возможность быстрее обмениваться файлами и снижает загрузку сети.

webp demo
Пока что, большинство браузеров не поддерживают этот формат, поэтому на данном этапе этот алгоритм неэффективен для использования его на просторах интернета. Узнать больше о WebP.

Практические советы по использованию JPEG

  • Используйте Smush.it для дальнейшей оптимизации ваших JPEG изображений; Smush.it — это оптимизатор изображений без потери качества.
  • Для редактирования JPEG файлов без потери качества ( обрезка, вращение), можно использовать Jpegtran.
  • Если нужна альтернатива формату JPEG, то лучшая альтернатива — PNG-24; с использованием алгоритма PNG-24 файл будет иметь больший размер, но зато этот алгоритм использует метод сжатия без потерь качества.
  • Если изображение JPEG было открыто, отредактировано, и снова сохранено, это приведет к дополнительному ухудшению качества изображения. Поэтому, когда вам необходимо редактировать изображение несколько раз, сохраняйте редактируемое изображение в несжатом формате, например TIFF или родном формате ( например .psd для photoshop или .psp для PaintShop Pro).