Дизайн 1 экрана для приложения

Ссылка на конкурс

Бюджет: 5 000

Победители конкурса

1 место: Александр Слышенко

2 место: победитель не выбран

3 место: победитель не выбран

нужно задизайнить 1 экран для приложения (Iphone x )
есть набросок и что хотелось бы получить
Это экран просмотра уже забронированного отеля
Набросал примерное видение того что хочется –
поместить всю информацию в белые квадраты чтобы не так много синего было
и вынести каждую комнату в отдельный блок
возможно косую линию под фото нужно сделать как нарисовано рядом
и под фото должно быть 2 кнопки – плюсик и иконка карты

К вечеру/утру выберу победителя на связи буду постоянно

Опубликован 10.10.2018 в 18:59 Последнее изменение: 10.10.2018 в 19:39

Посмотреть другие конкурсы

Конкурсные работы

Свернуть все ветки комментариев (13)

Станислав Соя

10.10.2018 | 19:21

+
- Ссылка
Денис Степанищев

10.10.2018 | 19:36 обновлено: 10.10 2018 | 22:50

Такой вариант
---
Залил второй файл с правками
--
3 файл залил
- Добавлено 10.10.2018 в 20:19
- Добавлено 10.10.2018 в 20:47
- Добавлено 10.10.2018 в 21:31
- Добавлено 10.10.2018 в 22:50
- Ссылка
- Свернуть ветку (8)
- Заказчик [Unoegohh12]
  
  10.10.2018 | 20:24
  такс а можно сделать несколько поправок –
  1 – увеличить шрифт раза в полтора
  2 – сделать все отступы одного размера
  3 – сделать небольшой градиент синего от темного к светлому на фоне(едва заметный)
  4 – уменьшить высоту треугольника который заползает на фото (раза в 1.5)
  5 кнопки чтобы немного заползали на этот треугольник
  6 – добавить тени к кнопкам и всем плашкам
  
  такс а можно сделать несколько поправок –
  1 – увеличить шрифт раза в полтора
  2 – сделать все отступы одного размера
  3 – сделать небольшой градиент синего от темного к светлому на фоне(едва заметный)
  4 – уменьшить высоту треугольника который заползает на фото (раза в 1.5)
  5 кнопки чтобы немного заползали на этот треугольник
  6 – добавить тени к кнопкам и всем плашкам
  
  Ссылка
- Заказчик [Unoegohh12]
  
  10.10.2018 | 20:28
  синий и оранжевый цвет можно менять на другие)
  
  синий и оранжевый цвет можно менять на другие)
  
  Ссылка
  - Денис Степанищев
    
    10.10.2018 | 20:48
    
    Залил второй файл с правками вашими
    
    Залил второй файл с правками вашими
    
    Ссылка
    - Заказчик [Unoegohh12]
      
      10.10.2018 | 21:03
      
      как то все очень прижато смотрится( шрифт можно еще увеличить добавить отступы в каждый блок и сделать расстояния от края экрана и между блоками одинаковыми
      
      как то все очень прижато смотрится( шрифт можно еще увеличить добавить отступы в каждый блок и сделать расстояния от края экрана и между блоками одинаковыми
      
      Ссылка
      - Денис Степанищев
        
        10.10.2018 | 21:31
        
        залил третьим файлом
        
        залил третьим файлом
        
        Ссылка
        
        Заказчик [Unoegohh12]
        
        10.10.2018 | 22:04
        
        вот норм уже) но вот переход линией уже не так нравится можно сделать волну как я рисовал карандашем и отделить ее бордером белым в 2 пикселя по контуру этой волны
        
        вот норм уже) но вот переход линией уже не так нравится можно сделать волну как я рисовал карандашем и отделить ее бордером белым в 2 пикселя по контуру этой волны
        
        Ссылка
        
        Денис Степанищев
        
        10.10.2018 | 22:13
        
        переход тот что наискосок имеете ввиду? его сделать волной?
        
        переход тот что наискосок имеете ввиду? его сделать волной?
        
        Ссылка
        
        Денис Степанищев
        
        10.10.2018 | 22:50
        
        залил 4й файл
        
        залил 4й файл
        
        Ссылка
Кинг Дезигн

10.10.2018 | 22:18 обновлено: 11.10 2018 | 11:54

+
- Добавлено 11.10.2018 в 02:49
- Добавлено 11.10.2018 в 11:54
- Ссылка
Фрилансер [AlexRyzhikov]

10.10.2018 | 22:25 обновлено: 11.10 2018 | 21:07

