I made a website! Isn’t that neat? Somehow, it was both harder and easier than I thought it would be. From the technical side, a lot of it was fairly similar to the HTML tutorial. I made a handful of pages and linked them all together. I started with a green for the page headers that I liked a lot, and when I got the idea to make the website icon a hibiscus, the rest of the color scheme came together. I have no other justifications for that other than it’s my website and the colors make me happy.
For the top nav bar, I browsed the Listamatic website for a while until I hit something I liked the look of. Most of the code was copied directly over, with minor changes in the div names so I could remember which code went to what. Once I figured out that I could make the boxes change color when someone moused over them, I leaned into that full force—one, because it made the website look really nice, and two, because I figured it would make for easier accessibility. Anyone visiting my website would be able to see exactly which button they were about to click because it would stand out from the others. Initially, I pictured a nav bar oriented to the left, but the center-aligned one I settled on looks a lot more balanced, I think. Let’s talk about the challenges! I wanted to tear my hair out multiple times during this project because my images just wouldn’t show up where I wanted them to be. I had the most trouble with this on the About page because I was working with so many different aspects at once. Foolishly, I set up the page in its entirety, pictures and text, and then decided that I wanted to add the “What I’m Up To” list on the side. Reformatting that was a nightmare, but I eventually hit something I was happy with. The code for that list was also taken from Listamatic, and I used a similar technique for making the buttons change color when you hover over them. I didn’t think much about the design strategies in concrete terms. Like, logically, I knew to incorporate contrast, repetition, alignment, and proximity in order to make a cohesive webpage, but I’ll be honest: this reflection is the first time I’ve taken the time to analyze how I incorporated those strategies. For contrast, I made sure that all of my color choices worked together in a way that looked good. It was important to me to have a pale-colored background because it would make everything I put onto the background more visible. The majority of my text is black so it stands out and doesn’t overwhelm the eye, but for my headings/things I wanted emphasized, I played around with brighter colors. Contrast was also a big part of why I wanted borders around my pictures; they would stand out while melding into the theme of the page. As for repetition, I literally only used one font the whole time because it was a font I liked. I picked from the same pool of colors over and over again to make the website feel like, well, a complete website. I didn’t want a page to change so drastically that my audience would be confused as to whether they’d left my site. Although, speaking of the color scheme, here’s another challenge I faced. When making my “What I’m Up To” list, the links were the standard blue color that links are when you copy them into documents, and when I clicked on them, they turned purple—you know, standard link stuff. Except, neither blue nor purple was a part of my color scheme, or even matched particularly well with the other colors. It was super confusing because my horizontal nav list didn’t have that problem. I realized (after about thirty minutes of really angry typing) that the code for the vertical list and the code for the horizontal list were slightly different, and that the way in which the vertical list was styled made the links unable to change to colors other than blue and purple. I deleted that line of code and used the horizontal list’s styling as a format to make the dang text black, already, and it worked. How about some alignment? Most of my website’s content is aligned to the center because, to me, that looks a lot more balanced than having everything on the left or right. As for the About page, though, which is by far the most text-heavy, I tried to organize the paragraphs close to the center and close to the pictures. The text itself gently surrounds the pictures so they’re more of a natural extension of the paragraphs than a jarringly separate fixture. That philosophy also tied into proximity. I kept the paragraph in which I talk about myself within the span of the picture of my face, and the paragraph about my cats within the span of my cat picture. To clean up the edges of my text, I made sure to set it to “justify.” I kept the “What I’m Up To” list close to the top because there was empty space there I wanted to fill, and I felt like having the bulk of my links within plain view of whoever was visiting my website would be the most convenient. I guess it’s time to talk modes. The most prominent ones are linguistic and visual, but I could also analyze spatial. In terms of linguistic, I thought about my audience as our digital literacy class, AKA my peers, and typed pretty much how I’d say the sentences out loud. I incorporated a few jokes because I’m a jokey person, and I should be able to express that within the confines of my personal webpage. The important part was making sure everything was understandable and not too stiff. I’m having fun with coding and design and I think that should come through in what I produce! Visually, I picked out images that added to the webpage’s cohesion. I used a watermelon on the home page for two reasons: one, it fit into the color scheme very naturally, and two, I hadn’t thought at all about what to put on the home page beyond the nav bar, so I figured a cute, minimalistic fruit would at least give people something to look at while they decided what to explore first. I added a picture of myself to give a face to the name and all that, and a picture of my cats as a supplement to talking specifically about my cats. The Gmail logo I paired with my emails for obvious reasons. It also aligned with the simple lines and colors of the watermelon from the home page, which was an unforeseen bonus. I’ve mentioned many times that I followed a color scheme and picked colors that looked good to me, but I’ll add it in again for the sake of appealing to the visual mode. As for the spacial mode, I think I covered that pretty well when I talked about my usage of alignment and proximity. To be honest, I can’t say I had a specific website design in mind before I started this. I knew I wanted to have pictures that looked good, and text in the spaces in between those pictures, but beyond that, I was starting from scratch and finding out what made me happy along the way, which is how I do a lot of things. It’s how I’m writing this justification, actually. If I had unlimited knowledge of coding, I’d want to incorporate so many different fonts. Don’t get me wrong, monospace is all well and good, but I know I’d go beyond it with more tools at my disposal. I like the look of the header font on my Weebly blog a lot, so maybe I’d shoot for something like that. I’d also like to have a box around the main content of the webpage, like we did in the HTML tutorial. I could’ve figured it out, but I felt like it didn’t quite fit with the content I wanted to put on the webpage. If the site was more of a blog, or a writing portfolio, I’d code it to have that color border for easy scrolling. Maybe I’d even throw in pictures with links attached if I was feeling especially crazy. I’m pretty sure I’ve tripled the required word count for this assignment already, but all in all, I’m happy with how my intro site turned out, and I’d love to do more coding and design in the future. I can’t wait to tell my mom that I made my own website . . . that no one but me can see unless I give them the files. It’s all very exciting. Thank you.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2019
Categories |