Web Design Case Study: Jays Art Online
This Website Jaysartonline.ca has been in operation since the early 2000’s, starting out as jaysartonline.tk. Jays Art Online has been through a lot of changes throughout the time. Jays Art Online Vr 1.0 has been lost to time, which is probably for the best. Jays Art Online is a website to display my art and animations, yet over time has gone beyond that to displaying my web design skills as well. To skip the history and go to the case study.
The History of Jays Art Online
Jays Art Online.ca Version 2.0 – 2004 – 2005
The Splash page of Jays Art Online. For a while, I had had this philosophy of my 2 sides. Much like yin and yang, professional and artist two halves of a hole. which is represented by the mascot of the site Alex the goth angel.
The Art side of my website. Had Alex hanging from a wire with broken wings. This page displayed a lot of my art some of my animation and music that I had created. My art opened in a lightbox type window when clicked on the small thumbnail. All the information displayed in an iframe with overlapping elements. The box on the left displayed comments people could leave by using a third-party app.
The Professional side of my website had a more professional looking Alex. With links to my resume, websites I had worked on along with design work, which includes work I have done on a local youth centers zine.
It also featured hover effects with all the links in the professional side.
Jays Art Online.ca Version 3.0 – 2013 – 2017
The splash page of version 3. Featured Art, Animation, and Web Design Sections. Showing off one peace from each. The buttons had a rollover image effect created with some CSS trickery. While Alex was no longer on the front page elements of her were still there. It also had links to my social networks.
The art side of my website. I still continued to use iframes to display content, before learning the current web design practices from Q College. Another bad habit I picked up from this web design was the CSS property position: absolute. I neede to use that a lot to position the thumbnails of my art. I now have more efficient ways of position items.
The animation side of my website. Displayed a few of the flash animations I had made over the years.
The web design part of my website. A few of the old website I have worked on. Top: is the website I had worked on for a local youth resource center in Courtenay BC. Second: A mock website for a band in Vancouver BC. Third: A Client in Comox BC was selling some properties. Last: Mockup of a tourist business in Victoria BC.
Jays Art Online.ca Version 4.0 – Q College Mid-Term Project. 2017
During my time at Q College, I was taking the Web Development and Digital Marketing program. For our midterm project was to create an HTML website with Boilerplate 5 as the preprocessor. It is also the first time that Jays Art Online had a mobile-friendly version. Since it was my first time some of the mobile elements could look better.
The homepage of Jays Art Online vr.4. The website features a fixed full with header with a menu. My logo (learn more about the history of Jays Art Online logo) in the middle and social media on the right. A large hero image with a call to action to check out my gallery. Along with making the website mobile, it was also the first time I had worked with the 12 collum grid system. You can see the use of this system under the hero image, with the links to my different galleries. The footer had my logo and the same social media links.
This galley had a select few pieces of art. Instead of having a thumbnail to click it’s displayed in a column, with rounded corners. There are no rollover effects that I had applied.
For this version of my animations, I had made a demo reel in Adobe Premiere Elements, which is featured at the top of the page.
The web design part of my website. A few of the old website I have worked on. I had tried to display them in an interesting way by alternating them.
Jays Art Online.ca Version 5.0 – 2018 – current. Case Study
What Jays Art Online had been missing until now was: structure and a cohesive design. This is where planning comes into play, much like with logo design the more planning I do the better things will come together and the tighter design will be. I first have to decide on a few different things.
First is what no# of pages the site will have and what they will be. For example about, gallery store and etc. I also need to decide what order to put them as Google will figure out what is important based on the order of the links which is important for SEO.
Second I need to figure out what fonts will be the best fit for the kind of site it is. You don’t want to use Comic Sans for a business site (well you don’t want to use Comic Sans at all, it’s kind of a joke font). Google Fonts is a great source for different kind of fonts.
Third I need to figure colors that will be the best fit for the kind of site it is. For the colors, I usually will get them from the logo, or from the client. Also, the Adobe color wheel is great for helping out with your color scheme.
Jays Art Online.ca Next step: Site Map
With my Menu order, the number of pages, colors, and fonts decided I can move to the next step, which is to make a sitemap. A sitemap is a simplified version of how the pages on your site will connect with each other. What I would usually include the colors of the site with there Hex code, fonts to use on the site and the logo. At this stage, I can play with ideas and flesh things out.
And now that I have a sitemap as well as fonts and colors to use I can move on to the next step.
Jays Art Online.ca Next step: Wire Frame
With this wireframe is designed for the One-page layout for Jays Art Online. My wireframes are a more detailed that there suppose to be. I’ll include the height of an item since the width is determined by the with of the viewport. If there are animated elements planned I would show the path. For the services section, I had planned on having each one in an accordion, yet as I learn more I find better ways to do things, like with the services section. I had found a tutorial to use the blurbs in Divi to make tabs like functionality and that had worked out better than the accordion module that is in Divi. My Wireframe program of choice is Adobe Illustrator. View the full wire frame
Jays Art Online.ca Next step: Mockup
The final step before going into actual developing of a website is the mock-up. A mock-up is a presentation of the full website, what it is going to look like before it’s development is started, usually shown to the client for approval. Since I have been working with Adobe Photoshop for a long time I am quite comfortable with using it for mock-ups. The down-side of using Photoshop for mockup is depending on the size of the site and graphics, creates a huge file size, with my Aura Clothing Company mock PSD file is 230mb, that may not sound that big, but compared to the Jays Art Online mockup file size is 3mb. You may also notice my layer structure, where every section has its own folder and everything is labeled and clean. View the full wire frame
With all the planning done it’s now time work on developing the website, whether it is an HTML site, like my resume website or WordPress like Aura Clothing Company site. I had decided to use WordPress to create my site and was going to use a different theme for its creation. Since I have learned so much about Divi that was going to be my theme of choice.