Jeva Photography
Used tools
Figma – wireframing, UI components
WordPress – site built with
Bricks Builder – WordPress page builder
Adobe Photoshop – image colour space conversion
Imagine – bulk image precompress
Laragon – local development solution
Aims, approaches
Mobile-first approach
- Be suitable for 4 language – no text except numbers or common expressions (example: pay with card)
SCSS
- Provide guidance (hand pushing buttons, choosing from products, or typing in details)
- Inform the customer (status indicator animations – indicate which spots are free / begin fueling / occupied)
- Elevate the overall experience visually.
Fluid typography and space scaling
Aim for a 95%+ score on benchmarks (Google Page Insights and GTMetrix).
- Opposed to the UI, animations are hard to design with iterating. You need a clear plan, define the graphic assets, make it compatible with the animation software – a lot of pre-work with Illustrator or Affinity Designer.
- An animation may “look nice” standalone, but it should not distract the user from the main part of the screen.
- The animation starts when the new screen loads, and repeats indefinetly, until the user navigates further / beyond. You supposed to serve a consistent experience across all the screens, wether the user goes through the process fast or slow. Every animation should have the same, fixed, common background.
Different hero sections for desktop and mobile. The same image, combined with CSS pseudo-elements.