{"id":619,"date":"2024-04-28T12:40:08","date_gmt":"2024-04-28T12:40:08","guid":{"rendered":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/?p=619"},"modified":"2024-05-11T21:15:18","modified_gmt":"2024-05-11T21:15:18","slug":"mid-fidelity-wireframes-about-us-events-landing-page-checkout","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/entire-project-2b\/design-process\/mid-fidelity-wireframes-about-us-events-landing-page-checkout\/","title":{"rendered":"Mid fidelity wireframes – about us, events landing page, checkout"},"content":{"rendered":"\n

This stage marked the transition from low-fidelity wireframes to a more defined style for our project. I took the lead on the initial design for the “About Us” and events landing pages, and when I presented my ideas to the group, they adopted my style for their own pages, which was quite rewarding.<\/p>\n\n\n\n

To align with the new brand guidelines, I carefully studied their slide deck, incorporating the colour palette, font styles, and illustration techniques. As a team, we initially experimented with white backgrounds and the signature Virgin Wines red, but it ended up looking too much like a first-aid kit\u2014too medical. So, I decided to move away from that direction, opting for a new colour palette and using the bright red sparingly.<\/p>\n\n\n\n

\n
\n
\n
\n
\"\"
Primary colour palette<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Secondary colour palette<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\"\"
New background imagery <\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"
Their illustration ideas<\/figcaption><\/figure><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

As shown earlier, Virgin Wines had designed some new illustrations, which I was eager to include because I felt they added a joyful touch to the design. I recreated some of their illustrations and produced a few of my own, keeping in line with their style and colours.<\/p>\n\n\n\n

\n
\n
\"\"
Grape illustration I designed using inspiration from their illustration styles<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Red wine glass illustration I drew using their illustration<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Red wine bottle illustration I drew using their illustration<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Throughout the design process, I focused on presenting information in a visually engaging and interactive way to capture the viewer’s attention. For example, on the “About Us” page, I turned their slogan into playful illustrations, using a little grape and glass, rather than just text. For the events landing page, I conveyed information about the four events in a more stylised manner, aiming to attract more interest.<\/p>\n\n\n\n

\n
\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

The image above shows my mid-fidelity designs for the ‘About Us’ page, where we combined the sustainability values with the ‘About Us’ content. At this stage, I struggled with how to present and integrate the sustainability information effectively. This required considerable trial and error to find the right approach.<\/p>\n\n\n\n

Overall, for the mid-fidelity wireframes, I established the style for all pages, designed the “About Us” and events landing pages, and outlined the checkout process. I also designed some illustrations for the site, selected the colour palettes, and created an animation video. I’m pleased with what I achieved during this stage.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Above are my mid fidelity designs for the events landing page, experimenting with text position and layout. <\/p>\n\n\n\n

\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Above are my mid fidelity designs for the checkout process. I designed the entirety of the checkout process and then Ellana would turn it into mobile from my designs. <\/p>\n","protected":false},"excerpt":{"rendered":"

This stage marked the transition from low-fidelity wireframes to a more defined style for our project. I took the lead on the initial design for the “About Us” and events landing pages, and when I presented my ideas to the group, they adopted my style for their own pages, which was quite rewarding. To align with the new brand guidelines, I carefully studied their slide deck, incorporating the colour palette, font styles, and illustration techniques. As a team, we initially experimented with white backgrounds and the signature Virgin Wines red, but it ended up looking too much like a first-aid kit\u2014too medical. So, I decided to move away from that direction, opting for a new colour palette and using the bright red sparingly. As shown earlier, Virgin Wines had designed some new illustrations, which I was eager to include because I felt they added a joyful touch to the design. I recreated some of their illustrations and produced a few of my own, keeping in line with their style and colours. Throughout the design process, I focused on presenting information in a visually engaging and interactive way to capture the viewer’s attention. For example, on the “About Us” page, I turned their slogan into playful illustrations, using a little grape and glass, rather than just text. For the events landing page, I conveyed information about the four events in a more stylised manner, aiming to attract more interest. The image above shows my mid-fidelity designs for the ‘About Us’ page, where we combined the sustainability values with the ‘About Us’ content. At this stage, I struggled with how to present and integrate the sustainability information effectively. This required considerable trial and error to find the right approach. Overall, for the mid-fidelity wireframes, I established the style for all pages, designed the “About Us” and events landing pages, and outlined the checkout process. I also designed some illustrations for the site, selected the colour palettes, and created an animation video. I’m pleased with what I achieved during this stage. Above are my mid fidelity designs for the events landing page, experimenting with text position and layout. Above are my mid fidelity designs for the checkout process. I designed the entirety of the checkout process and then Ellana would turn it into mobile from my designs.<\/p>\n","protected":false},"author":1,"featured_media":733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/619"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":2,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/619\/revisions"}],"predecessor-version":[{"id":734,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/619\/revisions\/734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/media\/733"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/media?parent=619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/categories?post=619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/tags?post=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}