Flat дизайн (плоский дизайн)

среда, сентября 30, 2015 Nata 0 Comments

Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.


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


Жизнь после Web 2.0

Мы уходим от реалий дизайна web 2.0 в виде закруглённых форм элементов со всевозможными эффектами — 3D, тени, блики и отражения, градиенты, тиснения. Словом всего, что создает глубину и объем. Большие, яркие элементы управления, глянец, применение текстур и прочие подобные способы проявления оригинальности уступают дорогу простому, двумерному представлению визуальных объектов.

Float Design
основные принципы плоского дизайна

Типографика в основе стиля

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

Цветовая палитра плоского дизайна

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

Minimal Monkey
плоский дизайн: цвета

Свободное пространство, большие элементы

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

Плоский дизайн иконок, кнопок, иллюстраций

Кнопки, иконки, значки и иллюстрации также принимают двумерный вид. Они  должны соответствовать заданному стилю на всех страницах сайта, передавать настроение самого сайта и быть легки для понимания любому пользователю.
Подбор цвета для иконок, как и самих иконок – непростая задача. Можно использовать чистые цвета. Стремясь украсить дизайн, нужно подумать и о том, как сделать сайт удобным в пользовании. С одной стороны важно не нарушить стиль, а с другой – необходимо сделать иконки заметными. Посетитель не должен прилагать усилий, отыскивая их. В иллюстрациях стремимся к минимализму, избегая столь популярных прежде 3D эффектов.

We Are Pandr

примеры сайтов с флэт дизайном



Примеры шаблонов сайтов с плоским дизайном Flat UI

Flat дизайн: примеры шаблонов сайтов
примеры шаблонов сайтов с плоским (флет) дизайном
плоский дизайн: примеры шаблонов сайтов
Flat дизайн: примеры шаблонов сайтов



Примеры сайтов в стиле Flat-дизайна

Identityдизайн в стиле флэт
83 Design Collectiveфлэт дизайн: примеры сайтов
Frunaticплоский дизайн: примеры сайтов
The Umbrella GroupFlat дизайн
 Slcl Foundationпримеры флэт дизайна
My Feltпримеры флэт дизайна
BehzadFlat дизайн: пример сайта
Atlantflat дизайн: примеры
Simple as MilkПримеры плоского дизайна
Weranda FamilyПримеры flat дизайна
Kitchen Sink StudiosПримеры flat дизайна
Coffee SurfingПримеры flat дизайна
Sunny7Примеры дизайна: плоское меню
Krivaja HomesПримеры дизайна: плоское меню
Spring SummerПримеры flat дизайна
RIT Rochester Institute of Technologyфлэт дизайн
Snow Birdфлэт дизайн
LEDbowэффектный плоский адаптивный дизайн



Источник:
http://seo-design.net/design/5-basic-flat-design-principles


0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Бриф на создание сайта

среда, сентября 30, 2015 Nata 7 Comments


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

7 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Этапы создания веб-сайта

вторник, сентября 29, 2015 Nata 0 Comments


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

0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Бесплатные адаптивные BootStrap шаблоны

воскресенье, сентября 27, 2015 Nata 1 Comments

Bootstrap — мощный и элегантный, интуитивно понятный фронт-енд фреймворк, разработанный командой Twitter. Это open-source CSS и JavaScript среда разработки современных интернет проектов. Относительно молодая платформа веб-разработки, безусловно заслуживающая изучения, предлагает множество полезных вещей: стили компонентов интерфейса (заголовки, вкладки, навигационные панели…) и HTML-элементов (кнопоки, формы, шрифты…), адаптивные queries, JS-плагины и т.д. Основанный на принципе «Сначала мобильные» (Mobile first), фреймворк изначально был задуман для упрощения и ускорения процесса разработки сайтов. Сегодня BootStrap с размахом используется на веб пространстве рунета. Во многих случаях, темы на бутстрап это идеальный вариант для тех, кого интересуют шаблоны адаптивного дизайна и тех, кому необходимо создать приличный современный сайт с минимальными затратами. Правильно подобранный BootStrap HTML шаблон не разочарует того, кто решил использовать его под коммерческий проект или того, кому нужен простой бутстрап шаблон (…ищущим bootstrap шаблоны бесплатно), так как благодаря легко настраиваемому инструментарию всегда есть возможность для внесения изменений или доработки под свои нужды. Замечательная особенность бутстрап шаблонов в том, что самостоятельно разобраться и осуществить это под силу даже тому, у кого нет большого опыта в программировании и оформлении сайта. К тому же всегда можно натянуть BootStrap на любую CMS, например интегрировав его компоненты в WordPress шаблон. Профессионалов бутсраперов в этом фреймворке привлекает возможность повторно использовать наработки, создавая при этом приличного вида проекты.

В этом посте собраны отобранные бесплатные адаптивные BootStrap HTML шаблоны из различных интернет-источников.


Stylish Portfolio

A stylish Bootstrap portfolio theme.

Creative

A one page creative theme.

Free Business Responsive Bootstrap Template

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


Sprint

Этот шаблон с профессиональной HTML5/CSS3 разметкой можно использоваться для различных сайтов. Наиболее интересна цветовая схема шаблона. Сочетание зеленого, черного и белого цветов, вместе с черно-белыми фотографиями позволят выделиться представленным проектам. Используя зеленый цвет для иконок в разделе сервисов, вы действительно сделаете их и ваши указанные «ОТЛИЧИЯ» заметными. Еще один оригинальный элемент дизайна: светящийся индикатор текущего положения в виде зеленой линии с маленьким шариком. Этот простой шаблон удачно разделен на 5 секций — начиная с галереи, размещенной в пределах «первого экрана» и заканчивая формой контактов.


