I am working on a new App for Celiac diseases. And start to enjoy the #adobexd touch functions. It's a joy to sketch and play in the touch mode! Hope Adobe shows even more love for the touch mode in future updates pic.twitter.com/s2EoD61FLp

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.

There was plenty of coding learned throughout this past month going from selectors and visual rules, the box model, display and positioning, and adding color. We began learning more about adding styles to coding and linking HTML and CSS files together. When I was doing the exercises for The Box Model, I learned about adding heights and widths to objects to minimize and maximize them. This is also where borders, padding, and blahs came into play. Display and positioning was a fun exercise personally for myself because I enjoyed seeing the site change as I was coding. Lastly, of course color began to play a large role in coding because you can’t customize your site without your touch of color and color palettes. With only a couple more CSS exercises to go, I’d say I’ve learned quite a bit about the world of coding. It’s amazing how many little tricks and abbreviations there are within the coding world.

Now, onto project four. This project was a process I tell you not. Of course, every project and exercise within the graphic design realm is always a process. As you can see, above there is a screenshot of the original site animalcaresociety.org. This was a very poorly designed website, however, the thought within the site is definitely there. Instantly, when you go onto the site, you see pixelated images, unknown links, outdated posts, and terrible visual hierarchy. This non-profit animal shelter based in Louisville, KY needed a complete website redesign. Making the site more visually appealing to the viewer will lead to higher views, therefore, leading to more donations and popularity for the animal shelter.

In my last blog post, I began recreating the wireframe for the site prototype I thought would be the one. However, after hours looking at my computer screen, I finally came upon my new idea for the site. This idea created a more visual stimulating experience for the viewers and easy navigation throughout the site. Before, some pages were too crammed and there wasn’t enough white space within my wireframes so I decided to go along a different route. Not only did I change my wireframes, but I also changed the look of my sitemap. This sitemap included more of what is on each page in the way of navigation and looking a lot more organized and cleaned up. When I was completely done with my wireframes, I ended up with eight art boards total due to the “hover” secondary navigation that I wanted to be included on my site. Unfortunately, during my presentation of my site redesign, I completely forgot to show and talk about the hover down navigation.

Working in XD on this project was very helpful and it was fairly easy to figure out what all you could do on the app and how to add and move objects around. I was able to add in the pictures and colors where they appropriately needed to be and fix any text. I decided on making the color palette vary of shades of grey and a red and light blue color. These colors all meshed together pretty well. All throughout my process of making little changes to the spacing, cropping pictures more, or changed the colors of objects, it all had to be updated within my wireframe and sitemap. That honestly was what felt like the longest part of this project. It felt like you almost needed to wait until you completely had the site how you wanted it and then went back and made the changes for the wireframe and sitemap. I did not end up using the InVision App, however, I did play around on it a bit. It was neat seeing the site actually come to life without having to make clicks and instead objects would appear by hovering over them. I still have a ton to learn about the InVision App, though.

When it came down to presenting our website redesigns and showing the prototypes and mockups, I know I have plenty of presentation skills to improve upon. Next time, maybe making an actual presentation for all of my information would be helpful like some of my classmates did. This way, I would know exactly what to say and what all I’m going to be going over. I tried to label each part of my presentation within the folder I had for it, but it got a bit jumbled when I had the older version of my XD file instead of the updated one. The Google forms critique was very helpful in seeing what my classmates thought of my work and what they thought could be improved upon.

All in all, though this project was a process, I did enjoy it thoroughly. I enjoyed changing the look of a “not-so-good” website design and completely redesigning the site to include better visual hierarchy and usability. I’m excited now to see what this next project over blue laws will consist of!