Reflections on UI Design Basics

Impossible-TeapotEveryone is a designer these days. I remember back in the 90’s when animated gifs of flames and fireworks were the real way to show that you were “in the know” when it came to webdesign.

I was a self taught/professed web designer back in the 90’s. I had grand ideas of double majoring in graphic design and computer science. My friends in the computer science department warned me against taking too many graphic design courses. And my friends in graphic design cheered me on. Either way I knew I would be indispensable if I could speak both languages: Computers and Design.

Computers require deep specialization. There’s a saying that blares in the back of my head. It yells in an irritatingly sing-song loop, “Jack of all trades. Master of none.”

10 years later and I’m happy that I chose to specialize in computers. But I don’t regret my time learning graphic design. I feel so much richer for knowing 2 disciplines versus a single one. Now a new song loops in my head, “Don’t put all your eggs in one basket.” Sure I could be further along with computers if I focused on one discipline but I wouldn’t have the liberal arts education that allows me to see things both from the visual point of view and the purely mechanical point of view. I wear 2 hats. I have 2 perspectives.

Check out my post on Programming for Visual Designers.

Computers require us to specialize. Technology keeps changing and requiring more and more of us. Not only do we have to be able to code, we need to be aware of how to present our ideas in pleasing designs. As technology advances our aesthetics are almost always called into question. As the medium changes, the visual layout requires that we change with it.

What I don’t understand is how all of these changes in design affect usability. I’ll be honest, I am tired of learning new things all of the time. I wish some things would just stay the same. Stasis in Technology? Never! I learned that at an early age. If you want to be in this racket, you need to be willing to constantly change.

Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend. – Bruce Lee

I get it Bruce. But I’m tired. I miss the days of links underlined in blue. My images don’t need to parallax scroll when I read a blog post. I don’t care about the extra niceties. Give me plain HTML with no fancy in-line images and I’m very happy. Do aesthetics have to change with the times? I know technology makes old tech obsolete. But it’s sad to think that new tech also makes old aesthetics obsolete.

End of rant.

This week I worked on 3 WODs

The first WOD required me to create a simple History of Modern Browsers HTML page. I got the content from Wikipedia and laid out the page easy enough. I added some images and created some links to present options to learn more about the creators of each browser. When I had to create a table of contents for the page I got caught up on named anchors and had to look them up online.

  • Time taken on first try: 14 min 50 sec
  • Time taken on second try: 7 min 30 sec

The second WOD required me to update my History of Modern Browsers HTML page to link to a CSS page to make my boring HTML page look better with some Web 2.0 style. I do love the ability to request fonts from Google. No need to purchase fonts. No need to download a local copy to my server. I also updated the body margins and colors to personalize the page.

  • Time taken on first try: 13 min 51 sec
  • Time taken on second try: 10 min 33 sec

The third and final WOD I completed this week was the easiest. I updated my History of Modern Browsers CSS styles to format the contents into a centered page with a three column layout. This was accomplished easy enough with the same float: left tags I used to display the images inline with the paragraph text.

  • Time taken on first try: 5 min 6 sec

Reflections on Completed WODs

The first WOD was the most difficult to complete in time. What I’m learning through the process of coding in a “dumb” IDE is that I rely on code completion a lot. When I don’t have code completion to link to a relative style sheet all progress stops. I have to google “<link rel=” and it takes up serious seconds. Also, linking to fonts hosted on the Google servers is not second nature.

The second WOD presented some problems for me. Without the assistance of Dreamweaver, my web-coding IDE of choice, I had to waste precious time googling how to link to fonts on Google’s servers.

The third WOD was the easiest for me. I completed it in a little over 5 minutes. Once I had warmed up with the previous 2 WODs doing the few updates required to center the content in a div and create a three column layout was easy. I’ve been working with CSS for a little over 10 years and I feel very confident in floating a few. I should study more about relative positioning in CSS.

Reflections on Repeated WODs

Most of the problems I encountered in finishing these WODs this week was that I don’t have a good handle on git branching without using IntelliJ or the GitHub application. It frustrates me to no end when I am trying to push a branch to my repo only to see the option to push it to master. I did learn that I could type in the name of the branch that I wanted to push the updates to.

After I finished my first attempt on the second WOD I reverted my changes to the master. I expected it to reload in IntelliJ but I still had my style.css file. In order to finish the WOD in a reasonable amount of time, I went in and copied the index.html file and ended up deleting the old repo and creating a new one. I pasted the index.html file in again pulled a local copy from the repo.

This method of copying files from the local repo and recreating the repo on GitHub works for these small projects. But I can see that as the projects get larger and larger I am hurting myself by not fully exploring the reasons why IntelliJ and GitHub seem hellbent on frustrating me with errors.

I made the following notes during my repeated attempts at the first WOD:

  • Had to search for named anchors.
  • Setting up a project in IntelliJ was different because it’s not a java file!
  • It’s like the tools IntelliJ and Github but they are not fucking working well together.

I made notes during my repeated attempts at the second WOD:

  • Gotta remember this bit of code: <LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css” MEDIA=screen>
  • How do I do all headers instead of just h1 or h2?
  • How do I set images to be inline with text?
  • Switching back to the master branch gives me to the same style.css file. This should be gone when I switch back to the master branch.
  • Committing my push always goes to my master. I want to find out how to do it to the branch. That is where it needs to go.

And I made the following notes when I repeated the third WOD:

  • The instructions for this WOD do not specify all the necessary padding that is involved in getting these things to show up correctly. There are considerations for padding that are not addressed in the write up.
  • How do you center a div in the middle of the screen?
  • How about centering the thing vertically?
  • Also the links in the example are stylized with the rest of the text on the screen.

Suggested Reading

Author: David Neely

Professional Software Developer. Technology and Web Coordinator at the University of Hawaii's Manoa Career Center.