Web Design | Project 2|Event Website
Process work:
Idea: A hot air balloon festival inspired by the Albuquerque balloon festival in New Mexico.
Topic: Balloon Festival
Mood Boards
Thumbnail sketches
Logo ideas:
Idea 1:
Idea 2:
Idea 3:
Idea 4:
Idea 5:
Prototypes:
User Testing Feedback:
- The homepage could have some form of navigation on all pages; a drop-down menu. Could be at the bottom of the page instead of the top.
- Banners on subpages could be smaller or thinner; to see more of each page before scrolling down. Have them be in a specific color or some image
- Balloons on the homepage: be in a line, when hovered over could grow or highlighted
- Add vendors to the map subpage. Icons on the map show where they are and have a list of what's what.
- The photo at the footer in subpages could be smaller or use a different image as a transparent background.
Persona:
Balloon Festival | User Persona
Pamela Foran
Age:57
Gender: Female
Location: Slippery Rock, PA
Occupation: Church Secretary
Personality:
- Lighthearted and fun
- Caring and Sincere
Values:
- Mom of 5
- Spending time with family
- Faith
- Honesty
Motivations:
- Interest in hot air balloons and love for them
- Find tickets to a festival and compare which one is the best.
Goals:
- Find fun places to visit while on a trip out west.
- Find a good spot that offers reasonable pricing for larger groups or families
Frustrations:
- Finding a place that works for all ages
- Offer a variety of things to do; not just a one-day thing
- More than just a phone number to find out info; want the info to be on the website
Experience:
- Word of mouth that this website offered the best of what I was looking for. Showed pictures, when it happens, its history, and all the info needed without having to search far for it
Style Tiles
Mockups
Revised mockups
Development Plan
My website is a take on the Albuquerque Hot Air Balloon Festival. Which is a festival where lots of hot air balloons are set up in a giant field and rise into the sky, some festivals have you ride in them but for mine, it’s mostly for the experience of watching the balloons. My inspiration for this website came from my mom and how she has been planning on taking us out west this summer and wanting to take us to things like this event. She also has a love for hot air balloons, so I did some research on the types of balloon festivals and found inspiration from them. I want the website to be colorful as most balloons are, but also have a bit of wild West vibes as most of these festivals happen in the West like in New Mexico and Arizona.
I want to use percentages for the first two sections of my page. This will keep them in the center of the page as well as using quick stack and cellblocks for my 3 main links, keeping them at the right distance apart no matter how the page is viewed. I want to use containers inside of all my sections as it helped in my last page to keep all the sections more organized and helped with the text to stay in a more compact format and not run from edge to edge. The only section that may not use a container would be the 3 main links as I may need them to be stacked up and down rather than side by side in smaller views like mobile or tablet.
I want to show the movement of the balloons on my page so in my header I will be using a form of video either gif or animation that will move the whole time you are on the page. I also created images that I will be using as links to my other subsections. These will change depending on what type of device you are looking at the site from. When going into a smaller scale that will move from being side by side to being staked top to bottom while staying fixed to the center of the page.
As stated above I will include animation in my header to show the movement hot air balloons make. I am also considering using a hover effect on my subpage links to keep that movement throughout the page. The buttons for buying tickets will either have a hover feature or change color slightly when hovered over.
Final Mockups
Self Evaluation:
Phase I: Concept & Research (10pts):
Content Development & Information Architecture (50%)
1. How effectively did the chosen event content and its organization reflect depth and appropriateness? Consider how the information architecture (IA) contributed to user understanding and content flow.
My event content needed my page to flow easily. I was able to do this by making the site easy to scan through to see what this event has to offer before going back and reading it in full. I was also able to make all my links easy to see and use.
User Persona + Prototype User Testing (50%)
2. Evaluate how well the development of your persona and prototype testing informed design decisions and user experience improvements. How did the feedback integration enhance the overall design?
The development of my persona helped me know what would be the best parts of my website to include and what could maybe not be in or be a bit less important in hierarchy.
Phase II: Design Research (15pts):
3. How well did your mood board/typographic plan/sketches/style tiles/wireframes contribute to developing your site’s visual / functional design?
With the style of my mockups and sketches being shown to the group and other classmates helped me see what style and format people grew more too and which felt would need more work or didn’t work as well as a web page. Getting the critique helped me narrow down which sketch to go from and work from there to create my wireframes and final website.
Content and Typography (40%)
4. Reflect on how your narrative content and typographic styling worked together to ensure clarity, hierarchy, and persuasive communication.
My narrative was about balloons and my style was western. These two things helped me decide my typography and who the layout and hierarchy would work. I needed my site to be flowing but also have larger types in spaces needed, such as the main title of each page and to distinguish between title or headings to the paragraphs under.
Visual Design and Layout (40%)
5. Critique the aesthetic qualities of your design including imagery, color, and overall layout. How did these elements work together to convey the event’s theme compellingly?
I wanted my layout to feel free but have some structure. I did this by having my titles be a moving image while the info would be in a box but be outlined in dots to feel not as contained in a box. The color of my site helped with my theme of a western balloon festival and having the top of the page look like the sky and as you move down it gets darker till you get to a sandy yellow color to act as the ground but also like a basket of a balloon.
Responsiveness and User Experience (20%)
6. How effectively does your design adapt to different devices while maintaining a positive user experience?
My design works best at a larger view but still has the style I wanted when moving toward a smaller scale like on a phone. In a larger view everything is in a row horizontally while when it gets smaller some titles shrink and the rows become columns going vertically.
Technical Development (20pts):
HTML/CSS Implementation in Webflow (80%)
7. How proficiently and creatively did you implement HTML/CSS in Webflow for your site’s development?
`I used CSS to create a colorful site as well as create a comfortable reading size paragraphs and contain them into boxes to keep paragraphs at a consistent size.
Final Reflection:
8. What are the key lessons you learned, and what aspects of the project would you like to improve upon in the future?
I feel that I learned more of how to include CSS into my site and how it can improve the look and feel of my web page as well as the user flow coming to the site. It helped me make my site look more engaging and have viewers want to stay on my site longer and see what this event has to offer.