Экран просмотра забронированного отеля.
Реализованы все пункты изложенные выше. (Картинка № 2)
Дизайн акцентирует внимание пользователя на главных аспектах его заказа.
Наличие картинок позволяет интуитивно понять назначение элементов.
Это делает пользование нашего приложения лёгкий и удобным.
Также реализован градиент, цвет которого легко настроить под любое фото.

P.S. Решено отказаться от косой линии. Она занимает слишком много места и нарушает порядок элементов.
Как человек, который верстал мобильные приложения, могу сказать, что она бесполезна и будет только мешать .
Также наличие горизонтальной линии делает возможным нормальное пролистование фото, что в случае с косой линиией невозможно. (Зачем показывать пользователю фото, часть которого срезана. Это портит внешний вид приложения)

На картинке №1 показан первый мокап. Он отражает моё виденье, но на нём нет необходимых по условию элементов (Знак плюса, комнаты). Это реализовано на картинке №2.
- Добавлено 11.10.2018 в 21:07
- Добавлено 11.10.2018 в 20:36
- Ссылка
Фрилансер [eugene-doe]

10.10.2018 | 23:30
- Добавлено 10.10.2018 в 23:30
- Ссылка
Игорь Григорьев

11.10.2018 | 00:11
- Добавлено 11.10.2018 в 00:11
- Ссылка
Александр Слышенко

11.10.2018 | 02:32 обновлено: 11.10 2018 | 02:36

Немного позволил себе пересмотреть концепцию для лучшего UX.

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

В идеале, было бы ещё здорово переработать желтые кнопки, либо как-то пояснив их (я так и не понял, к примеру, к чему должен вести "плюс"), либо поместить их в контекст (геолокация рядом с адресом, "плюс" – рядом с тем, куда он логически относится).

Внизу добавлена опция сохранения подтверждения бронирования (логичное завершение пути пользователя в целом и взаимодействия с этим конкретным экраном тоже).
- Добавлено 11.10.2018 в 02:34
- Добавлено 11.10.2018 в 02:33
- Добавлено 11.10.2018 в 02:36
- Добавлено 11.10.2018 в 02:36
- Ссылка
- Свернуть ветку (2)
- Заказчик [Unoegohh12]
  
  11.10.2018 | 16:57 обновлено 11.10.2018 | 16:57
  Здравствуйте – вы победили) но пока не могу вас выбрать изза даты конкурса
  Можно попросить еще уместить всю необходимую информацию на экране и сделать его одним длинным экраном
  Инфо о отеле –
  Фото,
  Звездность,
  название ,
  адрес,
  даты заезда и выезда
  кнопка позвонить в отель, кнопка показать на карте или карта
  сколько номеров, гостей, ночей
  и информация по номерам которых будет 1+
  кто главный гость, название номера, квадратура, коментарий (вид на сад, вид на море), тип питания,кто именно будет жить в номере (от 1 до 8 человек с именами и фамилиями (и можно икеонкой показывать возраст. взростый, ребенок, и младенец)) и доп информацию по номеру – тут будет инфо о отмене номера (дата бесплатной отмены и штраф после этой даты, а также удобства в номере для примера список ниже)
  
  Бесплатный интернет
  Бесплатная парковка
  Завтрак "шведский стол"
  Кондиционер
  С видом на пляж
  
  и все имена должны быть латиницей с большими буквами
  
  Здравствуйте – вы победили) но пока не могу вас выбрать изза даты конкурса
  Можно попросить еще уместить всю необходимую информацию на экране и сделать его одним длинным экраном
  Инфо о отеле –
  Фото,
  Звездность,
  название ,
  адрес,
  даты заезда и выезда
  кнопка позвонить в отель, кнопка показать на карте или карта
  сколько номеров, гостей, ночей
  и информация по номерам которых будет 1+
  кто главный гость, название номера, квадратура, коментарий (вид на сад, вид на море), тип питания,кто именно будет жить в номере (от 1 до 8 человек с именами и фамилиями (и можно икеонкой показывать возраст. взростый, ребенок, и младенец)) и доп информацию по номеру – тут будет инфо о отмене номера (дата бесплатной отмены и штраф после этой даты, а также удобства в номере для примера список ниже)
  
  Бесплатный интернет
  Бесплатная парковка
  Завтрак "шведский стол"
  Кондиционер
  С видом на пляж
  
  и все имена должны быть латиницей с большими буквами
  
  Ссылка
  - Александр Слышенко
    
    11.10.2018 | 17:23
    
    Благодарю)
    
    Постараюсь в ближайшее время набросать вариант с учетом этих опций. Если вам будет удобно, напишите мне для дальнейшей координации в ВК (не знаю, могу ли я давать свои контакты без про-аккаунта, но меня несложно найти по имени и аватарке)
    
    Благодарю)
    
    Постараюсь в ближайшее время набросать вариант с учетом этих опций. Если вам будет удобно, напишите мне для дальнейшей координации в ВК (не знаю, могу ли я давать свои контакты без про-аккаунта, но меня несложно найти по имени и аватарке)
    
    Ссылка
