Что такое готовые решения веб-сайтов и зачем они вам нужны?

Что такое готовые решения для веб-сайтов и зачем они вам нужны?

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

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

Почему стоит выбрать готовое веб-решение?

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

У вас есть любой готовый сайт, который вы покупаете

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

Какие функции включены в сайты под ключ?

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

Преимущества сайтов под ключ

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

Получить помощь Управление вашим сайтом после покупки

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

Вы можете иметь сайт под ключ сегодня с помощью Webpeppers

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

Одни из лучших агентств в России по веб-дизайну

 

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

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

Большое количество сообщества Webpeppers происходит из России. Россия также является седьмым по величине поставщиком заявок, подразумевая, что #SOTD имеют ценность внутри страны.

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

Голодные мальчики

hungryboys.ru
hungryboys.ru

 

Ruformat

 

ruformat.ru
ruformat.ru

Студия Чулакова

 

chulakov.com
chulakov.com

ONY

 

en.ony.ru

Freeger

 

freeger.com
freeger.com

12 Wave Production

 

12wave.com

Zero Interactive Agency

 

www.zero.ru
www.zero.ru

Hot Dot

 

hotdot.pro
hotdot.pro

Madebyvadim

 

madebyvadim.com
madebyvadim.com

Агентство Красного Перца

 

redpr.ru
redpr.ru

Крик Дизайн

 

www.krikdesign.ru
www.krikdesign.ru

Zen Design

 

zendesign.ru
zendesign.ru

СИЛА

s-i-l-a.com
s-i-l-a.com
Как протестировать сайты и приложения React
Как протестировать сайты и приложения React

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

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

  • Описание: описывает суть теста
  • Используйте / Рендер: использует компонент в среде, где он может быть протестирован
  • Дразнящий: создает притворные функции, чтобы вы могли проверить свои предположения

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

01. Начните с библиотеки тестирования React

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

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

npx create-react-app netmag-javascript-testing

02. Решите, что тестировать

Представьте, что у нас есть простой компонент, скажем, кнопка с некоторым состоянием. Какие вещи нужно тестировать в таком компоненте, как этот?

Внешний вид компонента:

Мы не хотим, чтобы что-то неожиданно изменилось после написания нашего компонента. Итак, мы собираемся написать тест снимка, чтобы понять, как он рендерится. Затем, если что-то изменится, мы увидим это быстро без ручного или визуального теста. Это отлично подходит для компонентов, которые состоят из множества более мелких компонентов: вы можете быстро увидеть, когда (и где) его внешний вид был затронут.

Различные ветви, которые делают:

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

Эти функции вызываются как и ожидалось:

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

03. Напишите свой первый тест

(Изображение: © Бен Рид)

Давайте напишем наш первый тест. Создайте новый файл с именем MyComponent.unit.test.js в той же папке, что и компонент. После добавления test.js он будет автоматически выбран библиотекой тестирования. Содержимое этого файла ниже:

