Небольшая заметка, посвященная вопросу настройки тем оформления (skins) в популярном и очень полезном консольном файловом менеджере Midnight Commander.

И попутно затрагивается вопрос с настройкой отображения кириллицы в Midnight Commander под управлением OSX.

Пару хвалебных слов

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

Midnight Commander - очень легкий, потому что для своей работы он использует псевдографику.

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

Устанавливается Midnight Commander из пакетного менеджера, так как эта утилита имеется в репозиториях любого дистрибутива Linux. В Debian \ Ubuntu \ Mint установка производится такой командой:

sudo apt-get install mc

Оформление Midnight Commander

После установки Midnight Commander и его первоначального запуска внешний вид программы будет примерно таким:

Прямо скажем, зрелище не очень привлекательное, особенно - зеленый шрифт на синем фоне. Это тема оформления (skin) по умолчанию для Midnight Commander и называется она также - default.

Но оформление Midnight Commander можно (и нужно) поменять и сделать это просто, так как эта программа идет с предустановленным набором тем оформления.

Готовые темы оформления (skins) после установки Midnight Commander располагаются по пути:

~|⇒ ll /usr/share/mc/skins

Туда можно заглянуть и выбрать, что понравиться:

~|⇒ ll /usr/share/mc/skins
total 212K
-rw-r--r-- 1 root root 3,0K Dec  5  2013 darkfar.ini
-rw-r--r-- 1 root root 3,0K Dec  5  2013 dark.ini
-rw-r--r-- 1 root root 2,7K Dec  5  2013 default.ini
-rw-r--r-- 1 root root 2,7K Dec  5  2013 double-lines.ini
-rw-r--r-- 1 root root 3,1K Dec  5  2013 featured.ini
-rw-r--r-- 1 root root 2,2K Dec  5  2013 gotar.ini
-rw-r--r-- 1 root root 2,3K Dec  5  2013 mc46.ini
-rw-r--r-- 1 root root 4,0K Dec  5  2013 modarcon16-defbg.ini
-rw-r--r-- 1 root root 4,0K Sep 24  2012 modarcon16-defbg-thin.ini
-rw-r--r-- 1 root root 4,0K Dec  5  2013 modarcon16.ini
-rw-r--r-- 1 root root 4,0K Dec  5  2013 modarcon16root-defbg.ini
-rw-r--r-- 1 root root 4,0K Sep 24  2012 modarcon16root-defbg-thin.ini
-rw-r--r-- 1 root root 4,0K Dec  5  2013 modarcon16root.ini
-rw-r--r-- 1 root root 4,0K Sep 24  2012 modarcon16root-thin.ini
-rw-r--r-- 1 root root 4,0K Sep 24  2012 modarcon16-thin.ini
-rw-r--r-- 1 root root 4,1K Dec  5  2013 modarin256-defbg.ini
-rw-r--r-- 1 root root 4,1K Sep 24  2012 modarin256-defbg-thin.ini
-rw-r--r-- 1 root root 4,1K Dec  5  2013 modarin256.ini
-rw-r--r-- 1 root root 4,1K Dec  5  2013 modarin256root-defbg.ini
-rw-r--r-- 1 root root 4,1K Sep 24  2012 modarin256root-defbg-thin.ini
-rw-r--r-- 1 root root 4,1K Dec  5  2013 modarin256root.ini
-rw-r--r-- 1 root root 4,1K Sep 24  2012 modarin256root-thin.ini
-rw-r--r-- 1 root root 4,1K Sep 24  2012 modarin256-thin.ini
-rw-r--r-- 1 root root 2,9K Dec  5  2013 nicedark.ini
-rw-r--r-- 1 root root 5,4K Dec  5  2013 sand256.ini
-rw-r--r-- 1 root root 3,9K Dec  5  2013 xoria256.ini

Выбрать тему оформления для Midnight Commander можно командой:

~|⇒ mc -S darkfar

Здесь ключ -S указывает, что при запуске Midnight Commander необходимо использовать тему оформления. Имя темы оформления (skin) указывается после ключа. Результат приведенной выше команды будет следующим:

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

Когда тема оформления выбрана, нужно прописать ее в конфигурационном файле Midnight Commander, чтобы последний запускался каждый раз именно с этим skin’ом.

Файл настроек Midnight Commander располагается по пути:

~|⇒ ll ~/.config/mc/ini