Константин Золотовъ

11.10.2018 | 02:45

+
- Ссылка
Михаил Ниделька

11.10.2018 | 03:16 обновлено: 11.10 2018 | 15:29

Здравствуйте. Выкладываю свою работу. Фон решил сделать нейтральным. Если сделать фон определенного цвета, то он подойдет не ко всем изображениям отелей. Поэтому выделение цветом лучше использовать в мелких элементах.
Я сделал несколько цветов на выбор, если хотите другой вариант, дайте знать.
Готов к любым правкам, если вам что-то не понравилось.
- Добавлено 11.10.2018 в 15:29
- Добавлено 11.10.2018 в 15:29
- Добавлено 11.10.2018 в 15:29
- Добавлено 11.10.2018 в 15:29
- Ссылка
Andrey Ershov

11.10.2018 | 04:41

Мои варианты
- Добавлено 11.10.2018 в 04:41
- Ссылка
- Свернуть ветку (2)
- Алексей Анатольевич
  
  11.10.2018 | 16:26
  Левый вариант самый интересный из всех здесь представленных
  Только иконка пина/ + / текст бесплатная отмена как то допилить бы. Не вяжется. Последнее не текст по идее а контрол должен быть. Добавить просится в navbar. А пин точно не лезет по гайдам в виде круглой кнопки.
  Прошу прощение за коммент. Но прикольно выходит у вас. Я бы на месте заказчика присмотрелся б к этой работе.
  
  Левый вариант самый интересный из всех здесь представленных
  Только иконка пина/ + / текст бесплатная отмена как то допилить бы. Не вяжется. Последнее не текст по идее а контрол должен быть. Добавить просится в navbar. А пин точно не лезет по гайдам в виде круглой кнопки.
  Прошу прощение за коммент. Но прикольно выходит у вас. Я бы на месте заказчика присмотрелся б к этой работе.
  
  Ссылка
  - Andrey Ershov
    
    11.10.2018 | 16:42
    
    за коммент спасибо) если заказчик выберет мой вариант, то мелочи доработаем
    
    за коммент спасибо) если заказчик выберет мой вариант, то мелочи доработаем
    
    Ссылка
Фрилансер [Azatik1022]

11.10.2018 | 06:05 обновлено: 11.10 2018 | 14:43

Здравствуйте!
Сделал вариант с кривой линией. По-моему так совсем не смотрится.
Пиктограммы + и карта выводятся за пределы фото и создается ощущение что они не относятся к отелю а стоят обособленно.
- Добавлено 11.10.2018 в 14:43
- Добавлено 11.10.2018 в 14:43
- Ссылка
Евгения Каботова

11.10.2018 | 09:03

+
- Ссылка
Вячеслав Дмитриев

11.10.2018 | 10:47 обновлено: 11.10 2018 | 15:49

какой функционал выполняет кнопка плюса?
- Добавлено 11.10.2018 в 14:46
- Добавлено 11.10.2018 в 14:46
- Добавлено 11.10.2018 в 15:11
- Добавлено 11.10.2018 в 15:41
- Добавлено 11.10.2018 в 15:41
- Добавлено 11.10.2018 в 15:49
- Добавлено 11.10.2018 в 15:49
- Добавлено 11.10.2018 в 15:49
- Ссылка
- Свернуть ветку (1)
- Заказчик [Unoegohh12]
  
  11.10.2018 | 11:26
  хороший вопрос! я не знаю это было очень четкое тз что она должна быть))
  
  хороший вопрос! я не знаю это было очень четкое тз что она должна быть))
  
  Ссылка
Денис Иванов

11.10.2018 | 12:36

Ответ от заблокированного пользователя
- Ссылка
Ирина Малина

11.10.2018 | 14:55
- Добавлено 11.10.2018 в 14:55
- Ссылка
Фрилансер [nataleto]

11.10.2018 | 17:04 обновлено: 11.10 2018 | 17:05

Здравствуйте!
Сделала 2 варианта, можно реализовать как дневную и ночную темы. Так как всем известно, что при работе в ночное время глаза могут уставать от большого контраста.
- Добавлено 11.10.2018 в 17:04
- Ссылка
Фрилансер [IrinaUsataia]

11.10.2018 | 23:52
- Добавлено 11.10.2018 в 23:52
- Добавлено 11.10.2018 в 23:52
- Добавлено 11.10.2018 в 23:52
- Ссылка