import React from ‘react’ import { render } from ‘@testing-library/react’ import MyComponent from ‘./MyComponent’ describe(‘the ’, () => {     // tests go here })

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

Второй аргумент – ваши тесты. описывают () Функция будет запускать все эти тесты один за другим.

 

04. Используйте функцию очистки

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

import { render, cleanup } from ‘@testing-library/react’ ... describe(‘the component should render’, () => {   beforeEach(cleanup) }

05. Написать тест снимка

(Изображение: © Бен Рид)

На этом шаге мы собираемся «смонтировать» наш компонент (или отрендерить его).

describe(‘the component should render’, () => {   beforeEach(cleanup)   it(‘renders with basic props’, () => {     render()   }) }

Этот рендер предоставляет нам доступ ко всем отображаемым свойствам скомпилированного компонента. Это может быть хорошо, чтобы бросить это в console.log () так что вы можете увидеть более четко, что он делает.
Если вы это сделаете, вы увидите, что есть несколько полезных свойств, которыми мы можем воспользоваться здесь. Я собираюсь сделать утверждение (сделать тестируемое объявление) и проверить его, извлекая контейнер. Контейнер «содержит» узлы DOM (весь HTML), связанные с компонентом.
it(‘renders with basic props’, () => {     const { container } = render() })

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

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

06. Тест свойств

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

Добавьте следующий объект в начало вашего файла:

const lightProperties = {     backgroundColour: ‘white’,     textColour: ‘darkblue’ }

Мы определяем свойства объекта и затем используем оператор распространения (три точки, за которыми следует имя объекта: … lightproperties) потому что мы можем передать только один аргумент при рендеринге таким образом. Также полезно посмотреть, какие свойства вы передаете изолированно:

it(‘renders with basic props’, () => {         const { container } = render(       )      expect(container).toMatchSnapshot()     })     it(‘renders with the light version props’, () => {         const { container } = render(                      )         expect(container).toMatchSnapshot()     }) 

07. Тест изменений в пользовательском интерфейсе

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

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

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

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

const modeToggle = () => {     const (mode, setMode) = useState(‘light’)    const toggleTheme = () => {      if (theme === ‘light’) {        setTheme(‘dark’)      } else {        setTheme(‘light’)      }    }     return (                    Toggle mode              ) } 

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

return (            Toggle mode      

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

import { cleanup,            fireEvent,            render  } from ‘@testing-library/react’ 

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

it(‘renders with basic props’, () => {     const { container } = render(   )  expect(container).toMatchSnapshot() }) it(‘renders the light UI on click’, () => {     const { container, getByTestId } = render()     fireEvent.click(getByTestId(‘mode-toggle’))     expect(container).toMatchSnapshot() })

Это здорово: нам не нужно вручную заходить на сайт и осматриваться, затем нажимать кнопку и осматриваться второй раз – во время которого, вы можете признать, вы, вероятно, забудете или пропустите что-то! Теперь мы можем быть уверены, что при одинаковом входном сигнале мы можем ожидать такой же выходной сигнал в нашем компоненте.Когда дело доходит до проверки идентификаторов, мне лично не нравится использовать данная TestID найти что-то в DOM. В конце концов, цель тестов – имитировать то, что делает пользователь, и тестировать, что происходит, когда он это делает. данная TestID Это похоже на читерство – хотя данные, скорее всего, пригодятся вашему инженеру по обеспечению качества (см. раздел «Роль инженеров по обеспечению качества»).Вместо этого мы могли бы использовать getByText () и передать текст нашей кнопки. Этот метод будет более специфичным для поведения.

08. Шутка и шпионская функция

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

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

const getPiValue = jest.fn() it(‘calls the function on click’, () => {     const { container, getByTestId } = render()     fireEvent.click(getByTestId(‘mode-toggle’))     expect(getPiValue).toHaveBeenCalledTimes(1)   ) })

Функция toHaveBeenCalledTimes () является одной из многих вспомогательных функций в библиотеке тестирования, которые позволяют нам

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

09. Начать тестирование приложений React

(Изображение: © React Testing Library)

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

Чтобы узнать больше о том, как протестировать свои компоненты, посетите Библиотека тестирования React или примеры тестирования React, Если вы ищете какие-то курсы, которые помогут вам начать работу, один из них Кент К Доддс (который написал и поддерживает React Testing Library) популярен. Мне также понравился этот материал в «Учебниках повышения уровня», именно он заставил меня начать писать тесты для своего кода.

Является ли Neumorphism действительно модной тенденцией 2020 года?
Является ли Neumorphism действительно модной тенденцией 2020 года?

Все говорят о Neumorphism, горячей новой дизайнерской тенденции, которая появилась из ниоткуда за последние пару месяцев – но действительно ли это все?

Дизайнеры любят хорошую тенденцию, и есть много о Neumorphism, который предполагает, что это может быть большой (люди уже говорят об этом как о потенциальном взгляде на iOS 14), а не упражнение в экспериментальном дизайне. Плоский дизайн и его двоюродный брат, спонсируемый Google, Material Design, уже несколько лет доминируют в дизайне интерфейсов, с тех пор как появилась iOS 7 и бесцеремонно вытеснила прежнюю тенденцию к скейоморфизму.

  • Главные дизайнерские тренды 2020 года

Нейморфизм: макеты

Михал Малевич разработал эти Neumorphic интерфейсы, и они отлично выглядят (Изображение предоставлено: Михал Малевич)

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

Вместо этого, Neumorphism сочетает в себе лучшее из плоского дизайна и скейоморфизма; мы говорим о чистых интерфейсах, учитывая большой успех за счет умного использования светлых и темных участков. Имя было придумано дизайнером UX Джейсоном Келли в комментарии к статье дизайнера пользовательского интерфейса Michal Malewicz, и оно застряло.

Neumorphism: Dribbble

Почти невозможно бродить по Dribbble, не споткнувшись о ассортимент Neumorphic макетов (Изображение предоставлено: Dribbble)

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

Для большинства зрителей Neumorphic кнопки выглядят великолепно; все коренастое и твердое. Но для пользователей с проблемами зрения они не такие горячие; их просто не хватает, чтобы их было легко заметить. И даже для пользователей с видением 20:20, кнопка Neumorphic точно не собирается прыгать со страницы. Если вы хотите привлечь внимание своих пользователей, то Neumorphism не способ сделать это.

В своем последнем выпуске «Нейморфизм» Малевич называет его «зомби тренд ». Он отмечает, что много людей говорят о Нейморфизме, но никто не делает никаких продуктов с ним, и все же он отказывается умирать. Так что, хотя Dribbble полностью заполнен Neumorphic mockupps, а Cult of Mac мечтает о том, чтобы Apple реализовала Neumorphic look for iOS 14, реальных примеров очень мало, чтобы дать нам представление о том, действительно ли это работает или нет.

Нейморфизм: зомби-тренд

Последняя статья Малевича о Нейморфизме предполагает, что он может быть устал от него (Изображение предоставлено: Михал Малевич)

Крис Койер, который разделяет большую часть скептицизма Малевича, нашел этот удобный генератор для создания кнопок Neumorphic в CSS. Поиграйте с ним, и вы быстро увидите проблему: Neumorphic page furniture действительно работает только с приглушенными цветовыми схемами. Увеличьте насыщенность до любой степени, и эффект теряется; это не выглядит для тех, кто любит работать со смелыми тонами.

Neumorphism.io

Поиграйте с Neumorphism.io, и вы быстро заметите его ограничения (Изображение предоставлено: Adam Giebl)

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

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

6 лучших бесплатных инструментов для создания прототипов
6 лучших бесплатных инструментов для создания прототипов

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

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

01. Студия оригами

Бесплатные инструменты для прототипирования: Origami

Origami – инструмент только для Mac, разработанный на Facebook (Изображение предоставлено: Facebook)

Разработанная на Facebook как инструмент для создания и проектирования продуктов, Origami доступна для пользователей Mac бесплатно. Вы должны быть зарегистрированным разработчиком Apple, чтобы начать работу с установленными Xcode и Quartz Composer, но как только вы перепрыгнете через необходимые циклы, вы обнаружите, что начать создавать с Origami легко, благодаря обширной онлайн-документации, учебные пособия и готовые прототипы.

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

02. Интернет-поток

Бесплатные инструменты для создания прототипов: Webflow

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

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

С помощью визуальной CMS вы можете создавать динамические, отзывчивые прототипы без необходимости написания кода, а также поставляется с библиотекой шаблонов и компонентов, которые упрощают создание ваших проектов. Прототипы могут быть подключены к более чем 400 службам, включая Slack, Google Drive и MailChimp, и, если вы застряли, есть множество онлайн-документации, которая поможет вам.

03. Vectr

Бесплатные инструменты для прототипирования: Vectr

Вот инструмент векторного дизайна, который отлично подходит для прототипирования и сбора отзывов (Изображение предоставлено Vectr)

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

Одна действительно полезная функция для совместной работы – это опция обмена ссылками; с этим вы можете отправить ссылку другим, и они смогут наблюдать за вашими изменениями в режиме реального времени и обеспечивать быструю обратную связь. И как только вы закончите, ваш готовый дизайн может быть экспортирован в формате JPG, PNG или SVG.

04. Джастинминд

Бесплатные инструменты для создания прототипов: Justinmind

Бесплатный инструмент для создания каркасов Justinmind дает вам множество возможностей для игры (Изображение предоставлено Justinmind)

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

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

05. Фигма

Бесплатные инструменты для прототипирования: Figma

Бесплатный вариант от Figma великолепен для совместного создания (Изображение предоставлено: Figm)

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

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

06. InVision

Бесплатные инструменты для создания прототипов: InVision

InVision упрощает превращение плоских конструкций в интерактивные прототипы (Изображение предоставлено: Webflow)

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

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

Как сделать сайт: руководство для начинающих
Как сделать сайт: руководство для начинающих

Хотите создать сайт? Ну, WordPress.org – отличная система для использования.

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

Вам все равно придется платить за свое доменное имя и хостинг, но ru.wordpress.org само программное обеспечение, которое вы будете использовать для создания своего сайта, бесплатное. Так что это потенциально более дешевый вариант, чем многие другие разработчики сайтов.

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

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

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

  • У нас есть большой архив тем и плагинов для WordPress которые постоянно обновляются свежими выпусками, мы предоставим скидку 50% и более просто обратитесь к нашей форме связи.

01. Купить доменное имя и хостинг

Домашняя страница Hostgator

Покажем на примере  Hostgator, но другие хосты, если вы в России то идеальным решением станет reg.ru 

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

Вам также необходимо купить доменное имя: веб-адрес, который позволяет людям получить доступ к вашему сайту. (Например, доменное имя сайта, на который вы сейчас смотрите, – creativebloq.com.) Большинство хостинговых компаний продают вам пакет, включающий как хостинг, так и доменное имя, что значительно упрощает задачу.

Если вы не знаете, с чего начать при выборе хостинговой компании, попробуйте лучшие услуги веб-хостинга. Для целей данной статьи мы выбрали случайным образом Hostgator создать наш фиктивный сайт.

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

Это приведет нас к экрану ниже, где нас попросят выбрать доменное имя.

Веб-форма

Выбранное нами доменное имя 99percentmedia.com не было доступно, но 99percentmedia.net было (Изображение предоставлено: Hostgator)

Это может занять некоторое время, так как ваше любимое имя, возможно, было занято, но стоит потратить время на то, чтобы сделать это правильно. У Forbes есть кое-что хорошее советы по выбору доменного имени,

В нашем случае нам повезло. В то время как 99percentmedia.com не был доступен, 99percentmedia.net был. И это было достаточно хорошо для нас.

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

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

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

02. Установите WordPress

Домашняя страница Hostgator

Купив наш хостинг, мы уходим! (Изображение предоставлено: Hostgator)

После проверки мы получаем этот экран (выше), в котором говорится, что HostGator настраивает нашу учетную запись. Через пару минут его заменяет этот экран (ниже).

Экран Hostgator показывает две опции

Совершенно очевидно, что вы хотите левую опцию здесь (Изображение предоставлено: Hostgator)

Нажав на опцию WordPress, вы попадете на экран ниже.

Портал клиентов Hostgator

Нажмите «Установить WordPress» в нижней части правой колонки. (Изображение предоставлено: Hostgator)

Это не супер очевидно, но отсюда, вам нужно нажать на Установить WordPress под Панель управления, Это приведет вас к экрану ниже, где вам нужно ввести некоторые детали. (Вы, вероятно, захотите проигнорировать немного внизу о «Пусть профессионал сделает это за вас».)

Форма Hostgator

Еще одна форма для заполнения, и мы будем готовы (Изображение предоставлено: Hostgator)

Название блога не требует пояснений: это название, которое будет отображаться на главной странице вашего сайта. Оно может совпадать с именем вашего домена, но это не обязательно. Администратор в основном ваше имя пользователя для входа в WordPress. Мы выбрали «администратор», но это может быть ваше имя, ваш псевдоним или что-либо еще, что запоминается.

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

Ура! Теперь вы наконец-то оказались на панели инструментов WordPress, где вы можете начать создавать свой сайт. Примечание: в будущем вы можете прийти сюда в любое время, введя URL своего сайта и «/ wp-admin». В нашем случае это http://99percentmedia.net/wp-admin/.

03. Начните строить свой сайт

Панель инструментов WordPress

Ваша WordPress Dashboard – это то место, где вы создадите свой сайт (Изображение предоставлено: WordPress)

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

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

В левой панели нажмите на настройки а затем выберите Permalinks, Прокрутите вниз, и вы увидите, что Таможенная структура выбран. Вместо этого выберите Название сообщениявыше этого, а затем Сохранить изменения, Это оно!

Панель WordPress

Измените параметр Постоянные ссылки с Пользовательской структуры на Имя публикации (Изображение предоставлено WordPress)

Итак, хотите посмотреть, как выглядит ваш сайт в данный момент? Затем наведите курсор на его имя в верхней части страницы и нажмите Посетить сайт, Прямо сейчас это будет выглядеть примерно так:

Базовый сайт WordPress

Вот как выглядит сайт WordPress в самом простом (Изображение предоставлено: WordPress)

Довольно простой, правда? Теперь пришло время добавить стиль.

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

04. Выберите тему

WordPress.org поставляется с несколькими предустановленными темами, или вы можете найти бесплатные и платные сторонние темы в Интернете. Посмотрите, например, наши списки лучших бесплатных тем WordPress и высококачественных тем портфолио WordPress.

Как только вы найдете понравившуюся тему в Интернете, сначала вам нужно скачать ее в виде zip-файла. Затем на панели инструментов, перейдите к Внешность и нажмите на Темы > Добавить новое > Загрузить тему,

Перейдите к zip-файлу на вашем компьютере, затем нажмите устанавливать, тогда Активировать,

05. Начните настройку

WordPress интерфейс

Наш сайт с темой двадцати семнадцати WordPress (Изображение предоставлено WordPress)

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

Нажимаем на Внешность > Настроить > Заголовок СМИ, Затем мы прокручиваем вниз до Заглавное изображение, Выбрать Добавить новое изображение и поменять образ нашего героя на более подходящий Adobe Stock,

WordPress интерфейс

Добавьте симпатичное изображение, и домашняя страница начинает оживать (Изображение предоставлено WordPress)

Мгновенно, это начинает выглядеть не так, как простой шаблон, а как веб-сайт на заказ.

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

Но каждое путешествие начинается с одного шага, и мы уже в пути. Чтобы помочь вам в следующих шагах, проверьте WordPress собственные уроки, а также наш список лучших учебников WordPress. Удачи!

Альтернативы WordPress

WordPress великолепен, но это не самый простой способ создать сайт. Поэтому, если вам нужен простой вариант или если вы хотите получить быстрый веб-сайт сегодня или завтра, мы рекомендуем потратить дополнительные средства и выбрать одну из платных платформ для создания веб-сайтов, такую ​​как Wix, Squarespace или Shopify,

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

Не хочу тратить Любые Деньги? Затем подумайте, действительно ли веб-сайт вам нужен. Например, если вам нужно место для демонстрации вашей творческой работы в Интернете, то может быть такая платформа, как Dribbble или Behance или, может быть, просто бизнес-страница в Instagram или Facebook делает эту работу так же хорошо? Также обратите внимание, что Adobe Portfolio бесплатно, если вы уже платите за Creative Cloud.

Конечно, мы не можем ответить на эти вопросы: только вы можете. Но они, безусловно, стоит спросить. Потому что в 2020 году не всегда так, что у каждого должен быть свой веб-сайт.

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

Пишите HTML-код быстрее
Пишите HTML-код быстрее

Современные веб-сайты требуют много HTML-кода. Сложные макеты с несколькими различными представлениями и состояниями могут быть трудны для создания с помощью простого текстового редактора. К счастью, существует множество инструментов для генерации HTML, с которыми можно работать. Здесь мы кратко рассмотрим два наиболее популярных инструмента – Emmet и Pug.

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

Генерация HTML на лету

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

    ,

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

    муравей

    Ускорьте свой рабочий процесс HTML и CSS с Emmet (Изображение предоставлено emmet.io)

    Как использовать Эммет

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

    nav>ul>li*3>a.chapter{Chapter $ of 3}

    Emmet обнаружит этот элемент, проанализирует его и затем преобразует элемент в стандартный HTML, как показано ниже. Беглый взгляд на элемент Emmet показывает, что

  • умножается на (* 3) и каждый
  • Экземпляр будет называться Глава, за которым следует соответствующий номер (до 3).Обратите внимание, сколько символов содержит элемент Emmet и сколько содержит стандартный HTML. Даже этот небольшой фрагмент кода демонстрирует, сколько времени можно сэкономить, используя сокращение Emmet.

    Эммет также знает о контексте. Например, если мы редактируем

    скорее всего, мы захотим(это строки) элементы для его заполнения. Все, что нам нужно сделать, это указать, сколько нам нужно.Это всего лишь быстрый пример того, что может сделать Emmet, но доступно гораздо больше вариантов конфигурации. К ним относятся редактирование CSS, создание класса BEM (Block Element Modifier) ​​и даже есть генератор Lorem Ipsum. Используйте мопса для динамического контентаШаг вперед Мопс. Это шаблонный инструмент для HTML. Вы можете писать страницы в формате «.pug», и Pug будет читать этот файл, вставлять в него динамические данные и возвращать стандартный HTML. В следующем примере показано, как написать код на Pug для создания того же HTML-кода, что и в примере с Emmet (выше).Файл Pug использует только отступ для обозначения вложенности. Он может перебирать значения для генерации большого количества HTML за один проход. Эти файлы «.pug» предназначены для многократного использования в проекте.

 

  • ul each val in (1, 2, 3) li a(href=””, class=”chapter”) Chapter #{val} of 3
  • Хотя Emmet идеально подходит для статического контента, что произойдет, если контент должен быть более динамичным? Например, нам может потребоваться создать персонализированные домашние страницы, сложные таблицы заказов или повторить общие блоки HTML. Это все возможно в JavaScript, но, предварительно выполнив рендеринг этого контента, мы можем получить дополнительное повышение скорости, не полагаясь на браузер пользователя.
  • Стоит также отметить, что большинство редакторов кода либо имеют встроенный Emmet, либо поддерживают его через плагины. Вы можете узнать больше об этом на странице документации Emmet.
Интерактивная карта Ведьмака - это действительно красота
Интерактивная карта Ведьмака – это действительно красиво

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

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

Сайт Ведьмака

Перетащите временную шкалу, чтобы показать ключевые точки сюжета и информацию о событии. (Изображение предоставлено: witchernetflix.com)

Временная шкала разделена на четыре трека, посвященных различным элементам истории: пользователи могут следить за ведущими героями, Геральтом, Йеннефером или Цири, или исследовать общую историю волшебного мира. Все четыре трека сходятся, когда временная шкала перетаскивается до 1250 года, при рождении Цири. Ключевые точки на временной шкале оживляют, чтобы сообщить пользователю, что есть что почитать: всплывающее окно выдвигается, чтобы показать событие, и, что более полезно для любителей ведьм, в каком эпизоде ​​и в каком году происходит ключевая сюжетная линия.

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

Сайт Ведьмака

Поиск информации о ваших любимых персонажах (Изображение предоставлено: witchernetflix.com)

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

Веб-сайт «Карты континента» Ведьмака – прекрасный пример того, как объединить различные медиа для создания полного и убедительного опыта рассказывания историй. Сайт использует тонкие и умные анимации пользовательского интерфейса, чтобы привлечь пользователей и предоставить пользователям информацию, которую они хотят. Он заимствован из известных повседневных элементов (таких как Google Maps), чтобы обеспечить интуитивно понятный и чрезвычайно приятный опыт.

Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей
Сделайте карьеру в области данных с помощью этих профессиональных советов и хитростей

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

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

В преддверии своего выступления на GenerateJS, конференции, помогающей вам создать лучший JavaScript, 2 апреля в Лондоне Бремер рассказывает, как она прошла путь от астрономии до данных, а именно (узнайте больше о визуализации данных здесь), ее инструментах перехода и как она видит, как дисциплина развивается в будущем.

Визуализация данных, показывающая разветвленные поисковые термины, которые люди ищут вокруг своих питомцев.

Эти данные, а именно Бремер работал над Google News Lab, исследует самые популярные вопросы, которые люди задают в Google, чтобы лучше понять своих кошек и собак. (Изображение предоставлено Google News Labs)

Не могли бы вы кратко представиться кому-то, кто вас не знает?

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

Я работаю фрилансером под именем Visual Cinnamon почти три года. Я работаю в основном над предметами, которые используются для маркетинга – как внутри компании, так и за ее пределами, – используются для статей (в печатном или онлайн), пресс-релизов или, может быть, даже для некоторых графических изображений в офисе.

Как вы попали в визуализацию данных?

Моя история начинается с астрономии. Я всегда любил эту тему и изучал ее в течение пяти лет в университете. Но я также знал, что следующий академический шаг не сделает меня счастливым. Поэтому после окончания учебы в 2011 году я решил присоединиться к новому аналитическому отделу Deloitte Consulting.

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

Во время конференции по науке о данных в 2014 году на первом слайде спикер Майк Фриман назвал себя «специалистом по визуализации данных». И тут меня ударило, как молния: «Вы можете сделать данные, как отдельную вещь ?!»

Так что же такого в данных, которые вызвали такой аккорд?

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

 

Визуализация данных, показывающая всех золотых медалистов летних Олимпийских игр с первых игр 1896 года.

Созданный для совместной работы над эскизами данных, который Бремер сделал с Ширли Ву, Olympic Feathers представляет всех золотых медалистов летних Олимпийских игр с первых игр 1896 года. (Фото предоставлено Надей Бремер / Ширли Ву)

Вы стали фрилансером в 2017 году. Как развивалась ваша карьера с тех пор?

Переход на фриланс – один из лучших профессиональных шагов, которые я когда-либо делал; Я ни разу не пожалел об этом. У меня была возможность работать с клиентами, о которых я думал, что могу только мечтать, таких как Google, ЮНЕСКО и New York Times. Я также наслаждаюсь широким спектром клиентов и наборов данных, с которыми я теперь работаю, от небольших стартапов до громких имен, от журналов или некоммерческих организаций до корпораций.

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

Каковы ваши инструменты перехода?

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

Я занимаюсь дизайном с помощью простой ручки и бумаги или с помощью приложения Tayasui Sketches на моем iPad Pro а также Яблочный карандаштаким образом, проекты действительно остаются грубыми. Затем я перехожу к Visual Studio Code для программирования визуализации данных с помощью d3.js и JavaScript.

В зависимости от объема отображаемых данных или сложности взаимодействий я создам их с помощью SVG для более простых вещей или HTML5 Canvas для больших визуальных элементов. В некоторых редких случаях я мог бы также создать визуал с three.js, если данные действительно большие.

Наконец, если готовая часть будет статичным изображением, я экспортирую созданный мной JavaScript-код в Adobe Illustrator, чтобы добавить некоторые последние штрихи, которые легче сделать, чем с помощью кода, такие как легенда или аннотации. , Тем не менее, я недавно начал работать с Affinity Designer и получать удовольствие от него, и в будущем я могу полностью перейти на него для своей векторной работы.

Какие наибольшие ошибки люди делают при создании визуализации данных?

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

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

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

Этот визуальный фильм, созданный для страницы «Наука о графике» в журнале «Scientific American», показывает различные сезонные модели, появляющиеся при рождении детей в США (Изображение предоставлено Scientific American)

Что вам больше всего нравится в вашей работе, и какие части являются наименее веселыми?

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

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

Какой момент в твоей карьере был самым гордым?

Победа в номинации «Лучшая личность» – «Красивые награды» в 2017 году. Такое признание, когда было так много удивительных людей на выбор, просто поразило меня. Я не ожидал, что это произойдет, и вышел на сцену на церемонии совершенно неподготовленным, ошеломленным и чрезвычайно почтенным. Это действительно повысило мою уверенность в себе, особенно с тех пор, как начало работы в качестве фрилансера в тот год было таким страшным шагом.

Как изменится визуализация данных в течение следующих 10 лет?

Я действительно понятия не имею, но это, конечно, становится больше. Компании все больше понимают, что визуализация данных – это хорошая инвестиция и что, если вы хотите, чтобы все было хорошо, вам нужно нанять эксперта. Число людей, желающих работать в области данных, также растет исключительно быстро, возможно, даже быстрее, чем спрос.

Так что бы вы хотели увидеть?

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

Jamstack: создавайте более быстрые и эффективные веб-сайты сегодня
Jamstack: создавайте более быстрые и эффективные веб-сайты

Jamstack – это метод создания и обслуживания веб-сайтов с минимальной нагрузкой, необходимой для сервера. Он получил свое название от технологий, используемых в процессе сборки, Javascript, API и разметки. Страницы создаются на языке разметки заранее и используются в качестве статических HTML-файлов по запросу пользователя. Для создания сайта и объединения этих технологий вам нужны правильные инструменты. Обязательно ознакомьтесь с нашей статьей о лучших редакторах кода, которая поможет выбрать лучшую среду разработки для вас.

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

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

01. Скачать необходимые инструменты

Скачать копию Victor Hugo – это один из нескольких стартовых наборов, позволяющих быстро оторваться от земли. Также убедитесь, что у вас установлен узел в вашей среде разработки.
https://gohugo.io/tools/starter-kits/

https://github.com/netlify-templates/victor-hugo

02. Создайте рабочий каталог и установите Hugo

Создайте каталог и назовите его Jamstack, Здесь мы будем работать над нашей машиной для разработки. Распакуйте загруженные файлы для Hugo в этот каталог и откройте его в командной строке. Чтобы установить все зависимости, откройте командную строку или терминал в папке Jamstack и запустите установка npm

npm install

03. Запустите сервер

JAMstack03

(Изображение предоставлено Джозефом Фордом)

Как только зависимости закончатся, запустите npm start. На сервере разработки теперь работает локальная копия Victor Hugo, доступная по умолчанию на localhost: 3000 – при открытии этой ссылки должен появиться экран приветствия, если все прошло успешно. После проверки нажмите Ctrl + С остановить сервер.

04. Добавить страницу и пост

JAMstack04

(Изображение предоставлено Джозефом Фордом)

Измените каталог на папку сайта, затем, используя Хьюго Нью команда, добавить page-one.md и post-one.md, Разработчикам, работающим в Windows, необходимо скачать файл hugo.exe и добавить путь, чтобы заставить его работать, но на веб-сайте hugo есть простая документация.

hugo new page-one.md hugo new post/post-one.md

05. Добавить контент на страницу и опубликовать

В целях тестирования, некоторый контент должен быть добавлен к новому сообщению и странице. Откройте каталог для проекта в файловом браузере и перейдите к Jamstack / Site / Content. В этой папке файл page-one.md теперь должен существовать. Существует также папка с именем после который содержит post-one.md. Откройте оба этих файла и добавьте некоторый контент в markdown ниже — (или в некоторых случаях +++)

# Lorem ipsum dolor sit amet ## Consectetur adipiscing *elit* Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

06. Добавьте тему как субмодуль

JAMstack06

(Изображение предоставлено Джозефом Фордом)

Текст, введенный в предыдущих файлах, нельзя просмотреть без темы. В качестве примера будет использована тема Ananke. Удалить содержимое текущего сайт / макеты папка, оставляя ее пустой. Создайте новый каталог в папке сайта с именем темы, затем перейдите к нему и запустите следующий код, чтобы импортировать тему как подмодуль git. Примечание: обычное клонирование несовместимо с Netlify.

mkdir themes cd themes git submodule add https://github com// https://github.com/budparr/gohugo-theme ananke.git themes/ananke

07. Настройте тему и запустите сервер

Скопируйте содержимое site / themes / gohugo-theme ananke / exampleSite / config.toml более одного в папке сайта. В верхней части страницы замените базовый URL-адрес на ‘и удали строку themesDir = ‘../ ..’ , Сохраните файл конфигурации, откройте терминал и запустите начало вечера команда. Вы также можете изменить название сайта (если хотите), заменив заглавие ценность.

cd site npm start

08. Тест в браузере

открыто HTTP: // локальный: 3000 / страниц один /чтобы увидеть тему, отображающую разметку страницы как полностью стилизованную страницу. Открыв домашнюю страницу, первое сообщение теперь будет видно. Это означает, что генератор статического сайта теперь работает.

09. Настройте меню

JAMstack09

(Изображение предоставлено Джозефом Фордом)

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

TOML +++ menu = “main” +++ YAML --- menu: “main” ---

10. Вставьте файлы в GitHub

Затем анимируйте круг, чтобы реагировать на клики пользователей. Теперь статический сайт запущен и работает, он должен быть доступен на сервере разработки. Первый шаг – отправить код на GitHub. Создайте новый репозиторий на GitHub, а затем либо используйте командную строку, чтобы вытолкнуть код из папки проекта или настольного приложения GitHub.

git remote add origin https://github.com/(githubusername)/jamstacktutorial.git git push -u origin master

11. Подключитесь к Netlify

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

12. Подключитесь к Github

Для непрерывного развертывания нажмите Github, затем выберите репо, которое было сделано ранее в этом уроке. Netlify должен автоматически определить лучшие варианты сборки для проекта. Следует читать npm run build, Если все хорошо, нажмите кнопку развернуть.

JAMstack13

(Изображение предоставлено Джозефом Фордом)

Как только сайт будет создан, появится сообщение о том, что развернутый , Netlify дал сайту временное доменное имя, которое может не иметь смысла – это можно изменить, просто щелкнув настройки сайта. Измените имя, затем нажмите на ссылку, чтобы увидеть сайт, загруженный через Jamstack.

14. Внесите изменения в тестовое развертывание.

Сайт теперь загружается через JAMStack. это молниеносно, и он автоматически обновляется, когда совершается коммит в github. Чтобы проверить это, вернитесь в локальную среду разработки и запустите Hugo Новая страница- three.mdиз каталога сайта. Затем откройте созданный файл, добавьте контент, нажмите «Сохранить» и передайте файл в репозиторий. Через несколько секунд вы заметите, что обновление доступно по ссылке netlify.

15. Добавьте CMS на ваш статический сайт

Работа в простой разметке и использование командной строки для создания страниц не подойдет большинству клиентов. Чтобы сделать сайт более дружелюбным, установите систему управления контентом. Forestry.io идеально подходит для текущей настройки. Зайдите на сайт и создайте аккаунт с помощью github.

16. Настройка лесного хозяйства

Нажмите добавить новый сайт, затем выберите Hugo в качестве генератора статического сайта, git в качестве поставщика и заполните информацию в следующих формах. Нажмите «отправить», и новая CMS загрузится, готовая к изменениям содержимого. Теперь страницы можно просто редактировать с боковой панели, а также посты и множество других опций.

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

Снимок, рекламирующий GenerateJS в четверг, 2 апреля 2020 года, в Rich Mix, Shoreditch, London, с участием Реми Шарпа, Фила Хоксворса, Джереми Кейта и Нади Бремер.

Узнайте, как создать лучший JavaScript на GenerateJS (Изображение предоставлено Future / Remy Sharp / Phil Hawksworth / Джереми Китом / Nadieh Bremer / Toa Heftiba, Unsplash)

Присоединяйтесь к нам в апреле 2020 года с нашей суперзвездой JavaScript на GenerateJS – конференции, которая поможет вам улучшить JavaScript. Забронировать сейчас на generateconf.com

Используйте Adobe XD для создания микро-взаимодействий
Используйте Adobe XD для создания микро-взаимодействий

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

Как и во многих других дисциплинах, не существует единого инструмента проектирования и создания прототипов, который мог бы достичь всего. Различные этапы требуют уникального набора инструментов. Прошли те времена, когда дизайнеры полагались исключительно на Photoshop и Sketch. Хотя они и являются отличными инструментами для проектирования пользовательского интерфейса, они не обладают возможностями для быстрой обработки пользовательских потоков и каркасов (для получения дополнительной информации о каркасных моделях см. Наши лучшие инструменты для каркасного проектирования).

Теперь с растущим количеством взаимодействий в проектах – таких как анимация, жесты и голосовое управление – трудно найти инструмент, который может реализовать все эти возможности создания прототипов и при этом сохранять простоту. Кодирование является одним из способов создания этих взаимодействий, но это отнимает много времени. К счастью, Adobe XD пришла на помощь, выпустив обновление своего инструмента для создания прототипов, включающего удобную функцию под названием «Auto Animate». На сегодняшний день это самое большое дополнение к мощному набору инструментов.

Идея здесь проста: Auto Animate позволяет дизайнерам создавать интерактивные прототипы с иммерсивной анимацией, просто дублируя артборд или изменяя свойства объекта. Этими свойствами может быть что угодно, например, размеры, положение X и Y, непрозрачность, вращение. Ранее Adobe XD предлагал базовые взаимодействия, такие как скольжение, толчок и растворение.

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

В этой статье я расскажу, как создавать простые микро анимации с помощью этой новой функции Auto Animate в Adobe XD. Прежде чем мы начнем, необходимо рассмотреть несколько вещей о том, как объекты должны обрабатываться для автоматической анимации:

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

Внести изменения в состояние с помощью Auto Animate

Учебник по Adobe XD

Это может показаться простым, но вам нужно начать с двух форм (Изображение предоставлено: Вамси Батчу)

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

На начальном артборде нарисуйте фигуру – в нашем примере это зеленый прямоугольник размером 500 на 200 пикселей. Дублируйте этот артборд и выберите прямоугольник на втором артборде. Нам нужно изменить свойства прямоугольника, увеличив ширину до 1000 и высоту до 500. Вы также можете выполнить дальнейшие изменения, например, изменить непрозрачность до 50% или сделать цвет розовым.

Теперь нажмите на вкладку Prototype в верхнем левом углу. Выберите первый артборд и свяжите его, используя стрелку, со вторым артбордом. Когда вы сделаете это, справа от приложения появится вкладка «Взаимодействие», с помощью которой можно установить такие параметры, как Триггер, Действие, Назначение и Облегчение. Каждый параметр может быть настроен в соответствии с вашими потребностями. Существует пять типов триггеров – включая Tap, Drag и Timed – которые запускают анимацию.

Установите для вкладки «Действие» значение по умолчанию «Автоматическая анимация», и поскольку в нашем примере имеется только две монтажные области, установите вкладку «Назначение» на монтажную панель 2. Кроме того, можно выбрать несколько временных плавных переходов, которые можно выбрать по времени. Нажмите на значок воспроизведения в правом верхнем углу, чтобы увидеть, как Auto Animate выполняет свою магию и анимирует прямоугольник. Если необходимо изменить более двух элементов одновременно, убедитесь, что имена этих элементов совпадают в обеих монтажных областях. Это сообщит приложению, что эти два элемента должны быть анимированы.

Развернуть карты

Учебник по Adobe XD

Расширение карт – еще одно простое взаимодействие для создания (Изображение предоставлено: Вамси Батчу)

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

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

Представьте, что есть три записи для карты. Каждая запись имеет имя записи, дату входа и кнопку, как показано на основном изображении. Вы можете создать одну запись и дублировать ее дважды, чтобы создать группу записей. Расположите их, как показано на основном изображении, и разместите текстовую ссылку View History под этими записями. Поскольку он находится в развернутом состоянии, поверните значок стрелки так, чтобы он был направлен вверх. Это оно. Вы завершили настройку артбордов.

Чтобы создать анимацию, перейдите к первому артборду и нажмите на вкладку «Прототип» в верхнем левом углу. Теперь нажмите на ссылку View History на первом артборде и перетащите ссылку на прототип на второй артборд. Это делает ссылку Просмотр истории триггером. Измените свойства на вкладке «Взаимодействие» справа, установив для триггера «Касание» и «Действие» на «Автоматическая анимация». Проверьте это, чтобы увидеть плавную анимацию ящика. Внесите изменения в параметр «Облегчение» на вкладке «Взаимодействие», если анимация выглядит недостаточно плавной.

Сделать анимацию перетаскивания

Учебник по Adobe XD

Простой пример анимации перетаскивания, где сфера создается для просмотра, хотя она сжимает блок текста (Изображение предоставлено: Вамси Батчу)

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

Не так много осталось сделать для второго артборда. Просто уменьшите зазор между каждым из дублированных прямоугольников, чтобы он чувствовал себя сжатым. Как и в первом артборде, поместите круг поверх первого прямоугольника. Последний шаг – создать прототип, нажав на вкладку «Прототип» в верхнем левом углу. Теперь нажмите на круг от первого артборда и сделайте его триггером. Как и в предыдущих примерах, измените свойства на вкладке «Взаимодействие» справа, установив для триггера значение «Перетаскивание» и «Действие» на «Автоматическая анимация». Когда вы нажмете кнопку воспроизведения, чтобы просмотреть анимацию, вы сможете увидеть плавное действие, как будто блок сжимается сферой.

Создание бесконечной анимации загрузчика

Учебник по Adobe XD

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

Одна из лучших функций Adobe XD заключается в том, что Auto Animate можно применять между несколькими монтажными областями. Чтобы сделать такую ​​анимацию, вам просто нужно внести простые изменения в одно из свойств.

Давайте создадим анимацию загрузки, в которой батарея наполняется. Ключ к получению этого совершенства – правильно изготовить первый артборд. Первый артборд имеет заполнитель батареи, как показано на рисунке. Он может быть создан с использованием прямоугольных форм. Для фактической батареи внутри заполнителя первый артборд должен быть пустым (что соответствует 0%). Дублируйте этот артборд и создайте зеленый прямоугольник высотой 50 пикселей, который идеально вписывается в заполнитель. Создайте аналогичные дубликаты, чтобы увеличить высоту батареи в третьем артборде на 50 пикселей и так далее. Продолжайте, пока артборд не будет полностью заполнен.

Теперь нам нужно создать бесконечный цикл между этими монтажными областями, чтобы он создавал анимацию синхронной загрузки. Для этого перейдите в режим Prototype, нажмите на первый артборд и перетащите стрелку прототипа на второй артборд. Измените свойства на панели «Взаимодействие», установив для «Триггера» значение «Время», а затем установите для «Задержки» значение 0 секунд, которое будет анимировано для второй монтажной области при предварительном просмотре. Выполните те же изменения для всех артбордов, связав второе с третьим и т. Д., Прежде чем окончательно связать последний артборд с первым. Мы успешно соединили все артборды, чтобы сформировать бесконечный цикл. Измените параметры Easing и Duration согласно вашему требованию, чтобы сделать загрузку более плавной.

Хотя существует множество вариантов, которые можно попробовать с помощью Adobe XD, текущие возможности инструмента ограничены и все еще регулярно обновляются группой разработчиков. Таким образом, по сравнению с такими инструментами, как Principle, вы можете почувствовать, что XD имеет ограниченный набор инструментов. Тем не менее, Adobe проделала отличную работу, сделав инструмент простым в освоении и использовании. Создание сложных взаимодействий может занять некоторое время и усилия, но они полностью достижимы с помощью функции автоматической анимации XD. Ключ должен понять основы перемещения объектов, изменения их размера, добавления слоев и использования триггеров.

Philips Brilliance 439P9H monitor review
Philips Brilliance 439P9H обзор монитора – Это хорошо для креативов?

Монитор Philips Brilliance 439P9H является привлекательным экраном – не в последнюю очередь благодаря его размеру и форм-фактору. Этот 43-дюймовый аппарат представляет собой изогнутый дисплей с разрешением 3840 х 1200 и сверхшироким соотношением сторон 32:10.

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

Монитор Philips Brilliance 439P9H: основные характеристики

Размер экрана: 43-дюймовый | Соотношение сторон: 32:10 | Разрешение: 3840 х 1200 | Технология панели: LED VA | Глубина цвета: 10-битный | Время отклика: 4 мс | Регулировка: Наклон от -5 ° до 10 °, регулировка высоты 130 мм, поворот на 20 °, крепление VESA 100 мм | Возможности подключения: 1 x DisplayPort 1.4, 2 x HDMI 2.0, 4 x USB 3.2, 2 x USB 3.2 Type-C, 1 x Gigabit Ethernet | Габаритные размеры: 1058 х 303 х 460 мм (ШхГхВ) | Вес: 14,4 кг | Гарантия: 3 года РТБ

Philips Brilliance 439P9H: Дизайн

Philips Brilliance 439P9H обзор монитора

Получить нагрузку этой кривой (Изображение предоставлено Майком Дженнингсом)

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

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

Кривая тоже помогает. Philips использует обычный радиус 1800R, и это улучшает погружение и согласованность, потому что легче видеть углы экрана.

Тем не менее, размер 439P9H не подходит для любой ситуации. Наличие одного дисплея вместо двух означает, что вы получаете меньше универсальности, когда дело доходит до привязки окон и приложений к вашему рабочему столу. Вертикальное разрешение 439P9H 1200 также может вызвать проблемы. Хотя он предлагает больше вертикального пространства, чем панель 1080p, он не может соответствовать количеству пикселей на экранах 1440p или 4K.

Philips имеет уровень плотности 94ppi. Это средняя цифра: достаточно четкая для большинства задач по фото, видео и дизайну, но не хватает 130ppi или более высоких уровней, которые вы найдете на дисплеях 4K.

439P9H использует технологию VA и 10-битный цвет, а также имеет AMD FreeSync, который работает на частоте 100 Гц – хорошо для плавной анимации. Он также поддерживает DisplayHDR 400, хотя не волнуйтесь об этом – это протокол начального уровня, который лишь незначительно увеличивает HDR-контент.

Philips Brilliance 439P9H: особенности

Philips Brilliance 439P9H обзор монитора

Там много портов (Изображение предоставлено Майком Дженнингсом)

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

Два порта USB-C 3.2 обеспечивают питание, а также четыре полноразмерных порта USB 3.2, один из которых предназначен для быстрой зарядки смартфонов. Philips имеет Gigabit Ethernet и два разъема DisplayPort 1.4 вместе с одним разъемом HDMI 2.0b (см. Наше руководство по USB-кабелям, если вы не уверены, какие из них вам нужны).

Это хорошая связь, хотя немного разочаровывает, что все порты USB обращены вниз на задней части экрана – это затрудняет доступ к ним.

Philips выглядит со вкусом благодаря продуманному дизайну и минимальной подставке, которая не занимает много места. Качество сборки солидное, а Philips имеет регулировку высоты 130 мм. Он наклоняется и поворачивается, и работает с креплениями VESA 100 мм. Это хорошая универсальность – необычно находить такое большое движение на широкоформатном экране.

Убедитесь, что у вас достаточно места: ширина 1058 мм, а вес – 14,4 кг.

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

Имейте в виду, однако, что на этом экране нет профессиональных режимов отображения, кроме sRGB – здесь нет выделенных опций для DCI-P3, BT.709, BT.2020 или любых других цветовых пространств.

Philips Brilliance 439P9H: качество экрана

Philips Brilliance 439P9H обзор монитора

Philips Brilliance 439P9H имеет контрастность 2222: 1. (Изображение предоставлено Майком Дженнингсом)

439P9H обеспечивает потрясающий контраст. При уровнях по умолчанию этот дисплей работает на 60% от полной яркости – и даже здесь его яркость 400 кд / м2 является фантастической. Он достаточно высок, чтобы справиться с любой творческой задачей. К нему присоединяется измерение черного цвета 0,18 кд / м2, что в равной степени впечатляет – глубже, чем у большинства дисплеев, и достаточно низкое, чтобы обеспечить превосходную глубину и тонкость в темных областях.

Эти первые цифры показали, что Philips возвращает контрастность 2222: 1. Это огромно – лучше, чем любая панель IPS, и является типичным преимуществом дисплеев VA. Впечатляющий коэффициент контрастности означает, что этот дисплей обладает превосходным качеством и яркостью в каждой точке цветовой гаммы.

При увеличении яркости экрана до 100% сила подсветки увеличилась до 529 кд / м2. Превосходный контраст Philips оставался неизменным. Этого экрана также достаточно для обработки содержимого DisplayHDR 400, но в целом он не очень высок с точки зрения HDR – так что здесь вы получите лишь незначительное повышение качества HDR.

Philips Brilliance 439P9H: точность цветопередачи

Philips Brilliance 439P9H обзор монитора

Опция sRGB – лучший режим для этого монитора. (Изображение предоставлено Майком Дженнингсом)

Philips сочетает потрясающий контраст с разумными цветами. Delta E 2.27 скорее хорош, чем хорош – все, что ниже 2.0, будет лучше для точной цветопередачи. Цветовая температура 6,403К – это хорошо, но все еще можно найти экраны, которые приближаются к идеалу в 6500К.

К счастью, переключение в режим 439P9H sRGB улучшило ситуацию: результаты Delta E и цветовой температуры достигли 1,25 и 6469K. Они оба результаты высшего уровня.

Именно в этом режиме sRGB светит этот экран – Philips продемонстрировал солидную 97,9% гаммы sRGB. Однако Philips воспроизводит только 79,4% и 86,9% цветовых пространств Adobe RGB и DCI-P3. Ни один из результатов не является достаточно хорошим, чтобы обеспечить профессиональную работу в этих областях.

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

439P9H также страдает, когда дело доходит до однородности. Вдоль левого края экрана подсветка потеряла 35% своей мощности, а 28% подсветки исчезли с правой стороны. Для широкоэкранных мониторов нередко возникают проблемы с однородностью, но эти результаты неудовлетворительны, даже если сравнивать их с другими дисплеями этой категории.

Philips Brilliance 439P9H: стоит ли покупать?

Philips Brilliance 439P9H впечатляет в нескольких ключевых областях. Размер и соотношение сторон являются ключевыми: размер и горизонтальное пространство являются благом для многих приложений, а изгиб делает этот экран более простым в использовании. Благодаря этим функциям Philips также легко работать – на этом экране есть множество вариантов USB, KVM-переключатель, проводная сеть и веб-камера, а также хорошая настройка.

Когда дело доходит до качества изображения, 439P9H смешанный. Он имеет фантастический контраст и цвет sRGB, что делает его отличным для основной работы. Тем не менее, этот дисплей не имеет возможности единообразия или гаммы, чтобы выйти за рамки этого – он не достаточно хорош для задач Adobe RGB или HDR, и он не подходит для других профессиональных цветовых пространств.

Огромный размер 439P9H означает, что обычные дисплеи 4K более четкие, и у этих панелей также больше вертикальных пикселей – что сделает некоторые другие рабочие приложения более управляемыми.

Если вам нужно много места в горизонтальном положении, вы хотите заменить установку на два экрана или работать в цветовом пространстве sRGB, то этот Philips эффективен и универсален. Тем не менее, его форм-фактор будет спорным, и он не подходит для более специализированных рабочих нагрузок.

Простой ребренд Time Out имеет смысл
Простой ребренд Time Out имеет смысл в Лондоне и Нью-Йорке

Time Out переименована в Time In, что отражает количество людей, практикующих социальное дистанцирование в ответ на коронавирус. Временный новый брендинг появляется на нескольких региональных сайтах Time Out, включая Лондон и Нью-Йорк.

Многие веб-сайты Time Out теперь продвигают истории, связанные с пребыванием, от советов на вынос до рекомендаций Netflix. Несколько региональных редакторов разместили на своих сайтах заявления, объясняющие временный ребрендинг, и почему это было необходимо, когда столько людей оставалось в помещении.

Ознакомьтесь с нашим руководством, где найти вдохновение дизайн логотипа,

Логотип Time Out

Временный новый логотип (Изображение предоставлено: Time Out)

Редактор Time Out New York Уилл Глисон говорит в своем заявлении: «Учитывая, что в Нью-Йорке в настоящее время запрещены собрания более 500 человек, становится ясно: необходимо принять серьезные меры предосторожности, чтобы остановить распространение коронавируса. Мы временно изменили наш логотип, чтобы подтвердить это. Новая реальность, но будьте уверены: Time Out Нью-Йорк продолжит помогать вам открывать для себя лучшие города, будь то Time Out или Time In ».

Похожее сообщение было передано Редактор Time Out London Джозеф Маккертич: «Немного Лондона входит в вашу гостиную», – говорит он. «Надеюсь, это было стерилизовано».

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

Time Out Нью-Йорк домашняя страница

Новый логотип в действии на домашней странице Time Out New York (Изображение предоставлено: Time Out New York)

Для компании, основанной (и названной в честь) концепции ухода из дома, текущая ситуация представляет собой очевидную проблему. Временный ребрендинг Time Out кажется умным ходом и отличным примером того, как извлечь выгоду из плохой ситуации. Это невероятно просто, и ему удается поддерживать чувство веселья. Как говорит Маккертич: «Пока мы смотрим друг на друга в поисках силы, уверенности и юмора, ничто не сможет победить город. Любить друг друга и оставаться в безопасности».

Лучшие бесплатные инструменты генерации паттернов
Лучшие бесплатные инструменты генерации паттернов

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

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

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

01. Реппер

Лучшие бесплатные инструменты генерации паттернов: Repper

Реппер может генерировать больше паттернов, чем вы когда-либо могли надеяться использовать, и с ним очень весело играть (Изображение предоставлено: Реппер)

Repper – это платное приложение с ценами от 4,99 фунтов стерлингов в месяц для личного пользования, но оно предлагает 14-дневную пробную версию, которую захочет попробовать любой, кто хочет создавать шаблоны. Это позволяет удивительно легко создавать красивые узоры, которые плавно укладываются; просто передайте ему исходное изображение и поиграйте с любым из его 28 параметров листов, и вы быстро сможете сгенерировать любое количество великолепно абстрактных шаблонов.

Есть также несколько замечательных эффектов для экспериментов; нам особенно нравится инструмент Metamorphosis, который позволяет мгновенно создавать великолепные дизайны в стиле MC Escher.

02. Образец

Лучшие бесплатные инструменты генерации паттернов: Patternify

Создавайте красочные образцы пикселей и развертывайте их как CSS (Изображение предоставлено: Patternify)

Если вы ищете простой шаблон для использования в качестве фона для вашего сайта, то Patternify от Sacha Greif может быть решением. Это генератор шаблонов CSS; просто нарисуйте несколько пикселей в сетке (размером до 10×10), и Patternify превратит его в PNG-файл, который вы можете загрузить и разбить на плитки, или код Base64, который вы можете вставить в исходный код своего сайта. Результаты не очень сложные, но это отличный инструмент, если вы хотите создать фон для ретро-сайта.

03. Лабиринт

Лучшие бесплатные инструменты для создания паттернов: Mazeletter

Эти абстрактные шрифты были разработаны для построения лабиринтных паттернов (Изображение предоставлено: Mazeletter)

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

Это работа Пола Кронана в Fathom Foundry, и она вдохновлена ​​его пожизненной любовью к лабиринтам; каждый из девяти шрифтов имеет свой особый внешний вид, и независимо от того, создаете ли вы свои собственные шаблоны вручную или просто играете, набирая буквы на сайте Mazeletter, вы можете быстро создавать невероятно выглядящие лабиринтные рисунки.

04. Паттинья

Лучшие бесплатные инструменты генерации паттернов: Patterninja

Patterninja – забавный инструмент для создания смелых и ярких дизайнов (Изображение предоставлено: Patterninja)

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

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

05. Шаблонизатор

Лучшие бесплатные инструменты генерации паттернов: Patternizer

Если вы когда-либо мечтали сделать свой собственный тартан, Patternizer должен сделать это хорошо (Изображение предоставлено: Patternizer)

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

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

06. ГеоПаттерн

Лучшие бесплатные инструменты генерации паттернов: GeoPattern

GeoPattern превращает текстовые строки в красивые шаблоны SVG (Изображение предоставлено GeoPattern)

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

Ярмарка произведений искусства за $ 270 миллионов перемещается онлайн на фоне вирусной эпидемии
Ярмарка произведений искусства за $ 270 миллионов перемещается онлайн на фоне вирусной эпидемии

По мере того, как бесчисленные общественные места продолжают закрываться после коронавируса, художественные галереи по всему миру закрыли свои двери – в том числе галереи Тейт, V & A и Музей Метрополитен. На фоне закрытия Art Basel теперь предлагает комнаты для онлайн-просмотра, чтобы заменить отмененную выставку в Гонконге, открытую для VIP-персон с сегодняшнего дня и для публики с пятницы.

Более 230 дилеров, которые планировали привезти работу в Гонконг, вместо этого предложат более 2000 штук через виртуальную ярмарку – ориентировочная стоимость 270 миллионов долларов. Цена (или диапазон цен) будет сопровождать каждую работу, а запросы о продажах делаются через онлайн-форму с ответом, гарантированным в течение 24 часов.

Галерея искусств

Art Basel Гонконгская ярмарка 2019 года (Изображение предоставлено Art Basel Hong Kong)

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

«Если галереи закрыты, как мы можем продавать искусство?», Говорит участвующий дилер Дэвид Цвирнер. Нью-Йорк Таймс. «Онлайн-платформа – это то, что мы рассматривали как важную часть того, что мы делаем. Забавно, что мир искусства опаздывает на вечеринку, если вы думаете о других событиях в розничной торговле».

К счастью для Art Basel, ярмарка уже исследовала комнаты онлайн-просмотра как часть опыта, прежде чем коронавирус заставил их закрыться. По словам глобального директора Art Basel Марка Шпиглера, «инфраструктура была на месте».

Хотя в этом случае онлайн-переход полностью понятен, мы надеемся, что виртуальные художественные ярмарки не заменят реальную вещь. «Хотя ничто не может заменить опыт лично увидеть искусство», – сказала Аделина Оои, директор «Art Basel» по Азии, – «мы надеемся, что эта инициатива может оказать некоторую поддержку и заметность всем галереям и их художникам, пострадавшим от отмены нашего мартовского шоу».

Социальное дистанцирование гугл каракули гениально просто
Социальное дистанцирование гугл каракули гениально просто

За последние несколько дней мы увидели множество творческих откликов на коронавирус и рост самоизоляции, и эта концепция каракули Google от пользователя Reddit NumericMiracle является гениально простым дополнением. «Если бы я был дизайнером в команде Google, – говорят они, – это то, чем бы я сейчас занимался. Простой, но сообщающий о том, что должно произойти».

Google Doodle

(Изображение предоставлено: NumericMiracle на Reddit)

Несмотря на то, что на протяжении многих лет Google Doodles бывают разных форм и размеров (посмотрите наш список лучших дизайнов Google Doodle), это одна из самых простых, но эффективных концепций, которые мы видели. Просто увеличивая кернинг существующих букв «Google», NumericMiracle переводит их в состояние самоизоляции. Хотя на первый взгляд может быть не совсем понятно, почему буквы были разделены, несмотря на все разговоры о карантине и изоляции, это, безусловно, не займет много времени, чтобы отбросить пенни – и окно поиска было заполнено автоматически. дистанцирование, чтобы отвезти сообщение домой.

“Петиция за то, чтобы это стало настоящим гугл каракули!” один пользователь комментирует, а другой добавляет: «Пожалуйста, отправьте это в Google, подождите, у Google есть адрес Gmail?» Концепция каракули, безусловно, поразила воображение Reddit, и нам бы очень хотелось увидеть ее на главной странице Google. Помимо того, что она гениально проста, она передает полезную информацию о важности социального дистанцирования в это время.

Google Doodle

Первый в истории Google каракули с 1998 года (Изображение предоставлено Google)

Первый дудл Google появился в 1998 году, когда основатели Ларри Пейдж и Сергей Брин собирались на фестиваль Burning Man и хотели уведомить пользователей об их отсутствии в случае сбоя серверов. Они добавили фигуру Burning Man к логотипу (как забавное сообщение об отсутствии на работе). Людям это понравилось, и появился Google Doodle.

Следующая важная вещь в веб-дизайне: 7 тенденций, которые нужно знать
Следующая важная вещь в веб-дизайне: 7 тенденций, которые нужно знать

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

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

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

01. Пользовательские визуальные эффекты

Для Эммы Бьюки, руководителя дизайна PS Website Design, самая захватывающая веб-разработка в том, что она снова становится визуально интересной.

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

«Так что теперь мы начинаем видеть преимущества адаптивного дизайна в сочетании с еще более сложной и сложной иллюстрацией, анимацией и уникальными функциями дизайна», – объясняет она.

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

02. Персональные сайты

Страница Geo Cities

Садовое искусство Дуэйна было одной из миллионов персональных страниц, созданных (Изображение предоставлено: один терабайт в блоге “Возраст килобайта”)

По мере того, как веб-дизайн становится все более доступным, ведущий разработчик Redweb Мэтт Нортам (Matt Northam) взволнован возрождением личных сайтов. Он объясняет это тем, кто начинает ценить свое пространство в Интернете.

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

«Разнообразие и свобода, которые вы привыкли находить в GeoCities, – вот что заставило меня заняться веб-разработкой, а открытие этого разнообразия – то, что вдохновило меня на будущее».

03. Искусственный интеллект

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

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

«Что удивительно, так это то, как вы можете создавать эти взаимодействия естественным образом», – говорит Богорк, который также предсказывает, что это будет работать вместе с браузерами, поддерживающими 3D, анимацию и иллюстрации.

«Они работают легче и не ставят под угрозу пользовательский опыт. Они предлагают новые способы познакомиться с продуктом или услугой: вы можете перемещаться по 3D-моделям, просматривать их детали или следить за анимированными поездками».

04. Человеко-ориентированный дизайн

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

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

05. Функциональная простота

Простой сайт

Сайт Evoulve является примером функциональной простоты, с одноцветной темой и урезанными элементами. (Изображение предоставлено Evoulve)

«Я взволнован простотой, одноцветными веб-сайтами и смелой типографикой», – говорит Тесс Херрманн, креативный директор MongoDB. Далее она добавляет, что простое может быть сложнее, чем сложное, и это одна из самых больших проблем в отрасли.

«Огромная типография означает, что посетители будут помнить то, что было написано, и с большей вероятностью вернутся на вашу платформу», – добавляет Херрманн. «Один цвет создает гармоничный, визуально сплоченный вид, и легко сделать так, чтобы различные элементы были вместе.

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

06. Микро-анимация

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

«Они помогают направлять пользователя и улучшают его опыт, создавая более плавное путешествие», – считает она. «Увеличенное использование плавных, естественных и более продвинутых анимаций визуально повышает сайт, добавляя элемент игривости, без риска увеличения времени загрузки.

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

07. Этический дизайн

«В настоящее время этичный и ответственный дизайн является одним из самых интересных направлений нашей работы», – говорит Алекс Ли, главный дизайнер Foolproof.

Хотя технически они могут построить практически все, о чем могут мечтать, Алекс и его команда часто задаются вопросом: «Должны ли мы вообще это разрабатывать?»

«Мы должны спросить: как наши решения по дизайну продукта влияют на самовосприятие, принятие, инклюзивность, межличностные отношения и многое другое? Как веб-дизайнерам, нам пора отстаивать этику и обеспечивать возможность оглядываться на свою работу. и гордиться нашим вкладом “.

Slack показывает самый большой в истории дизайн
Slack показывает самый большой в истории дизайн

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

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

Редизайн вашего интерфейса? Проверьте наш список лучших инструменты веб-дизайна,

слабина

Новая боковая панель с вложенными разделами (Изображение предоставлено: Slack)

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

слабина

Новый вид Slack (Изображение предоставлено: Slack)

Также новым является значок молнии рядом с полем ввода сообщения. Здесь вы можете найти приложения. Слэк говорит, что многие из них появятся в ближайшие недели, включая Simple Poll и Cisco WebEx Meetings. И, наконец, увеличен интервал для большего передышки во всем приложении.

Лучшие приложения для изучения языка для креативщиков
Лучшие приложения для изучения языка для креативщиков

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

Это очень легко начать изучать новый язык. В последнее время изучение языка переросло в мрачные дни классных досок, древних учебников и рутинного обучения. Теперь это весело, с гибкими подходами, которые могут быть удивительно эффективными. Приложения для изучения языка значительно улучшились, как и приложения в целом (см. Наши лучшие приложения для iPad для дизайнеров, если вы нам не верите).

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

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

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

01. Бусуу

Лучшие приложения для изучения языка: Busuu

Busuu копирует традиционную учебную программу (Изображение предоставлено: Busuu)
  • Плюсы: Практика во всех областях изучения языка, легко отслеживать ваши успехи
  • Cons: Можно сделать с большим количеством повторений
  • Платформа: iOS, Android, веб
  • Цена: Бесплатно, Премиум от $ 7.99 / £ 5.83

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

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

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

02. Дуолинго

Лучшие приложения для изучения языка: Duolingo homepage

Duolingo абсолютно бесплатен, но это не единственная причина, по которой он популярен (Изображение предоставлено Duolingo)
  • Плюсы: Бесплатно. Весело и легко в использовании.
  • Минусы: Уроки могут быть совершенно случайными. Отсутствие объяснений.
  • Платформа: Интернет, iOS, Android, Windows 10
  • Цена: Бесплатно

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

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

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

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

Duolingo бесплатен, и у него немало возможностей

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

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

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

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

03. Лингвист

Лучшие приложения для изучения языка: домашняя страница Lingvist

Лингвист охватывает только четыре языка, но делает их все очень хорошо (Изображение предоставлено Lingvist)
  • Плюсы: Хорошие объяснения. Выберите то, что вы изучаете.
  • Минусы: Всего четыре языка. Нет бесплатной версии.
  • Платформа: Интернет, iOS, Android
  • Цена: От £ 5.83 в месяц (годовой план)

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

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

Кроме того, в отличие от Duolingo, Lingvistalso предлагает подробные объяснения грамматических правил, а затем ставит задачи, чтобы убедиться, что вы их поняли.

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

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

04. Баббель

лучшие приложения для изучения языка: главная страница Babbel

Babbel предлагает уникальный курс для каждого языка (Изображение предоставлено Babbel)
  • Плюсы: Практическая направленность. Уникальный курс для каждого языка.
  • Минусы: Не бесплатно. Не особенно “весело”.
  • Платформа: Интернет, iOS, Android
  • Цена: От £ 4.75 – £ 9.99 / месяц

Babbel – это сервис на основе подписки; Существует бесплатная версия, но в основном она дает вам доступ к первому уроку на каждом курсе.

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

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

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

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

Но с другой стороны, у Баббелла есть реальное чувство академической строгости, серьезности и эффективности. И когда вы комбинируете это с практической и контекстуальной природой того, что вы действительно изучаете, это может быть все, что вам действительно нужно.

05. Розеттский камень

Лучшие приложения для изучения языка: домашняя страница Rosetta Stone

Самое старое имя в игре, Rosetta Stone по-прежнему набирает силу (Изображение предоставлено: Rosetta Stone)
  • Плюсы: Можно получить доступ к урокам в автономном режиме. Вариант для индивидуальных занятий.
  • Минусы: Дорогой. Погружающий подход может не подойти.
  • Платформа: Интернет, iOS, Android
  • Цена: От £ 9 до £ 16 / месяц

Rosetta Stone, прадедушка всего программного обеспечения для изучения языков, существует уже несколько десятилетий: его первый CD-Rom был выпущен в 1992 году. И из-за высокого признания его имени компания взимает более высокие цены за свои курсы, чем практически все остальные.

Уроки доступны как в браузере, так и через приложения для Android и iOS, которые позволяют загружать уроки, чтобы следовать в автономном режиме. Кроме того, если вы хотите платить больше, вы можете добавить к своему курсу онлайн-уроки в режиме реального времени, либо в рамках группового занятия, либо в рамках индивидуального индивидуального занятия.

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

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

06. Капли

лучшие приложения для изучения языка: домашняя страница Drops

Drops не научит вас целому языку, но он отлично подходит для быстрого набора словарного запаса, быстро (Изображение предоставлено: Капли)
  • Плюсы: Отлично подходит для Vocab. Красиво оформленный.
  • Минусы: Не учит грамматике. Бесплатная версия очень ограничена.
  • Платформа: iOS, Android
  • Цена: Премиум-версия от £ 2.50 / месяц

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

Что нам больше всего нравится в этом приложении, которое доступно для iOS и Android и которое охватывает впечатляющие 32 языка, так это его дизайн. Здесь нет дрянных изображений; все красочные и минималистичные иллюстрации хорошо проработаны, и, на наш взгляд, это очень важно.

Это также прекрасный пример изречения: «Делай одно и делай это хорошо». Приложение сконцентрировано на словаре, в основном на существительных, поэтому, хотя оно само по себе не учит вас языку, оно очень быстро научит вас большому количеству слов на этом языке.

Бесплатная версия включает в себя рекламу и предлагает вам пятиминутный сеанс каждые 10 часов (так что теоретически два раза в день, если вы правильно рассчитаете время). Это не так много, и, конечно, это не так. Но сама срочность этого короткого периода может чудесно сфокусировать ваш разум. Или вы можете заплатить за Премиум режим, который разблокирует неограниченное время, а также удаляет рекламу и разрешает автономный доступ.

16 лучших инструментов разработки и дизайна Google в 2020 году
16 лучших инструментов разработки и дизайна Google в 2020 году

Работа в Интернете обычно означает, что вы будете работать с Google в той или иной форме. И поскольку Google Chrome намного опережает конкурентов, дизайнеры и разработчики должны подумать о том, как их проект будет работать с браузером. Как это будет выглядеть? Какие технологии он поддерживает, насколько он безопасен и как он будет работать?

К счастью, Chrome предоставляет инструменты, которые гарантируют, что любой сайт или приложение будет в лучшем виде. DevTools позволяют дизайнерам и разработчикам получить представление о веб-странице: вы можете манипулировать DOM, проверять CSS, экспериментировать с проектами при редактировании в реальном времени, отлаживать JavaScript и проверять производительность. (Подробнее об использовании этих веб-инструментов Google см. Здесь).

Но Google предлагает больше, чем просто браузер. В нем есть инструменты и ресурсы, помогающие практически во всех аспектах вашей жизни. Хотите знать, как улучшить производительность? Маяк здесь, чтобы помочь. Хотите создавать более эффективные мобильные сайты? Тогда поздоровайтесь с AMP. Вы ищете для создания красивых PWAs? Затем Flutter, Material Design и Workbox готовы к работе.

Прелесть использования инструментов, ресурсов, библиотек и фреймворков Google в том, что вы знаете, что они будут хорошо работать с браузером Chrome – самым популярным браузером на планете. Дополнительные инструменты см. В наших обзор инструментов веб-дизайна.

1. Маяк

Эффективность – ключевой фактор успеха сайта, а Lighthouse – инструмент Google для улучшения качества веб-страниц. Итак, как вы используете это и что оно может сделать? В простейшем виде вы можете запустить Lighthouse на вкладке Аудит и выбрать один из вариантов, включая настольный или мобильный, в дополнение к флажкам для производительности, доступности и SEO, чтобы создать окончательный отчет с предлагаемыми улучшениями.

02. Полимер

Polymer хорошо известен своей работой с веб-компонентами, но теперь проект расширил свой репертуар, включив в него коллекцию библиотек, инструментов и стандартов. Что включено? LitElement – это редактор, который позволяет легко определять веб-компоненты, а lit-html – это библиотека шаблонов HTML, которая позволяет пользователям писать HTML-шаблоны следующего поколения в JS. Кроме того, вы также найдете PWA Starter Kit, оригинальную библиотеку Polymer и наборы веб-компонентов.

03. APIs Explorer

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

04. Флаттер

Инструменты Google Flutter

Создавайте красивые приложения с Flutter (Изображение предоставлено: Флаттер)

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

05. Google GitHub

Как известно большинству, GitHub является хостинговой платформой / хранилищем для хранения и обмена кодом и файлами. И, к счастью, у Google есть собственное место на платформе с более чем 260 репозиториями, которые нужно просеять. Используйте фильтр, чтобы сократить время поиска и приблизиться к хранилищу, с которым вы хотите поиграть или внести свой вклад.

06. Кукольник

Встроенный в Node, Puppeteer предлагает высокоуровневый API, который позволяет вам получить доступ к Chrome без головок – фактически Chrome без пользовательского интерфейса, который разработчики могут затем контролировать через командную строку. Так что вы можете сделать с Кукольником? Доступно несколько вариантов создания скриншотов и PDF-файлов страниц, автоматизации отправки форм и создания среды автоматического тестирования.

07. Рабочая коробка

Если вы хотите построить PWA, то это отличная отправная точка. Workbox предоставляет набор библиотек JavaScript для добавления автономной поддержки веб-приложений. Подборка подробных руководств демонстрирует, как создать и зарегистрировать файл рабочего сервиса, направить запросы, использовать плагины и использовать упаковщики с Workbox. И есть также несколько примеров стратегий кэширования, чтобы проверить.

08. Codelabs

Вам нужны практические рекомендации по продукту Google? Codelabs предоставляет «практическое руководство по программированию». Сайт аккуратно разбит на категории и события, что позволяет быстро и легко найти то, что вы хотите. Он включает в себя аналитику, Android, Assistant, дополненную реальность, Flutter, G Suite, Search, TensorFlow и виртуальную реальность. Выберите опцию и получите код и указания, необходимые для создания небольших приложений.

09. Инструмент Цвет

Инструменты Google Chrome

Выберите палитру, любую палитру (Изображение предоставлено: Color Tool)

Color Tool – простой инструмент, который позволяет создавать, совместно использовать и применять палитру в дополнение к проверке доступности. Пользователи могут выбрать предопределенную палитру из палитры материалов. Просто выберите цвет, а затем примените его к основной цветовой схеме, переключитесь на дополнительный вариант и выберите снова. Наконец, выберите цвета текста для обеих схем. Или же выберите Custom, чтобы выбрать цвета. Затем переключитесь на Доступность, чтобы проверить, все ли хорошо, прежде чем, наконец, экспортировать палитру.

10. Дизайн Спринты

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

11. Люди + AI Путеводитель

Данное руководство является работой инициативы People + AI Research в Google и призвано предложить помощь тем, кто хочет создавать ориентированные на человека продукты ИИ. Комплексное руководство состоит из шести глав, охватывающих потребности пользователей, сбор и оценку данных, ментальные модели, доверие, обратную связь и изящные ошибки. Каждая глава сопровождается упражнениями, рабочими листами и инструментами и ресурсами, которые необходимы для этого.

12. Google Assistant

Инструменты Google Chrome

Помощник Google делает много помощи (Изображение предоставлено Chrome)

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

13. PageSpeed ​​Insights

PageSpeed ​​Insights анализирует веб-контент, а затем предлагает рекомендации по ускорению его загрузки. Просто добавьте URL, нажмите кнопку «Анализ» и подождите, пока волшебство не случится. Посмотрите документы, чтобы лучше понять, как работает API PageSpeed ​​и как его использовать.

14. AMP в Google

AMP – это инструмент Google для создания быстро загружаемых мобильных страниц, которые (будем надеяться) попадут в топ поисковых рейтингов. Узнайте, как создавать быстрые сайты, ориентированные на пользователя, интегрировать AMP в продукты Google, использовать кэш Google AMP для ускорения страниц AMP и монетизировать страницы AMP с другими продуктами Google.

15. Google DevTools

Инструменты Google Chrome

С DevTools можно многое сделать (Изображение предоставлено Chrome)

Каждый дизайнер и разработчик знает (или, по крайней мере, должен знать), что Chrome поставляется с набором инструментов, встроенных непосредственно в браузер. DevTools Chrome идеально подходят для проверки элементов, составляющих страницу, проверки CSS, редактирования страниц на лету и многого другого.

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

В другом месте вы можете просматривать и изменять CSS. На вкладке «Стили» на панели «Элементы» перечислены правила CSS, применяемые к текущему выбранному элементу в дереве DOM. Включите и выключите свойства (или добавьте новые значения), чтобы поэкспериментировать с проектами. Это идеальный инструмент для обеспечения того, чтобы все работало как положено, прежде чем вносить какие-либо изменения в живой дизайн.

Вы также можете отлаживать JavaScript, оптимизировать скорость работы сайта и проверять скорость сети. Вот быстрый совет, который вы можете использовать, чтобы немедленно ускорить рабочий процесс. Перейдите на вкладку Sources, нажмите New Snippet и добавьте часто используемый код. Назовите фрагмент кода и сохраните. Повторите по мере необходимости. Теперь вы можете взять этот фрагмент кода вместо того, чтобы писать его снова.

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

16. Материал Дизайн

Инструменты Google Chrome

Материал является жизненно важным элементом дизайна комплекта (Изображение предоставлено Chrome)

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

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

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

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