oliviaallisonhitegd-blog

[oliviaallisonhitegd-blog]

Be bold in your truth, don't create from a distance.

Scott Smith

[oliviaallisonhitegd-blog]

Web Design - Final Day.

It’s crazy that the semester has already flown past us. When I first started this class, I sort of worked with some web design but it was super basic, I didn’t really know how it worked and definitely didn’t know about user flows and site maps. Looking over the course of the semester, I suppose I didn’t realize how much my design has actually grown. I’ve realized that the way I think about user flows/user interaction has definitely progressed, my Illustrator skills have also grown, I’ve learned two new programs (Adobe XD and InVision), and just my overall web compositions have also gotten a little better. I now think about where to place pop out navigation bars so that they don’t cover major page information or I now think about the best ways to convey information about a website on the splash and catch someone’s eye in .07 seconds. I don’t think I would have necessarily been aware before the class or at least it would have taken me a little longer to become aware of these issues. 

Super thankful to have taken this class and grateful for all the speakers coming in to take time and further explain web design/give advice about the industry. I look forward to further learning about Adobe XD and Invision, more about UX/UI, and overall just learning more about this field. I’m also interested in exploring the world of UX in apps and so forth. I really want to better understand and practice UX/UI design, so I’ll probably try to practice more with web design the summer. I think Adobe usually has little sprints going on for web practice that could be fun to join in on.

For my final project (portfolio website), check out https://www.olivia-allison.com

[oliviaallisonhitegd-blog]

Experimenting with animation + a little bit of surrealism = a photo that pretty much symbolizes my brain at the end of the semester.

Bonus. The picture above actually fits the beats/style of the playlist below. Lately, I’ve been creating playlists for every project I work on--any genre. Just whatever the project ‘feels’ like it would be if it were a music genre. Plus, this playlist is pretty fire if I do say so myself. :)

https://open.spotify.com/user/1264623427/playlist/1ceCOHsLXZxgtK1tXPC8CM?si=ny8BEZUsTJuSWbdZ9QjZ4w

[oliviaallisonhitegd-blog]

 The goal of this project was to take a blue law and create a campaign out of that single law. My blue was from Montana and it states, “It is illegal to give a rat as a present.” Honestly, I had a hard time working on this project and trying to figure out what campaign path I should go on. It wasn’t until the very end that I decided the main goals would be to prove that rats are worth adopting and gifting as well as giving the audience a reason to sign a petition to change this crazy blue law. I will say my favorite part of the site was when I added in the Instagram rat influencers. I didn’t even realize there was a big market for that. 

Continuing on with my design process, I eventually ended up with creating a campaign around rats throwing their party or crashing someone from Montana’s party. I do enjoy how cute these ended up, especially the little rat on the cake. I also had a lot of fun creating the experimental sprinkle type. Although I did run into a problem with the sprinkles looking more of a brownish color than a bright, upbeat color. Although I tried to be careful about what shape or what color sprinkles I got, I didn’t account for their being so many chocolate sprinkles. I tried adding in a pink opacity over the layers and did a clipping mask to every one of my letters and while there was a slight color shift, it’s not nearly as bright as I want it to be. Also, I need to experiment more with trying to display the sprinkle type without it looking like rat fur or something.

The colors of my campaign were chosen to be upbeat and have a birthday party quality to them. I also went and found stock photos of mice and photoshopped little party hats on them to add to the overall party vibe. 

So mobile for this project was a beast. I don’t know why I had such a problem with it? I had a bit of a hard time figuring out how long to make the pages and what size text was best work on the iPhone Max screen. Also, definitely a learning curve trying to move a desktop site to the screen. I had redone this site layout a few times and did originally start with mobile, but by the time I figured out the final design layout I wanted, I started with desktop first. Definitely understand why you start with a mobile site design first and then move it over to desktop. Look forward to redoing this mobile design. 

This entire website is one continuous page. In order to keep people scrolling, on each section I decided to create the sections in curves rather than straight square cards. By using the curved section approach, I was able to keep the pages flowing into to each (for example, on the landing page section, the sprinkles from the about section bleed up into it). This was also a way to let people know there were more pages to see rather than me using an arrow to pull them down.

[oliviaallisonhitegd-blog]

^Link to a video walkthrough of my submitted nonprofit website redesign project

[oliviaallisonhitegd-blog]