и запускается на редактирование таким образом:

~|⇒ nano ~/.config/mc/ini

В этом файле нужно найти строчку skin и изменить значение параметра на название файла темы (из /usr/share/mc/skins):

...
editor_filesize_threshold=64M
mcview_eof=
ignore_ftp_chattr_errors=true
skin=modarin256

[Layout]
message_visible=1
keybar_visible=1
...

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

По умолчанию в Linux Mint консоль не поддерживает отображение такого количества цветов. Если запустить Midnight Commander с темой modarin256 (к примеру), то появится ошибка и предложении использовать тему по-умолчанию (default).

Включить поддержку отображения 256 цветов в консоли можно, добавив строку export TERM=xterm-256color в файле .bash_profile (если используется BASH), в файле .zshrc (если используется ZSH), в файле .profile (если используется macOS).

В моем случае используется ZSH и файл .zshrc будет выглядеть таким образом:

# User configuration
...
export TERM=xterm-256color
...

Если все сделано без ошибок, то запуск Midnight Commander выдаст такой результат (используется тема оформления modarin256):

Можно попробовать тему xoria256 - хорошо проработанная тема, с которой также приятно работать. Об этой теме была статья на Хабрахабр - Цветовая схема Xoria256 для Midnight Commander:

Midnight Commander и кириллица в macOS

Установка и настройка Midnight Commander в операционной системе OSX мало отличается от аналогичных действий в Linux.

Устанавливать Midnight Commander в macOS проще всего с помощью Homebrew:

$ brew update
$ brew install mc

Не забываем включить поддержку 256 цветов в консоли OSX, если хотим использовать богатые цветом темы оформления Midnight Commander, такие как modarin256 или xoria256.

Для этого редактируем файл .bash_profile или файл .zshrc (если используется ZSH):

...
export TERM=xterm-256color
...

Дополнительным шагом будет добавление в файл .bash_profile (или .zshrc) двух строчек:

...
export LC_CTYPE=en_US.UTF-8
export LC_ALL=en_US.UTF-8
...

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

Вариант с добавлением строки:

export LANG=ru_RU.UTF-8

… в файле .bash_profile у меня не сработал.

На этом все.

С недавних пор на практике оценил преимущества использования профессиональных IDE для задач кодинга. К таким IDE я отношу WebStorm, Visual Studio Code, Aptana Studio.

До недавнего времени я пользовался отличным Sublime Text (к поклонникам Atom я себя не отношу) и все меня устраивало. Но в последнее время я все больше и больше начинаю заниматься с JavaScript (надо сказать - не без удовольствия, особенно впечатлил Canvas).

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

Описать конкретно, что именно мне понравилось в WebStorm vs Sublime Text, я так вот в двух словах и не могу. Но скажу только одно - работа в WebStorm действительно удобная; в этом IDE есть много продуманных и отшлифованных вещей, которые сильно облегчают жизнь кодера.

После того, как я оценил работу в WebStorm на Mac OS X, мне захотелось иметь этот IDE и на ноутбуке с Linux Mint 17.2 Cinnamon. Не могу сказать точно, почему так, но мне работать под Linux как-то комфортнее, чем под Mac OS X. Наверное, просто сказывается сила привычки - я linuxoid со стажем.

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

1

apt-get

1

pacman

А вот что касается Visual Studio Code, Aptana Studio или WebStorm - то официальных портов этих IDE в Debian \ Ubuntu-репозиториях нет (поправьте меня, если я ошибаюсь).

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

Как результат, я решил вкратце описать процесс ручной установки IDE WebStorm под Linux Mint 17.2 Cinnamon \ Xfce. Две другие IDE - Aptana Studio и Visual Studio Code устанавливаются абсолютно аналогично.

• Шаг первый - с официального сайта скачивается пакет под Linux (32 или 64 бита - на выбор)

• Шаг второй - делается копия скачанного архива с IDE WebStorm и помещается в любое удобное место (например, пусть это будет Desktop)

• Шаг третий - распаковывается архив с IDE WebStorm (который в Desktop)

• Шаг четвертый - в терминале запускается Midnight Commander с правами root:

  1

  sudo mc

  ; если вы вдруг не знаете, что такое Midnight Commander - то в самое время узнать о нем, так как это программа из разряда must have под системой Linux

