{"id":2680,"date":"2021-02-24T21:14:19","date_gmt":"2021-02-24T21:14:19","guid":{"rendered":"http:\/\/www.fmidnight.com\/design\/?page_id=2680"},"modified":"2024-04-23T06:18:58","modified_gmt":"2024-04-23T06:18:58","slug":"softwarebox-2","status":"publish","type":"page","link":"https:\/\/www.fmidnight.com\/design\/softwarebox-2\/","title":{"rendered":"SoftwareBox"},"content":{"rendered":"\n

Case Study<\/h2>\n\n\n\n

https:\/\/fmidnight.com\/software<\/a><\/h3>\n\n\n\n
\"\"<\/figure>
\n

SoftwareBox, My Favorite Software<\/p>\n\n\n\n

SoftwareBox is a hub for 3rd party software that I use. Pages are divided into categories such as 3d, Audio, etc. and each have a handful of links to software that I use. I made this website for a college assignment, and therefore payed specific attention to its design.<\/p>\n<\/div><\/div>\n\n\n\n

Client\/Audience<\/h4>\n\n\n\n

The client for this site was my teacher. This was for a final, and therefore I made sure it had a unique design and personality. My professor being a seasoned designer and developer, I had to make sure my site lived up to both technical and design standards for an assured good grade.<\/p>\n\n\n\n

\n

Challenge<\/p>\n\n\n\n

I wanted to do lighting animation with this site, and focused on doing various things with that. I asked myself, “What could I do to make the teacher\/user say, ‘Wow that’s cool,’ or even just , ‘good job?'” <\/p>\n<\/div>

\"\"<\/figure><\/div>\n\n\n\n
\n\n\n\n

Solution<\/h4>\n\n\n\n

I gave my site personality by animating individual drop shadows with CSS. The logo and header text shift from yellow to green to purple per the site’s logo, and each column glows with a different color that compliments the logo. The glow effect also expands into a glass panel when the user hovers over it.<\/p>\n\n\n\n

\"\"<\/figure>
\n

Results<\/p>\n\n\n\n

I ended up getting a 100% on the project, and the teacher and students really liked the site. I am a fan of dark themes and I personally liked the work that I did as well. I also incorporated ads I did for other classes onto the sidebar of this site.<\/p>\n\n\n\n

Typography<\/h6>\n\n\n\n

I used the well-trusted Arial font for both header and body. My main concern for typography was readability, as my focus was more on practicality than ambiance for this site in particular.<\/p>\n\n\n\n

Animation<\/h6>\n\n\n\n

Animation was a critical focus of this site, and thus I wanted to make an animation that had personality but was also not too distracting from the content. I animated the logo and header to change colors and I added hover properties to the directory on the home page to make an expanding glow.<\/p>\n\n\n\n

Color Scheme:<\/h6>\n\n\n\n
Header<\/td>black<\/td>#000000<\/td><\/tr>
Accent 1<\/td>yellow<\/td>#eed202<\/td><\/tr>
Accent 2<\/td>green<\/td>#008000<\/td><\/tr>
Accent 3<\/td>purple<\/td>#4b0082<\/td><\/tr>
Text<\/td>white<\/td>#ffffff<\/td><\/tr>
Footer<\/td>black<\/td>#000000<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<\/p>\n<\/div><\/div>\n\n\n\n

Screenshots<\/h4>\n\n\n
\n\t
<\/div>\n\t
<\/div>\n\t
<\/div>\n\t
<\/div><\/div>