Web Design Case Study: Aura Clothing Company

Aura Clothing Company, a mock website made to display my skills as a web designer with WordPress. The topic and its layout are based on the Q College final project I had created.  The process of crafting this website is exactly like one I did for Jays Art Online. If you have read that one I am going to be repeating myself a lot here.

Interested in learning about the Aura Clothing Company logo may read about it here.

View the Aura Clothing Company Website.

 

Aura Clothing Company: Sitemap.

This sitemap is more crowded than I normally would create. Since this is for a demo site it’s fine. I like to color code my sitemaps, where each item is the same color as the page.

Aura Clothing Company Next step: Wire Frame

Aura Clothing Company Next step: Mockup

For this mockup, I normally don’t use the artboards in Photoshop. Starting with this design I had used artboards to display multiple pages and the mobile layout as well. I have learned how to use artboards and able to organize my mockups better.

Comparison of mockup vs. developed site.

Homepage

Mockup made in Photoshop

Live Site developed in WordPress

The final product of the homepage turned out a little different than the than the mockup. For one the sale tag looks a little different. I tried to change it with CSS but was unable to change it to make it effective. I’ve also forgone the sing up for the newsletter as I need to sign up for a client to add it, I had removed it. I couldn’t figure out how to add a description of the sales / featured with the Woo Commerce plug-in so those were left out. The other change was the blog section I feel that this change is better having a nice full-width image and a brief excerpt really is better than having two blog posts with such a large space apart.

Homepage Mobile

I am really pleased with myself on figuring out how to replicate the mobile menu as close as it is. The purchase of a plugin called “Mobile Menu Customizer for Divi” helped me make it like the mockup. I was struggling with the social media icons and displaying them horizontally. I had found in the Mobile Menu Customizer, that there was an option to add Divi library item to the menu. That is how I was able to add the horizontal rule and social media to the menu. I may have to increase the size of the social media icons for easier pressing of the finger.

Casual Page

There are very few changes here, much like the homepage with the sign up for the newsletter, none is there for the same reason as the homepage.

About Page

I didn’t create a mockup for the about page

The lorem ipsum used in the about page is from a fashion lorem ipsum generator. Just to change up the content.

Blog Page

I didn’t create a mockup for blog posts page

In my searches, I had found a way to change the way my blog posts are displayed. The tutorial I had found showed away to use the Divi library to make blog posts more interesting and engaging. Because it’s a demo site a lot of lorem ipsum (dummy text) to fill the content.

In conclusion

In conclusion, what I learned from this project is a few things in WordPress and Photoshop. One is how to customize the mobile menu in Divi, with the help of a plugin. I had bought the full version of the plug so I am able to use on any site along with Divi.  I had also learned how to make a blog post template that is content rich and visually pleasing. The PHP code I had implemented to change the logo colors had an issue. That issue was on page load it would load both the desktop and mobile logos. I had to add a pre-loader that goes away when the page is loaded to hide this little hiccup.  As for SEO for the site, I didn’t have any, since it’s a demo site.

Learning more in Photoshop is always great, after working with it for a long time I am always learning new things. I used to dislike using the artboards in Photoshop, I had found them cumbersome and an annoyance. This is true if I am using it for art, now have learned they have a place and can be really effective if used properly.

 – Jason M Whalley

Social Media Links

Contact

Email: jasonmwhalley@gmail.com

Site designed by Jason M Whalley