• Шаг пятый - в Midnight Commander копируем распакованный архив WebStorm по пути

  1

  ~/opt/

  ; в итоге в

  1

  ~/opt/

  должна появиться папка примерно такого вида - “WebStorm-141.456” (

  1	~/opt/WebStorm-141.456

  )

• Шаг шестой - на любом пустом месте Desktop делаем правый клик мыши (ПКМ), чтобы вызвать контекстное меню

• Шаг седьмой - в контекстном меню находим строку “Create Launcher”; текст строки может отличаться в зависимости от того, что именно используется на конкретном Linux - Cinnamon или Xfce; тут главное - увидеть знакомое слово “Launcher”; в результате должно открыться примерно такое окно (в данном случае это Xfce):

• Шаг восьмой - вводим значения в поля этого окна; во все поля вводить данные необязательно; нужно ввести только имя приложения в поле “Name” - WebStorm; в поле “Command” вручную вводить путь к исполняемому файлу приложения нет необходимости - достаточно нажать на значок рядом с полем и откроется диалоговое окно “Select an Application”; дальше можно легко и удобно найти IDE WebStorm по пути:

  1	~/opt/WebStorm-141.456/bin/webstorm.sh

• Шаг девятый - в поле “Icon” добавляем фирменную иконку приложения WebStorm (чтобы легко углядеть WebStorm на Desktop); снова жмем на значок (уже в поле “Icon”); откроется диалоговое окно “Select an Icon”; в этом окне в выпадающем списке поля “Select icon from” выбираем самую нижнюю строку - “Image Files”; снова идем по пути

  1	~/opt/WebStorm-141.456/bin/webide.png

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

Это минимальная конфигурация, достаточная для нормального запуска приложения из Desktop. При первом запуске WebStorm-приложения Linux-система задаст вопрос - сделать ли запускаемый файл исполняемым. Естественно, соглашаемся - ведь нам нужно запустить и работать в WebStorm-приложении.

Как я уже упоминал ранее, установка двух других IDE - Aptana Studio и Visual Studio Code ничем не отличается от установки WebStorm. Единственный момент - для Visual Studio Code нужно покопаться с поисках фирменной иконки, которая расположена по пути:

1

~/opt/VSCode-linux-x64/resources/app/resources/linux/code.png

1

~/opt/VSCode-linux-x64/code

К слову сказать, лично я был приятно удивлен Visual Studio Code и разочарован Aptana Studio. WebStorm - вне конкуренции!

WebStorm темы

Хочу немного отклониться в сторону выбора темы оформления под IDE WebStorm. В Sublime Text это была однозначно - Material Theme.

Под WebStorm есть порт этой темы - Material Theme JetBrains.

Документация хорошо расписана и автор даже постарался создать возможность легкой и “кошерной” установки темы - через репозиторий JetBrains, из самого WebStorm.

Но, как мне кажется, эта тема заметно уступает своему “оригиналу” из-под Sublime Text (автор сам об этом упоминает).

Хорошая коллекция тем под WebStorm расположена по этим адресам:

• Color Themes for WebStorm
• 11 тем для WebIDE (PHPStorm & WebStorm)
• PHPStorm Themes

В дополнение можно еще установить модный шрифт Hack (на любителя). Или покопаться здесь - Top 11 Programming Fonts, чтобы выбрать что-то подходящее.

К примеру, автор блога WesBos долго пользовался OpenSource-шрифтом Inconsolata, а потом взял и купил шрифт Operator Mono за $200.

PS

Еще в тему установки программных пакетов для разработки под системой Linux стоит сказать, что под Ubuntu существует удобный пакет Ubuntu Make (он же Ubuntu Developer Tools Center в прошлом).

Задача пакета Ubuntu Make - быстрая и легкая установка общих потребностей разработчика в Ubuntu. Ubuntu Make может устанавливать:

• Android Studio
• PyCharm Community Edition
• IntelliJ Idea Community Edition
• и многие другие IDE.

На Хабрахабр есть небольшая обзорная статья об этом пакете - Ubuntu Make — разработчику в помощь.

Лично от себя могу сказать, что первый раз установка WebStorm при помощи Ubuntu Make на моем ноутбуке с Linux Mint 17.2 прошла “на ура”.

А вот во-второй раз что-то не заладилось и Ubuntu Make “не хочет” ставить WebStorm - выдает какую-то ошибку, с которой мне нет желания разбираться.

На этом все.

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

1

exports

1

module.exports

Что такое

