Monthly Archives: February 2016

What a difference a class makes…

After working on the in-class/homework purple page (and with Mark and Pearl’s help) I can hesitantly say I don’t feel completely hopeless coding anymore. It took way less time than usual to tweak the purple page, actually allowing time to re-attack my typography assignment and portfolio pages! The type page in-class critiques included: too many words per line, a responsive (bouncy) site, and padding issues. Finally seeing a “static” site with set width and use of px vs % or em was extremely helpful in defining what our site should be. I was following Lynda.com’s responsive site plan with max and min widths instead. My second revelation was the purple page’s use of a container/article. Previously, when looking at websites with the developer tool I hadn’t made the connection of the separate central div, which also allowed for a more distinct background surrounding the container. Thirdly, realizing you can just place an image or quote in the middle of the source code and use really opens up the non-linear possibilities.

I’ve always fancied myself a bit of a designer around the house, but color combos alluded me. These tools are great for inspiration, presenting the color spectrum ever-so-different. The most intriguing tool types were extracting colors from images (colr.org), accessibility checkers, and any of the plug in a color and get scheme options tools. I put my site up against Graybit and it checked out, but when I tried it in Check My Colours it came up with an error message. Did anyone else have any luck with it? It would be neat to see how it grades different sites. Extracting colors from a set image is a great idea, but dealing with black and white images doesn’t help the cause. I really want to use that type of tool once we work with photoshop and hand color a photograph.

During spring break, I am definitely going to continue attacking and reconfiguring my portfolio and type pages. I’m looking forward to tweaking the color scheme too.

I commented on Alicia’s blog.

Typography web

I came in with a familiarity of the art print side of typography as a fan of Etsy (the one stop online shop extraordinaire for all things crafty), but had no real concept of its web based usage. It’s straightforward with print, whereas in coding we have to account for browser reading capabilities. I spent a long time perusing fontsquirrel.com and the Adobe Edge web fonts before deciding on four styles.

For menu and military citation font I wanted a mid-century typewriter feel so I chose:
elite
The header font is fairly similar to Special Elite but isn’t quite as straight and is more transparent:
harting
Body Font:
aller
For the Yearbook (Lucky Bag) Quote I was trying to mimic a guy’s handwriting, which was especially hard since nearly every guy I know has horribly illegible writing:
annie
I love the fonts, but cannot figure out why they are not working in every browser. It is especially painful because I use Firefox and that is the only one I can’t get to accept the specialized type. After browsing FireFox’s support site, I found Font2Web which is supposed to convert TTF or OTF files to more readable WOFF or SVG. Unfortunately after uploading a new file through the website I still haven’t had success in getting Mozilla to read them. Anybody else having this issue?

This assignment is also supposed to use citations. Initially I was having issues with the in-page links or bookmarks, but thanks to W3schools I realized I was using the “class” attribute instead of “id.”

Since uploading my typography assignment through Filezilla only one of my fonts transferred for any browser. Nevertheless, this is my typography site: LT Reem Medal of Honor.

I commented on Tammy and Alicia’s blogs.

Laying it out on the line

After finishing this week’s readings and tutorials, I feel like I glimpsed into the life of graphic and web designers and it was both exciting and terrifying. I am slowly gaining a more discerning eye with manipulations of design to draw in the user. By recognizing how audiences approaches on and off screen content we can create better and stronger utilized finished products. Last semester, we talked about using Google Analytics to track clicks on adverts and visits among other things. Marketers and web designers use heat mapping to gleam the best placement for adverts. When I googled eye tracking Kissmetrics blog on 7 Marketing Lessons from Eye Tracking Studies had interesting screenshots of heat mapped eye tracking that prove our readings. It’s just using the 5 steps to visual success outlined in White Space is Not Your Enemy.

1. Establish a clear focal point
2. Have a minimal number of groups for the eye to scan
3. Guide eye movement with visual sightlines
4. Set type well
5. Be simple – less is more

I feel like the cart came before the horse a little bit. It would have been nice to use these techniques during our first foray into web design. Using fixed or custom grids is now such an obvious first step or check to make before completing your layout to not overpower or create an imbalance in the layout. Likewise, manipulating flow of movement through the use of S curves or diagonal lines pointing to the start of the text seems like such a subtle way to guide the reader.

Practicum