It’s been super wild to look back at where my first round of wireframes to now. It’s interesting to not only see how much my designs evolved from the black/white/grey boxes. I have learned that I love Adobe XD and am excited to mess around with Invision. I also loved seeing everyone’s websites and seeing how differently everyone solved their nonprofit’s site problems. Now that critique for this project is over, I might further mess around with my NuLu site and update different assets or add in assets that might be helpful.

  For the NuLu website, a few of the major problems it had was lack of customer trust, confusion about membership plans and business directory, and lack of organization for the entire site. I feel that the NuLu website overall has an unfinished look and doesn’t accurately describe what NuLu nor does it give you the upbeat tone that NuLu has.  Here was my marketing objective and my audience for this website:

Marketing Objective From a marketing perspective, we not only want to encourage small business owners to become NULU business association members, we also want to drive traffic from locals/tourists into the NULU website in order to bring more awareness to NULU. These elements in turn would bring in more money to NULU’s nonprofit but also money into the small businesses of that area. The goal of this website should be: enticing NULU business owners to join the NULU Business Association (this brings funding to the nonprofit), bringing awareness to locals/tourists and showing them what NULU has to offer, and driving traffic not only to the website, but into the actual district of NULU.

Target Audience Primary – Small business owners in the NULU district into NULU business association members. Secondary – Locals and tourists (18-35) looking for things to do in Louisville or specifically in the NULU district.

Basically I used the idea of FOMO throughout my entire design process. I wanted to obviously create a usable and functional site, but I also wanted it to be upbeat, modern, and engaging. I want people to see what a happening place NuLu is and feel like they are missing out if they don’t join in on the NuLu District (for locals/tourists) and the NuLu Business Association (small businesses). I knew I wanted a clean and visually interesting design due to having a younger target audience. Plus, NuLu is cool and hip and I wanted the new site design to reflect that.

Overview of my site design

 I spent a lot of time reworking the business directory and the why join the NBA pages as I felt like these were some of the biggest problems. The way you went about purchasing an NBA membership was kind of sketchy and not at all trustworthy looking. So I created a more detailed page about memberships benefits and a fresh table design for NuLu membership plans. I also felt that the business directory page was confusing and not very detailed, so I went in to try and create a fresh and inviting look. I made the change from having the business directory as all type to limited type and more pictures. One the main business directory page, I created a “Feature Businesses” header that will carousel through different businesses ranging from food to shopping to art galleries. I also create a more inviting search bar as well as a dropdown with which a user can sort NuLu businesses by different categories. I also redid the business profile page to be more like a social media page style. I gave the profiles headers and galleries so they could display their work and added in a Google Maps feature.

For the color palette of the site, I kept NuLu's brand colors because I liked how quirky they were. The orange and blue were super fun to bring in. I thought these colors also added to the friendliness of the overall brand and website. As far as my final proposed site map goes, I pretty much kept the original structure but cleaned and condensed pages down if I felt they weren't really needed or if they worked better under a different dropdown label. 

I’m pretty proud of this little redesign and how far it’s come. There are different things that I would fix and clean up such as icons or reworking the integration and the blue and orange but overall I’m pretty happy with how it came out. I also will never get tired of prototyping these websites and actually getting buttons or navigation to work. Seriously I think the prototyping was one of my favorite things about this project--that was like magic.

[oliviaallisonhitegd-blog]

I’ve built out my NuLu site wireframes out just a bit more since my last post. Peek at the orange I’ve begun bringing into my design. I’ve started building out more of the NuLu business directory and business profiles in order to demonstrate a better way to organize businesses and help potential customers find information more easily. The “Why Join” page and the business profile pages are still undergoing some major updates, but all my other pages seem to be getting a little more settled. I can’t wait to start dropping images, colors, and typography in (especially since I just found out how to actually design in XD beyond just wireframing–big win). I’m also finding little wins whenever I’m able to link objects together in the XD prototype phase. It’s kind of like Christmas Day when I can click my hamburger navigation button, and something actually drops down.

I really enjoyed the wireframing critiques and being able to vocalize and bounce ideas or potential concerns off of other people. I’ve also enjoyed learning and practicing web strategies that I’ve researched/learned over the last several months. Learning to be more aware of UX design and actually putting that into play in my own work has been a lot of fun. I always like the “why” behind certain web elements, and I’m working on further learning to be more sensitive to the “why” situations. For instance, on my “What to Do” page, just moving the NuLu street map below all the NuLu business directory and what to do information will help the user better understand why they would need/want a map of NuLu in the first place.