1	module.exports

и

1

exports

в Node.js

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

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

1

module.exports

1

exports

Что такое модуль (module)

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

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

1

greetings.js

sayHelloInEnglish = function () {
  return 'Hello';
}

sayHelloInSpanish = function () {
  return 'Hola';
}

Экспорт модуля

Польза от файла (модуля)

1

greetings.js

1

greetings.js

Для достижения этого необходимо слегка изменить исходный код файла

1

greetings.js

• представьте себе, что эта строка существует в качестве первой линии кода в

  1	greetings.js

  :

var exports = module.exports = {}

• видоизменим обе функции в файле

  1	greetings.js

  с помощью выражения

  1

  exports

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

exports.sayHelloInEnglish = function () {
  return 'Hello';
}

exports.sayHelloInSpanish = function () {
  return 'Hola';
}

В приведенном выше коде можно было бы заменить выражение

1

exports

1

exports.module

Если этот момент кажется вам непонятным, то помните, что выражение

1

exports

1

exports.module

• это текущее значение выражения

  1	module.exports

  :

module.exports = {

  sayHelloInEnglish = function () {
    return 'Hello';
  }

  sayHelloInSpanish = function () {
    return 'Hola';
  }
}

Импортирование модуля

Давайте сделаем методы модуля

1

greetings.js

1

main.js

• в Node.js используется команда

  1

  require

  для импортирования одного модуля в другой модуль:

var require = function(path) {

  // ...

  return module.exports;
};

• давайте подключим модуль

  1	greetings.js

  в модуль

  1

  main.js

  :

// main.js
var greeting = require('./greetings.js');

Приведенная выше строка кода равнозначна нижеследующему коду:

// main.js
var greeting = {

sayHelloInEnglish = function () {
  return 'Hello';
}

sayHelloInSpanish = function () {
  return 'Hola';
}

}

• теперь можно использовать функции модуля

  1	greetings.js

  внутри модуля

  1

  main.js

  как методы объекта

  1

  greeting

  :

// main.js
var greeting = require('./greetings.js');

// Hello
greeting.sayHelloInEnglish('Hello');

// Hola
greeting.sayHelloInSpanish('Hola');

Отличительные моменты

Команда

1

require

1

module.exports

Нижеприведенный пример поможет разобраться в данном вопросе:

// greetings.js

// var exports = module.exports = {};

exports.sayHelloInEnglish = function () {
  return 'Hello';
}
exports.sayHelloInSpanish = function () {
  return 'Hola';
}

// Эта строка кода выполняет повторное переопределение,

module.exports = 'Bonjour';

Теперь сделаем подключение модуля

1

greetings.js

1

main.js

// main.js
var greetings = require('./greetings.js')

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

1

greetings

1

greetings.js

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

1

greetings.js

1

sayHelloInEnglish

1

sayHelloInSpanish

1

module.exports

Другими словами, последней командой

1

module.exports

1

Bonjour

1

sayHelloInEnglish

1

sayHelloInSpanish

// main.js
// var greetings = require("./greetings.js");

/*
 * TypeError: object Bonjour has no
 * method 'sayHelloInEnglish'
 */
greetings.sayHelloInEnglish();

/*
 * TypeError: object Bonjour has no
 * method 'sayHelloInSpanish'
 */
greetings.sayHelloInSpanish();

Чтобы отследить ошибки при использовании модуля

1

greetings

// "Bonjour"
console.log(greetings);

Заключение

Импорт и экспорт модулей в Node.js является ежедневной задачей. Я надеюсь, что благодаря этой статье стала ясна разница между командой

1

exports

1

module.exports

Заключение автора перевода

Если честно - прочитал статью и даже потрудился перевести ее, а вот разницы между

1

exports

1

module.exports

UPD. Вопрос снят, так как решен. В принципе, существование этой и предыдущей статьи уже не надобно, так как есть отличный скринкаст от Ильи Кантора по Node.js, где раскрываются все вопросы - Скринкаст NODE.JS.

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

Данная статья является прочтением и переосмыслением перевода Node.js, Require и Exports статьи-оригинала Node.js, Require and Exports.

Помимо этого, существует еще одна неплохая статья, посвященная данной тематике - Understanding module.exports and exports in Node.js.

Тематика данного поста посвящена двум командам Node.js -

1

require

1

module.exports

С помощью этих команд Node.js осуществляет взаимодействие своих модулей между друг другом.