As soon as I uploaded my Dreamweaver portfolio site, I realized that while I worked out positioning in the various browsers, my site did not transfer well in mobile. The “Works that Work” in Type on Screen gave great examples to consider for changing the design to fit multiple platforms. Many of the screenshots of layouts and interfaces were fascinating, I was extremely excited at the prospect of creating something so well planned – using hide and reveal, gradients, and/or type as navigation. I just really wish the captions went more in depth in HTML and CSS – a little more guidance to see how that element breaks down in the coding would be so helpful. I can’t seem to get the various sections laid out for mobile. How should a mobile site handle block quotes? How did you guys reformat the navigation to fit for mobile?

I posted on Tamara’s Blog.

Typography and Putting Lynda.com Through the Ringer

As we dove head first into HTML and CSS in class last week I realized that Paul (the Lynda.com guru) and I had not spent nearly enough time together. But with his help, the developer tool, and W3schools.com I started to get the hang of it. In particular, I love using the developer tool on websites and actually kind of understanding its construction.

The biggest issues I had in creating my page revolved around positioning. I wanted a roughly three column layout. I continually tried using the floating and clear sections, but it only moved to a point. The section was not going where I wanted it considering Paul made it look so easy. The CSS Position property reference laid out the differences between the properties. I assigned “absolute” to the left and right side sections and relative to the middle section. I also used the developer tool to see how other websites dealt with their block quotes and side menus. This all seemed to do the trick in Dreamweaver’s live version but when I previewed it in Google Chrome and Microsoft Edge the block quote moved into the footer. I eventually played around with it enough to get a delicate balance that showed close to my vision in every available browser. Amidst configuring the position it helped that Dreamweaver is so responsive. You see any changes immediately in live view.

I was wondering though what browser views are available in the Apple version? I would have liked to see how my page translates into Safari. Mac users, do you have any idea which browser mimics Safari most?

Errol Morris’s “Hear, All Ye People; Hearken, O Earth,” study on the effects of typography in journalism results didn’t surprise me. I’ve always had a love affair with Oldstyle type, but I never understood why. As we read earlier, design is supposed to emit or draw out emotion and that must juxtapose in some way with what David Dunning describes as personality. In the case of Baskerville, its formal “starchiness” seems to produce a certain level of trust. In contrast, Comic Sans is childish and almost comical, especially when CERN used it to make its epic scientific breakthrough. I’ll admit until recently I had my phone font set to Comic Sans because it makes me happy and reminds me of childhood, but I would definitely think twice about using it in a professional setting.

The biggest takeaway from this weeks readings was to recognize that less is more. You can integrate a decorative font like Comic Sans but only for emphasis and depending on the seriousness of the topic. Keeping it simple with 3-4 font choices and only 1 per font type. All I want to use is the fun decorative fonts so this will definitely be a challenge.

Eventually I want to set up a link from my WordPress page, but for now here is my portfolio page.

Commented/thanked Josh for his instructions.

 

Week 1

I started the readings this week a little hesitant, not knowing quite what to expect from this course. I really enjoyed learning the most basic aspects of design and look forward to applying everything to our big projects. I fancied myself an artist growing up and this class looks to be an interesting mix of artistic application and hardcore break downs of software and coding.

The practical exercises at the end of the chapters in White Space is Not Your Enemy showed how omnipresent design is in our society. I broke down the design aspects on a pair of running shoes – and the form versus function debate. For the most part I feel like the shoes are predominantly function, even the fancy reflective colors help keep runners safe. That being said I have definitely spent more money on the same pair of shoes in a different color simply because I liked (or was emotionally drawn to) a certain and inevitably more expensive color.

Having taken Clio I last semester, I felt I had a pretty good grasp of what constitutes digital humanities. Stephen Ramsay’s second article offered a great summation that I definitely plan on using. On the one hand “Procedural literacy,” could be seen as just a fancy way to say “learn by doing.” On the other hand, when you are forced to break down elements of your project to the bare data level and rebuild using various tools of the trade, you undoubtedly discover new roads to take in your research. The journey is often more important than the end.

I was able to get about halfway through the Lynda.com Dreamweaver course and I feel a little overwhelmed. One of my classmates told me about the w3schools.com website. With their HTML reference page split screen I started to grasp the concepts a little better. I look forward to getting hands on help in class this week because I really had a hard time getting past the most basic concepts.