When creating this website, I wanted to make something simplistic, but still polished and reflective of myself. I sketched out a design in my notebook last week and was able to come very close to achieving what I was envisioning through HTML and CSS. I wanted a clean look, which I created through a white background with accents in pink. I wanted there to be a series of three pictures on the homepage as well as an image featured on each internal page. I am proud of myself for being able to eventually figure out how create everything I envisioned for the page. If I knew everything about code, I would have created a more complicated design, but as of now there is nothing I would change about my site. I used the template from the html quiz assignment to create my website. The finished product does not closely resemble the one I worked on for the quiz, but I needed somewhere to start. I made the background and wrapper white to create a clean look. I increased the size of the wrapper by adjusting the width in CSS and added a solid pink boarder all the way around it to add color to the page. I created a jpg in photoshop which included three pictures of me to be featured on the homepage. This allowed me to create the collage in the exact size that was needed. I was able to add all of the elements I wanted to the html fairly easily. Although I eventually figured everything out, I did struggle with formatting on the style sheet. I was able to change the font, size, and color of text, but I could not figure out how to create a larger margin between the photos I added and the text. I looked up tutorials online, but nothing worked. I ended up texting a friend who knows how to code. She told me to increase the right padding on the image in order to shift the text farther to the right. This worked, and I was able to improve the layout of the “about” and “favorites” pages spatially. When designing and creating this website I focused on the linguistic, visual, and spatial modes. For the linguistic mode, I wanted to keep the text simple and personable. I used a list to describe some of my favorite things instead of writing it in paragraph form so that the audience perceives the tone of the website as casual and friendly. I relied heavily on the visual mode in the design process. I wanted to have a visual element on every page to give the audience something to look at and help them have a better depiction of who I am. Each picture signifies something that is important to me. The spatial mode includes the physical arrangement and organization of the page. I have everything evenly spaced out so there is some white space, but not enough to make it look like there is something missing. The audience’s attention is first drawn to the images and title text, followed by any other text, the pink boarder, and the navigation bar. I organized the navigation bar as a natural progression of information people would want to know. Ideally someone would want to see the homepage, learn about me, know what my favorite things are, listen to some of my favorite music, and finally visit my blog. The design strategies I focused on were repetition, alignment, and proximity. I used repetition in the design pattern for each internal page in order to create a cohesive design for the site. Each page uses the same colors, font, style, and border. This helps convey the overall organization of the site. The alignment also ties in to this. I intentionally laid out each element so that they are visually connected to the other elements on the page. If a picture is related to a block of text, they are placed in close proximity to each other. This creates a website that is easy to navigate and comprehend. Hopefully the execution of these design strategies helps convey to the audience that the design of the page was intentional and well thought out.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2019
Categories |