{"id":357,"date":"2024-12-10T12:26:25","date_gmt":"2024-12-10T20:26:25","guid":{"rendered":"https:\/\/dulce.matmcc.org\/creative-journal\/?p=357"},"modified":"2024-12-11T17:04:48","modified_gmt":"2024-12-12T01:04:48","slug":"style-tile-2","status":"publish","type":"post","link":"https:\/\/dulce.matmcc.org\/creative-journal\/style-tile-2\/","title":{"rendered":"Style Tile"},"content":{"rendered":"\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\n\n\n\n
\n

Logo<\/h2>\n\n\n\n

I based my logo off of my own signature which I had created months prior to designing the logo. I wanted a version of my logo to be contained in a circle like the logo on Andrew Hendrix’s<\/a> portfolio.<\/p>\n\n\n\n

\n
\n

I also made a purple version of the crown just in case I wanted to use it.<\/p>\n<\/div>\n\n\n\n

\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n

I had originally created this version of the logo, but removed it because in the future, the logo may not be used solely for photography.<\/p>\n<\/div>\n<\/div>\n\n\n\n

After my professor took a look at my style tile, she suggested that I remove everything except the ‘d’ and the crown, instead adding my name in text instead. I followed the advice and created the logo that is currently being used on my portfolio site<\/a>.<\/p>\n\n\n\n

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

Colors<\/h2>\n\n\n\n

I try to keep the 60, 30, 10 rule in mind when picking colors. It’s a rule that’s used for character design, but I find that it works well with website color schemes. The rule is to pick three colors; 1 that is used 60% of the time (the dominant color), 1 that is used 30% of the time(compliments the dominant) and 1 that is used 10% of the time (details). I originally learned of it from this tumblr post<\/a> by Tomatatoro.<\/p>\n\n\n\n

With the web, it’s important to keep things simple to not bombard the user with too much visual information or stimulus and to keep the size of the website small so it loads faster(which is why it’s recommended to use only three fonts max on a website).<\/p>\n\n\n\n

I chose gray because I wanted my website to be on the darker side or at least have a dark header and footer. Personally, I find darker colored websites to be easier to navigate and more visually pleasing. In addition, it’d be fitting to have the website represent me in some ways so I chose a light purple\/lavender which is my favorite color. The sky blue color was picked for any details that I didn’t want to be purple. <\/p>\n\n\n\n

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

Typography<\/h2>\n\n\n\n

I chose the font “Afacad” which is the one I’m currently using now. It’s easy to read and letters such as “a,” “e,” “o,” and “c” use circles as a base. It also has different variations such combinations between regular, bold, and italic styles. This font would also be used for links.<\/p>\n\n\n\n

The second font is “Chonburi” which would serve as the headings. I opted to add some letter spacing for a splash of uniqueness, but also to differentiate the larger headings from the smaller ones.<\/p>\n\n\n\n

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

Textures<\/h2>\n\n\n\n

I wasn’t planning to use textures for my website, but it’s still useful to create some just in case and also for some added design practice. <\/p>\n\n\n\n

The first design I created offset rows of the Crown Only version of my logo.<\/p>\n\n\n\n

For the second, I took inspiration from a presentation I made in the past, layering triangles of different widths and values together and then duplicating them over and over. <\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n
\n\n\n\n

Buttons<\/h2>\n\n\n\n

I chose three main colors and used each color on one button. <\/p>\n\n\n\n

The blue was quite bright so I felt it was best it became a border instead of making it a background to white text. <\/p>\n\n\n\n

Buttons are better off simple and the time of the design of this style tile, I did not think I would be using buttons. <\/p>\n\n\n\n

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

Images<\/h2>\n\n\n\n

I took screenshots from the portfolio websites of Andrew Hendrix<\/a> and Jo\u00ebl Liechti<\/a>.<\/p>\n\n\n\n

I liked the way that Hendrix’s categories were organized with text on top of an image which linked to the rest of the gallery. As stated before, I also too inspiration from his capital ‘D’ portion of his logo. <\/p>\n\n\n\n

On Liechti’s site, I liked the minimalism of the home page. A portfolio website is pretty straightforward and if it is only being used to showcase work, it doesn’t need too much on the home page.<\/p>\n\n\n\n

\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Logo I based my logo off of my own signature which I had created months prior to designing the logo. I wanted a version of my logo to be contained in a circle like the logo on Andrew Hendrix’s portfolio. I also made a purple version of the crown just in case I wanted to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[10,17,63,60,27,29,30],"class_list":["post-357","post","type-post","status-publish","format-standard","hentry","category-portfolio","tag-design","tag-figma","tag-fonts","tag-images","tag-style-tile","tag-texture","tag-typography"],"_links":{"self":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts\/357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/comments?post=357"}],"version-history":[{"count":6,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts\/357\/revisions"}],"predecessor-version":[{"id":463,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts\/357\/revisions\/463"}],"wp:attachment":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/media?parent=357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/categories?post=357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/tags?post=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}