Imageshosting

Design and code of a service, allowing to share images and comment them.

Task: design and code HTML & CSS of the web-service, write a technical note. Bonus task: code the part described in the technical note.

Tools: Photoshop, HTML, CSS

2018

It is the first project I made for the programming faculty of edtech company Netology. I had an opportunite to try myself in every role: a designer, an HTML coder, a project manager, a frontend coder.

An initial task was to design a hosting for images that would allow to do 4 things:

  • uploading a picture from PC;
  • drawing on the uploaded picture;
  • leaving a comment;
  • sharing a link.

The final design is a neat UI with a user image as a core. All functions are availible in the draggable menu.

I love this project because I learned a lot from it. It took me 4 iterations to make it right.

It's nice to see how the design becomes simpler with every step, distancing from the Photoshop interface.

Design was just a first step. Next I had to code the layout, and after that I also had to write a technical task, describing the entire UI and requirements for it. The technical task can be found here. There is also a source code.

Students are offered to write a JavaScript code which will bring the interface to life, making it able to send and receive files, to draw on canvas, to get and send messages. I tried myself in this role too.

You can see how I managed to do it and try a service here.

Хостингкартинок

Дизайн и вёрстка сервиса для хостинга и рецензирования изображений.

Задача: разработать веб-сервис. Бонусная задача: выполнить работу по собственному техническому заданию.

Инструменты: Photoshop, HTML, CSS

2018

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

Исходной задачей было разработать дизайн для хостинга изображений, который позволял бы пользователю делать четыре вещи:

  • Загружать изображения с компьютера;
  • Рисовать поверх изображений;
  • Оставлять комментарии;
  • Делиться ссылкой на изображения с рисунками и комментариями.

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

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

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

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

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

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