The Technical:
To make my site, I began with a basic template. I found that the best part about starting with a template was that it allowed me to learn many things about coding that I wouldn’t have normally known existed. For example, without the template I used, I wouldn’t have known to google “font awesome icons.” However, since the template introduced me to font awesome icons, I was able to learn about something I never would have known existed. At first I planned on inserting images into the three circles on my homepage; in the end I actually found that the Font Awesome icons of a plane, comment bubbles, and the thumbs up seemed to work better than images would have in that situation. The biggest challenge I had at first was deciphering what in the world was going on with the template’s coding. The FA icons, for example, posed a serious challenge at first, as they were completely foreign to me. After a thorough google search I was able to figure them out it was very cool and extremely rewarding. I basically learned through trying to reverse engineer the coding. I studied certain parts and researched them to eventually figure out what at first seemed impossibly complex. Eventually, to get to my finished product, I pick and chose certain elements that I liked, figured out how they worked, and then made them my own. There was a special elements.html with tons of helpful examples of how to do various things like add buttons or a comment form to your site.
Six CSS Changes:
The Ideal Website:
The main things keeping my site from being the ideal site I had in mind are the “Travel” and “Comment” buttons on the homepage. I had them centered below the FA icons at first (like the “Favorite Things” button) however after correcting the errors Valitador.com found, I couldn’t get the buttons to go back underneath the FA icons. Including a video or two would have been nice, but this was difficult as most videos I wanted to include weren’t licensed under Creative Commons.
Modes:
The primary mode that I hope will define my website is my use of the linguistic mode to create some humor in my site. I tried to use cheesy word choice paired with a semi-sarcastic tone to hopefully make reading about me more entertaining. I was hoping to convey my humor and sarcasm through the linguistic mode. I also utilized the visual mode to compliment my use of the linguistic mode. I based most of my website’s visuals off of an Instagram inspired series of photos with captions. Through my Instagram inspired vertical-photo-oriented layout I was able to incorporate the spatial mode to create a website that is easy to look at and a layout is familiar to most people.
Design Strategies:
On my homepage I put “WHO IS RYLAND?” in all caps right in the front and center. The choice to align this question in a large white font in the top center was meant to emphasize that question and let the audience know the purpose of my website: the tell you who I am. The large, white, bold font I used contrasts well with the background image of the people with question marks as well as the flat green background at the bottom of the page, which draws emphasis to the words. I also feel that the green lower background contrasts with the navy and orange of the upper background to draw the reader down the page. My command to “Scroll down to find out!” also was intended to make the reader scroll down to my “Travel”, “Comment”, and “Favorite Things” pages. I chose to keep the “Travel” and “Favorite Things “pages as a white background so that it contrasted with the colorful images I used. My hopes were use this contrast to place an emphasis on both the colored images and the black and green font I used. As far as alignment goes I tried to make my website as symmetrical as possible in most places. I center aligned the images, the titles, and the main introductory sentences for both the “Travel” and “Favorite Things” pages in order to make the eyes naturally scroll down the page (like many people are so used to doing from scrolling through Facebook and Instagram).
Link to compressed Introductory Website:
/uploads/5/6/9/5/56954791/introductory_website.zip
To make my site, I began with a basic template. I found that the best part about starting with a template was that it allowed me to learn many things about coding that I wouldn’t have normally known existed. For example, without the template I used, I wouldn’t have known to google “font awesome icons.” However, since the template introduced me to font awesome icons, I was able to learn about something I never would have known existed. At first I planned on inserting images into the three circles on my homepage; in the end I actually found that the Font Awesome icons of a plane, comment bubbles, and the thumbs up seemed to work better than images would have in that situation. The biggest challenge I had at first was deciphering what in the world was going on with the template’s coding. The FA icons, for example, posed a serious challenge at first, as they were completely foreign to me. After a thorough google search I was able to figure them out it was very cool and extremely rewarding. I basically learned through trying to reverse engineer the coding. I studied certain parts and researched them to eventually figure out what at first seemed impossibly complex. Eventually, to get to my finished product, I pick and chose certain elements that I liked, figured out how they worked, and then made them my own. There was a special elements.html with tons of helpful examples of how to do various things like add buttons or a comment form to your site.
Six CSS Changes:
- Increased size of border of circular icons on home page to make them more visible
- Increased font size of headers to create emphasis
- Made color of body text, pitch black to create maximum contrast with the white background
- Made buttons highlighted when scrolled over on home page
- I made the text decoration for my name in the top left corner underlined to create emphasis
- I increased the font size of my name in the top left corner to create emphasis
The Ideal Website:
The main things keeping my site from being the ideal site I had in mind are the “Travel” and “Comment” buttons on the homepage. I had them centered below the FA icons at first (like the “Favorite Things” button) however after correcting the errors Valitador.com found, I couldn’t get the buttons to go back underneath the FA icons. Including a video or two would have been nice, but this was difficult as most videos I wanted to include weren’t licensed under Creative Commons.
Modes:
The primary mode that I hope will define my website is my use of the linguistic mode to create some humor in my site. I tried to use cheesy word choice paired with a semi-sarcastic tone to hopefully make reading about me more entertaining. I was hoping to convey my humor and sarcasm through the linguistic mode. I also utilized the visual mode to compliment my use of the linguistic mode. I based most of my website’s visuals off of an Instagram inspired series of photos with captions. Through my Instagram inspired vertical-photo-oriented layout I was able to incorporate the spatial mode to create a website that is easy to look at and a layout is familiar to most people.
Design Strategies:
On my homepage I put “WHO IS RYLAND?” in all caps right in the front and center. The choice to align this question in a large white font in the top center was meant to emphasize that question and let the audience know the purpose of my website: the tell you who I am. The large, white, bold font I used contrasts well with the background image of the people with question marks as well as the flat green background at the bottom of the page, which draws emphasis to the words. I also feel that the green lower background contrasts with the navy and orange of the upper background to draw the reader down the page. My command to “Scroll down to find out!” also was intended to make the reader scroll down to my “Travel”, “Comment”, and “Favorite Things” pages. I chose to keep the “Travel” and “Favorite Things “pages as a white background so that it contrasted with the colorful images I used. My hopes were use this contrast to place an emphasis on both the colored images and the black and green font I used. As far as alignment goes I tried to make my website as symmetrical as possible in most places. I center aligned the images, the titles, and the main introductory sentences for both the “Travel” and “Favorite Things” pages in order to make the eyes naturally scroll down the page (like many people are so used to doing from scrolling through Facebook and Instagram).
Link to compressed Introductory Website:
/uploads/5/6/9/5/56954791/introductory_website.zip