Розробка мобільного додатку для портфоліо (фотограф, дизайнер)
Портфоліо-додаток — це вітрина. Загрузка першого зображення за 3 секунди убивает враження. Кривава галерея з одинаковими квадратними превью хоронит авторський стиль. Завдання — показати роботи швидко, красиво та з правильними пропорціями.
Галерея зі збереженням aspect ratio
Квадратна сітка для портфоліо — поганий вибір: фотограф снимає в 3:2 та 16:9, ілюстратор — в 4:5 та 1:1. Використовуємо waterfall layout (Pinterest-style) або adaptive grid зі збереженням пропорцій.
iOS: UICollectionViewFlowLayout з estimatedItemSize погано справляется з waterfall. Правильний вибір — кастомний UICollectionViewLayout, де ячейки розподіляються по колонкам жадно з мінімальною різницею висот. Або UICollectionViewCompositionalLayout з .fractionalWidth та групами різних розмірів для editorial-сіток.
Android/Compose: StaggeredVerticalGrid з Material3 або LazyStaggeredVerticalGrid. Висота кожної ячейки обчислюється з aspect ratio зображення до загрузки — якщо API отдає width/height в метаданих, skeleton буде правильного розміру без стрибків.
Flutter: flutter_staggered_grid_view з StaggeredGrid.count.
Загрузка зображень: прогресивний JPEG та blurhash
Перше враження — це placeholder до загрузки. Blurhash (20-30 байт строка, кодує кольори зображення) дає кольоровий розмитий превью миттєво. Сірий прямокутник — ні.
На iOS: SDWebImage або Kingfisher з blurhash placeholder. На Android: Coil з placeholder(blurhashDrawable). На Flutter: cached_network_image + flutter_blurhash.
Прогресивний JPEG: браузер рендерит його поступово, мобільні фреймворки — ні (показують пусте поле до повної загрузки). Для великого JPEG > 1 МБ використовуємо тайлінг через CATiledLayer (iOS) або SubsamplingScaleImageView (Android) — зображення відображається по частинах.
Детальний перегляд та жесты
Перегляд фото на весь екран: UIPinchGestureRecognizer + UIPanGestureRecognizer на iOS з CALayer.transform (не frame — інакше лаги). Правильний zoom: double-tap збільшує до 2x в точці дотику, повторний — повертає. На Android: PhotoView library або TransformationLayout. Flutter: photo_view package.
Перехід з галереї в детальний: shared element transition. На iOS — UIViewControllerTransitioningDelegate з animateTransition, ячейка «улетає» на місце на детальному екрані. На Android Compose — sharedBounds Modifier з Compose Navigation.
Організація портфоліо
Структура: проєкти → серії → фотографії. Фотограф створює серії (весілля Іванових, портретна зйомка), клієнт бачит акуратні альбоми. Або теги для плоскої навігації.
Drag & drop для переупорядкування: UICollectionView з UICollectionViewDragDelegate (iOS 11+). Android Compose: ReorderablelazyGrid з reorderable library.
Контакты та privacy
Фотограф не хочет показувати особистий телефон всім — використовуємо форму зворотного зв'язку через API (Resend, SendGrid). Водяний знак на зображеннях: CoreGraphics / Canvas / CustomPainter — накладаємо прозорачний логотип поверх зображення при шарингу, не в сховищі.
Строки: додаток-портфоліо з галереєю, детальним переглядом та контактною формою — 2-3 тижні. З CMS для управління контентом та push-уведомленнями про нові роботи — 4-5 тижнів.