The video posted above shows an updated walkthrough of my NuLu site and exactly how I picture the page flow and how specifically I imagine the business directory/business profile working together. By expanding a little more on my business directory pages, I hope to portray a little more sense of NuLu community as well as the underlying message to NuLu businesses of FOMO. One of the goals of this website to get small businesses to join the NuLu Business Association, so I wanted to create an environment that made Businesses feel that they would be getting something in return if they joined. This concept also enforces the idea of having featured businesses on the homepage and a carousel of featured businesses on the business directory page. I also wanted to attract and engage with locals/tourists in the Louisville area and create easy access points to get information about NuLu businesses (whether that be food, places to stay, shopping, etc.)

[oliviaallisonhitegd-blog]

Reconstruct Challenge Press Conference 

---------------

Banners I designed got displayed, got to help photograph the event, and meet Mayor Fischer. So, Monday ended up being a pretty good day.

---------------

*Work done for Access Ventures

[oliviaallisonhitegd-blog]

After work shenanigans 

[oliviaallisonhitegd-blog]

Video walk-thru of the first rough wireframe draft of the NULU Business Association website. Definitly a lot of kinks and whatnot to work out, but excited that I actually created something in Adobe XD. Once I got used to it, it wasn’t too terrible. It actually ended up being pretty enjoyable honestly, I’m really enjoying learning more about the strategy about wireframing and the skeleton of websites. Over the last several months at work, I’ve been learning more about website strategy and design. So it’s been interesting to use some knowledge I’ve learned and put them into practice for this project. Obviously, I have a long way to go and so much more to learn about wireframing and strategy, but I’m excited to dig further into this process.

[oliviaallisonhitegd-blog]

.:ephemera:.

[oliviaallisonhitegd-blog]

A mockup of the homepage of my website. The animal images are meant to be set as a carousel. The bottom image shows a mockup of one of the animal pages.

Shoutout to Carlie for the mockup inspo. 

[oliviaallisonhitegd-blog]

For this beginner web site project, I decided to go in a super fun, approachable, kid-friendly, favorite animals site. While I wanted the website to be fun and vibrant, I also wanted to maintain a modern, clean vibe. I chose a very colorful, happy color palette that was individually chosen based on the animal—blue/purple for penguins in the Arctic, coral/pink for the schnauzer (playfulness), and orangey/yellow for the Australian Quokka. If I were to build this website out, I would continue to build the site towards kids and create a website full of animals from all over the world and facts about them. I would also have an endangered species section to introduce to kids why it’s so important we take care of the earth and our living creatures. I would want this to be more of an educational site.

I went with the wavy shapes so that I could pull the viewer down the page and create an overall texture as well. I did have the background a solid color but it was a little underwhelming. I decided to bring the wavy shape concept into the background of my “Animals” pages to tie those pages back to the homepage. This also allowed for the animal pages to have a little more fun versus just sticking with a white background. I liked the idea of having a video that you could play whenever you entered a new animal page so that you could learn a little more about the animal. Plus it’s a little more engaging to see videos of animals versus just reading about them.

The farther I moved in my little website concept, the more I became aware of how I might actually build a concept out. What the concept would look like, how people would interact with it, how might I make a website more interesting? I did enjoy the exercise of creating a site map because it made me more aware of just how many moving parts there are in a website as well as how everything works together to create the user experience.

If I were to go back and work on this project, I would definitely add more to the header, rework the animal pages to be more interesting and engaging, and perhaps rework the footer as well. I would also work on the names of the navigation tabs and the name of the website—those were a struggle.

Overall, this website project was a good experience to get my toes back in the water. I’m super hyped to see where I’ll be at the end of the semester. I really want to improve and actually be able to create some great, engaging web designs. Cheers to a hopeful semester.

*bottom animal pictures are the images I used for the homepages, below is my sitemap

[oliviaallisonhitegd-blog]

Gesture mark explorations

[oliviaallisonhitegd-blog]

Postcards and an example of signage that I had the opportunity to design back in July for CreativeMornings Louisville.

[oliviaallisonhitegd-blog]

Explorations with abstractions

[oliviaallisonhitegd-blog]

Revamped my website just in for the fall semester to begin: https://www.olivia-allison.com