{"id":2488,"date":"2021-02-23T22:38:16","date_gmt":"2021-02-23T22:38:16","guid":{"rendered":"http:\/\/www.fmidnight.com\/design\/?page_id=2488"},"modified":"2025-06-22T14:50:31","modified_gmt":"2025-06-22T14:50:31","slug":"grady-butler-iv","status":"publish","type":"page","link":"https:\/\/www.fmidnight.com\/design\/grady-butler-iv\/","title":{"rendered":"Design"},"content":{"rendered":"\n

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

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

Design, A Portfolio Site<\/p>\n\n\n\n

A portfolio site designed to convey a clean, crisp, and creative tone. This site is designed to be professional and focuses on easy navigation and central focus. I envisioned this site to function much like a frame on a piece of art in a museum; the frame cannot be too elegant as to draw attention away from the art, but also must be worthy to hold the art the frame contains.<\/p>\n<\/div><\/div>\n\n\n\n

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

The client for this site is a little more abstract, as I am not designing for a specific person or company, but rather a future entity that may wish to hire me. I do know that my audience will be in a field of web design or development, and therefore knows the ins and outs of the job. Therefore, I want to make a site that is clean and crisp, but also has personality. I can distinguish my work with my own personal flair, while also maintaining a clean and presentable aura.<\/p>\n\n\n\n

\n

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

There are two major challenges with this site. One is that I am designing for an entity I do not know yet, the other is that I must balance cleanliness with creativity: not making the site too busy as to draw attention away from the portfolio, but also creative enough to demonstrate my design abilities.<\/p>\n<\/div>

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

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

In order to address the two presented challenges, I will start off with a clean white theme and work from there. I want to balance creativity with cleanliness by using many background colors and one accent color. I plan to add the creative flair with animation and imagery from my portfolio. I will also draw attention to my portfolio work by using it in the banner for each page.<\/p>\n\n\n\n

Results<\/h6>\n\n\n\n

I ended up using indigo as my accent color, and employed fading and transition animations to convey personality. The result was what I intended: a clean, professional website that focused on the content over the design.<\/p>\n\n\n\n

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

I thought the theme default of Railway was an excellent choice for the header. It is elegant, readable, and professional. Open Sans with a Helvetica backup was also a good choice for the body, as it was also readable and professional.<\/p>\n\n\n\n

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

Using CSS animation, I added a fade in for each banner title, and a transition animation for the banner itself. This added a flair to each page that displays my work in a creative way, while not being too over-the-top or distracting.<\/p>\n\n\n\n

Color Scheme:<\/h6>\n\n\n\n
Header<\/td>light gray<\/td>(#d8d8d8)<\/td><\/tr>
Accent<\/td>indigo<\/td>(#8215ca)<\/td><\/tr>
Body<\/td>off white<\/td>(#efefef)<\/td><\/tr>
Footer 1<\/td>black<\/td>(#050505)<\/td><\/tr>
Footer 2<\/td>dark gray<\/td>(#111111)<\/td><\/tr>
Footer 3<\/td>gray<\/td>(#222222)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"

Case Study https:\/\/www.fmidnight.com\/design Design, A Portfolio Site A portfolio site designed to convey a clean, crisp, and creative tone. This site is designed to be professional and focuses on easy …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"class_list":["post-2488","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/pages\/2488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/comments?post=2488"}],"version-history":[{"count":10,"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/pages\/2488\/revisions"}],"predecessor-version":[{"id":3354,"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/pages\/2488\/revisions\/3354"}],"wp:attachment":[{"href":"https:\/\/www.fmidnight.com\/design\/wp-json\/wp\/v2\/media?parent=2488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}