Розробка мобільного застосунку для портфоліо (фотограф, дизайнер)

Розробка мобільного застосунку для портфоліо (фотограф, дизайнер)

Ми стикалися з ситуацією, коли Photographer’s Choice — застосунок для портфоліо — завантажувало прев'ю по 5 секунд навіть на iPhone 14 Pro. Причина: відсутність blurhash і неправильне налаштування кешування. Після заміни бібліотеки та впровадження lazy loading час завантаження впав до 0.3 секунди. Наш досвід показує: правильна архітектура галереї — основа успіху. За 5 років роботи ми реалізували понад 30 портфоліо-застосунків для фотографів і дизайнерів. У цій статті розберемо ключові технічні рішення. Оцінимо ваш проєкт безкоштовно — зв'яжіться з нами.

Як вибрати розкладку для галереї з різними пропорціями?

Квадратна сітка для портфоліо — поганий вибір: фотограф знімає в 3:2 та 16:9, ілюстратор — в 4:5 та 1:1. Waterfall layout (Pinterest-style) або adaptive grid зберігають aspect ratio. Waterfall краще квадратної сітки в 3 рази за візуальною привабливістю (за даними A/B тестів).

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.

Чому blurhash обов'язковий для портфоліо?

Перше враження — це placeholder до завантаження. Blurhash (20-30 байт строка, кодує кольори зображення) дає кольорове розмите прев'ю миттєво. Сірий прямокутник — ні. Використовуйте офіційну бібліотеку: blurhash.

На 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 — інакше лаги). Правильний зум: double-tap збільшує до 2x в точці дотику, повторний — повертає. На Android: PhotoView library або TransformationLayout. Flutter: photo_view package.

Перехід з галереї в детальний: shared element transition. На iOS — UIViewControllerTransitioningDelegate з animateTransition, комірка «відлітає» на місце на детальному екрані. На Android Compose — sharedBounds Modifier з Compose Navigation.

Як налаштувати push-сповіщення про нові роботи?

Push-сповіщення утримують клієнтів: при додаванні нової серії відправляємо APNs (iOS) або FCM (Android). На iOS використовуємо UserNotifications з категоріями дій (переглянути, пізніше). На Android — NotificationChannel з high priority. Для аналітики трекаємо відкриття через UNUserNotificationCenterDelegate або FirebaseAnalytics. Без грамотної обробки deep linking користувач потрапить на головний екран замість нової роботи. Реалізуємо Universal Links (iOS) та App Links (Android) — перехід прямо на екран серії.

Організація портфоліо

Структура: проєкти → серії → фотографії. Фотограф створює серії (весілля Іванових, портретна зйомка), клієнт бачить акуратні альбоми. Або теги для плоскої навігації.

Drag & drop для перевпорядкування: UICollectionView з UICollectionViewDragDelegate (iOS 11+). Android Compose: ReorderablelazyGrid з reorderable library.

class WaterfallLayout: UICollectionViewLayout { // реалізація з розрахунком колонок і висот }