If all else failed in terms of everything involved with this project, let it be known that the effort was most certainly here. In my original site, I want to reflect my brand personality from my design persona. According to Walter “To engage your audience emotionally, you must let your brand’s personality show” (15). When selecting each individual item whether it was a font or an image I attempted to keep my brand personality at the forefront of my memory. I will admit that I failed a few times along the way and not everything truly reflects my brand personality but the majority of my content does. Referring back to my Design Persona my Overview is 100% down to what I had sketched out prior “Nauta Site is an easy to use site presented in a clear-cut manner. There is not a lot of design to obscure vision but some bright colors to make the page come alive”. I believe the following image represents this.
This image shows my navigation bar which I will get into later but the emphasis is on my creative Portfolio. The first thing to notice is the bright pop of the yellow in my logo and the complementing blues in both the logo and the nav bar. In my Design Persona, I used characteristic traits to envision and verbalize what traits I thought my brand would have. These included: vivid but not obtrusive, sleek but not over the top, and fun but not childish. This image reflects all of these traits. There are bursts of color in the navigation bar as well as in my Portfolio works but all the words are clearly readable. Sleek but not over the top; I spent a lot of time working typography. I finally settled on Rubik for the heading and Karla for the body text. While these two are both sans serifs they complement each other and provide a sleek but casual look. The use of White Space helps to make it fun because my site is pleasing to look at it. I did not trap any white space; which is arguably the most important rule in regards to White Space as I learned in Digital Aesthetics. The white space does not make it look ridiculous or empty but provides it with a modern-esque look.
I spent so much time working on the responsiveness aspect of the project. The moment that my navigation became operational was an incredible moment. I was in the library at 1 am and I jumped in the air. I was ecstatic it was proof that persistence paid off. However, due to spending so much time on certain things there are other facets of my site which are not as emotional or responsive. One particular area that if I had more time would go back and hash out would be the tablet query or 767px. I simply did not have enough time to craft it and put all of the styling into this one.
Nearly everything remained constant across all three sketches to my actual design. One major item I did change however was a background image on my homepage. For some reason, I was against having a background image but here we are.
The last thing I would add would be a search bar in the top corner or a search feature. I believe having a feature like that really reflects a responsive website as well as depending on the design and layout could pack an emotional punch.
The amount of knowledge that I have gained from my first assignment is pretty overwhelming. For example, I had no idea what a div class or a div id. No idea what a cascading style sheet really was or a . vs a #. I remember sitting in your office during our one on one conference and as we were going over errors I said: “It’s so weird, that now when you say go and make a div class for this, text-align it center, and have the padding around 10px that I knew exactly what to do”. My fingers just started flying over the keyboard. Simple commands like these I have no trouble with now. If you told me three months that I would consider myself to be a decent amateur coder and designer in December I would have laughed and asked what a coder was and what they did. See below.
This screenshot contains code such as padding, line height, font size, and the use of div class. I knew only two of these after the first assignment (line height and font size). In terms of my overall successes; the most obvious one is that I have a fully functioning website. I am still baffled that I managed to accomplish this assignment and unlike the last one I didn’t scream as many times. Don’t get me wrong there was still frustration and panic outbursts aplenty but compared to last time I was much more knowledgeable of the errors that I had made and how to correct them.
The top image is the nav bar at the mobile screen view and the second is the bar at a computer widescreen view. The second major success would be the functionality of my navigation bar. As I stated above I was so excited the moment that it began to work. I think this moment really captured the goal of this project. To learn and see how hard this stuff really is. Even the simplest task of inserting some text and a few images is really complicated. I spent hours trying to get three little horizontal lines stacked on each other to become responsive and through this success, I discovered this project and began to appreciate it.
If I had more time or the skills I would add a search bar as well as additional content. I would really try and improve my homepage. I like how it looks at the moment but I would add more content in a scrolling fashion. Have my homepage act with more functionality. We did not cover this in class so maybe in my next web design class, I will tackle this challenge
I feel much more comfortable in my skills as a writer for the web. As listed above there are several things that I would attack if I had more time as well as additional skills. I believe that I could still grow as a coder but this project pushed me and challenged me beyond what I thought I could. I became so frazzled and frustrated because in my head I knew it was going to work and then I hit refresh and all of my code was upside down and inverted. I can confidently say that I am proud of the work I am submitting while not the best I gave it everything that I have.