Команда

1

require

1

module.exports

Ниже - краткое изложение статьи-оригинала …

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

Например, у нас есть файл

1

misc.js

const x = 5;
let summ = function (value) {
  return value + x;
}

Привычный доступ к константе

1

x

1

summ

1

var

Дело в том, что Node.js состоит из блоков, называемых модулями; и каждый отдельный файл по своей сути — отдельный блок (модуль), чья область видимости изолирована от других таких же блоков (модулей).

Теперь перед тем как мы узнаем, как сделать эти штуки видимыми вне модуля, рассмотрим более подробно, как загружаются модули в Node.js.

Сейчас речь пойдет о том месте, где пишется -

1

require

1

require

let someModule = require('./some_module');

Другими словами можно сказать, что в Node.js служебное слово

1

require

служит для подключения одного независимого модуля (файла) к другому независимому модулю (файлу). Принцип подключения через

1

require

заключается в создании в целевом модуле объекта и помещении в этот объект подключаемого модуля.

Конечно же, до тех пор, пока наш модуль (

1

some_module

А чтобы наш модуль (

1

some_module

1

module.exports

const x = 5;
let summ = function (value) {
  return value + x;
};
module.exports.x = x; // сделали константу 5 доступной из других модулей
module.exports.summ = summ; // сделали переменную summ доступной из других модулей

Вот теперь наш модуль (

1

some_module

let someModule = require('./some_module');

В результате в целевом модуле будет создан объект

1

someModule

1

x = 5

1

someModule.x

1

summ

1

someModule.summ

Есть ещё такой способ отдать штуки из нашего модуля:

let User = function (name, email) {
  this.name = name;
  this.email = email;
};
module.exports = User;

То есть, в исходном модуле создается объект

1

User

со свойствами

1

User.name

и

1	User.email

. Затем с помощью служебного слова

1	module.exports

объект

1

User

делается доступным для других модулей Node.js.

Разница между этими подходами не велика, но важна. Как видно, в данном случае мы экспортируем функцию напрямую:

module.exports.User = User;

// vs

module.exports = User;

Всё это к тому, что потом ее будет легче использовать:

var user = require('./user');

var u = new user.User();

// vs

var u = new user();

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

Чтобы еще более красочно представить процесс взаимодействия модулей, давайте рассмотрим следующий пример:

let powerLevel = function (level) {
  return level > 9000 ? "it's over 9000" : level;
};
module.exports = powerLevel;

Когда вы подключите данный модуль используя

1

require

let someModule = require('./powerlevel')(9000);

Что, по сути, является упрощенной записью следующего кода:

let someModule = require('./powerlevel');
someModule(9000);

Это все кратко о командах

1

require

1

module.exports

Данная статья Tips for Creating a First-Class Personal Portfolio показалась мне интересной в качестве повышения личного опыта. Советы в этой статье больше относятся к дизайнерам; но их в полной мере можно отнести и к Frontend Developer’у. Статья написана редактором и основателем Speckyboy Design Magazine Полом Эндрю (Paul Andrew). Ниже привожу вольный перевод статьи.

Логотип и слоган

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

Уникальный логотип из портфолио Inal

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

Итак, запомните: быстрый и краткий ответ на вопрос “Зачем” или же потенциальный клиент забудет о вашем портфолио раньше, нежели вы можете себе это представить.

Слоган из портфолио Mike Etheridge

Простая навигация

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

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

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

Простая и доступная навигация из портфолио Robin Man

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

Доступные контакты

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

Matthew Miller

Показывайте только лучшее

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

Страница из портфолио Camille Leonard

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

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

Продвинутая страница портфолио Kata Farkas

Сортируйте ваши работы

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

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

Каталогизация работ в портфолио Huncwot

Добавьте отзывы

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

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

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

Что вы умеете

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

Страница с услугами из портфолио Studio Sweep

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

Личная информация

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

Страница с личной информацией из портфолио Calvin Teoh

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

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

X-фактор

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

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

И снова вернемся к теме ответа на вопрос “Почему?” Если принимать во внимание X-фактор, то это поможет потенциальному заказчику ответить на его вопрос.

Уникальность дизайна из портфолио Colin Snow

В заключение можно привести ссылку на подборку из 50 креативных портфолио, которые могут послужить образцом для подражания и примера - 50 Inspirational and Creative Portfolios Sites.