Progressus – elegant agency/business template

Progressus – привлекательный адаптивный бизнес шаблон, основанный на Bootstrap  – HTML/CSS фреймворке. 7 макетов страниц для основных задач, стильный адаптивный дизайн, выполненный исключительно качественно от начала до конца.


Коллекции

50+ бесплатных адаптивных BootStrap HTML-шаблонов
http://seo-design.net/templates/free-responsive-bootstrap-html-templates

Bootstrap portfolio themes and templates
http://startbootstrap.com/template-categories/portfolios/


1 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Использование условных тегов в Blogger

воскресенье, сентября 27, 2015 Nata 0 Comments

Условные теги позволяют отображать элементы только на определённых веб-страницах, не задействовав весь блог в целом. И в отличии от свойства display: none;, не просто их скрывают, а удаляют из исходного кода.
Для того, чтобы понять что такое условные теги, я приведу простой пример
<b:if cond='погода == дождливая'>
  я остаюсь дома
<b:else/>
  иду гулять
</b:if>
Что можно интерпретировать как: "Если (b:if cond) погода дождливая, то я остаюсь дома, иначе (b:else) иду гулять".

Когда мы вместо равенства указываем !=, то получается наоборот:
<b:if cond='погода != дождливая'>
  я остаюсь дома
<b:else/>
  иду гулять
</b:if>
"Если погода недождливая, то я остаюсь дома, иначе иду гулять".

Может быть как больше ситуаций (несколько раз употребляться b:else), так и только одна:
<b:if cond='погода == дождливая'>
  я остаюсь дома
</b:if>
Обязательно должно присутствовать окончание условия </b:if>.

Наиболее полезные условия Blogger

Для Blogger есть много разных условий, но наиболее интересными является тип групп страниц (data:blog.pageType). Он может принимать пять значений:
  • Cтраницы
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  • Сообщения
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
  • архив
    <b:if cond='data:blog.pageType == "archive"'>
  • 404 ошибка
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  • остальные страницы, в том числе Главная, ярлыки и навигация
    <b:if cond='data:blog.pageType == "index"'>
    • отдельно для ярлыков
      <b:if cond="data:blog.searchLabel" >
    • отдельно для Главной
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
Чтобы задать условие одной конкретной странице используем data:blog.url:
<b:if cond='data:blog.url == "http://адрес_вашей_строницы/"'>
При этом http://адрес_вашей_строницы/ должен быть с доменом .com (см. про региональные домены в Blogger):
http://zarabotokiinternet.blogspot.ru/2011/02/uslovnye-tegi-v-blogger.html
http://zarabotokiinternet.blogspot.com/2011/02/uslovnye-tegi-v-blogger.html
Другие более сложные выражения (+, -, <, >, <=, >= и b:elseif, b:switch, b:case, b:eval и b:with) не так часто имеют место быть, но более функциональны. Если вы справитесь и с ними, то можно смело изучать JavaScript :)

Разный фон на разных страницах

Рассмотрим как сделать фон статистических страниц отличный от основного.
В шаблоне перед </head> добавляем:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
body {
background: url(адрес_изображения); 
}

.body-fauxcolumns .cap-top {
background: transparent;
}

.widget ul li, .widget #ArchiveList ul.flat li {
border-top: none;
}
</style>
</b:if>
Строку .widget ul li, .widget #ArchiveList ul.flat li {border-top: none;} нужно указывать не для всех шаблонов, а только для тех, у кого есть пунктирные линии - разделители в гаджетах.

Как убрать с Главной конкретную страницу в Blogspot

Каждое сообщение имеет свой id. Его можно узнать на странице публикации поста в строке браузера
id сообщения blogger
В шаблоне есть такой участок кода:
<b:includable id='post' var='post'>
........содержание........
</b:includable>
его мы заменяем на
<b:includable id='post' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.id != &quot;1873004851645451173&quot;'>
........содержание........
</b:if>
<b:else/>
........содержание........
</b:if>
</b:includable>
1873004851645451173 - это id из скриншота выше.
Поскольку мы поставили условие data:blog.url == data:blog.homepageUrl, то страница, уйдя с Главной, будет видна по ссылке "Предыдущие". Если определить условие как data:blog.pageType == "index", то мы не увидим сообщение ни на Главной, ни по ссылке "Предыдущие", ни на страницах ярлыка, таких как http://shpargalkablog.ru/search/label/feed. А если — data:blog.pageType != "item", то пост найдём лишь по его адресу, например, http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html.


Источник: http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html

Полезные ссылки:



0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Как стать дизайнером без специального образования?

пятница, сентября 25, 2015 Nata 1 Comments

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


1 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Шаблоны для blogger. Коллекция 2015

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



0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Как использовать шаблон в своем блоге

пятница, сентября 18, 2015 Nata 0 Comments


В интернете можно найти множество дизайнов (шаблонов) для сайтов. Есть шаблоны платные, есть бесплатные, и много попадается шаблонов, достойных внимания. О том, как такие шаблоны использовать в блоге, созданном с использованием технологии blogger, читем в этом посте.

0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.