Overview
Travel blog project was designed for a client from New York City. Idea behind this project is creating a design (using Figma) for a website that is a mix of personal blog & travel website. Design parameters were set to follow modern typography and balanced hierarchy. Aside from foundational parameters, flat colors were used as well. Overall UI isn't complex too much, it's easy to follow through, making UX smooth. Multiple components were built for this project, including buttons, headings, blocks, group of icons, footer etc.
Stack
Figma -
UI, UX, Balanced typography, modern approach to designFeatures
Slider Component
Slider created for listed destination elements, with details such as description, price, duration.
First section on travel blog design is a slider for destination elements. On this section i applied modern practices and principles in order for section & component to have modern flat-ish look. This section was also inspired by ReactJS components. Slider section displays blocks user can slide through, each block provides it's own information about a specific destination, such as description, duration of a tour, price etc.
Latest Video
Section highlighting the latest video client uploaded to YouTube.
Latest video section displays client's latest video uploaded to YouTube channel. Idea behind this section is to additionally promote youtube content client is making on monthly basis. User is able to access video in full resolution right from the section.
Blog Section
Integrated blog section displaying latest blogs related to travel, published by client.
Blog section presents 3 latest blogs published by client. Idea here is to promote blog content client creates on monthly basis. This section intends to use flexbox or css grid to achieve exact view as shown on design. Each blog block is it's own component that is meant to be reusable.
Autobiography & Contact Section
Section that includes both autobiography and contact details.
This section is a mix of a client's autobiography and contact details. Autobiography transitions into the next section below it, which is newsletter section, simply by overlapping white linear gradient color on autobiography to newsletters.
Newsletter & Footer
Newsletter functionality using email service & plain simple footer.
Newsletter & Footer are two separate components, though they can be grouped together creating one reusable component that can be used across the website. Both newsletter section and footer intends to use flexbox to achieve pixel perfect "design to front-end" and responsiveness on smaller screens.
Conclusion
Intentionally, design is supposed to be converted to pixel perfect front-end using ReactJS. Most of the elements found on design are standalone components. Reusability was one of the parameters set for this project. Due for this reason, RJS would be the perfect fit for actually developing this website. From wireframe to full design, project turned out to be success, next step is converting design to front-end. After completion of final step, this study page will be updated.