This is the midpoint of my commute to work! A great way to start the day!
Above:(work in progress–I’m not done yet… now I have 6 errors in my html) transformation of a website going from simple html, to CSS—simple layout and background colors in boxes, to incorporation of googlefonts and patterns—as planned in my style tile)
CSS is the hero behind html. Hypertext Markup Language originated from the need to index research. The hyperlinks carrying the reader to other sources of related material. CSS stands for Cascading Style Sheets. It allows the simple text to have background images, colors, and layout. In that regard, CSS complicates your html code. This makes it perform differently depending on the user’s computer. A web developer should have a Mac and a Windows set-up and be able to look at websites in different browsers. If you have an Adobe ID, try their browser lab.
In yesterday’s lecture, Erik Fadiman went over CSS rules. There are a few categories: tag, class, ID and compound. These sound complicated and intimidating as much as the phrase “paragraph styles” intimidated me when we were talking about InDesign. These categories the specificity in the style system you are creating when you design a piece. I think that Erik has a better explanation of these at his website.
Class is surprisingly more flexible than it’s equivalent in InDesign. It designates traits (that you choose, for example, red and italic) and it modifies what you apply it to. If you don’t specify more than those other traits are left the same without having to create a new “style.” This can be used multiple times and spans tags.
Tags are more specific. The CSS rules redefine existing html tags such as h1, p, etc.
If there’s only one instance of what you are styling (ex. One very special button), then use #ID.
#Compound is special because it’s like nested styles. You can get very specific as to what you what. It’s indicated by <a> (an a tag.) You should use a tags for most styling. (It’s easier to do, in my experience).
The nuances of CSS rules are like learning about chemistry. There’s a pattern but many exceptions and the only way to learn is by rote memorization. In Adobe Dreamweaver, the interface isn’t as elegant as other design programs by Adobe. For example the way to align text in boxes is to make the line height the same height as the box (which is all measured in pixels). And displaying a text element as a box allows you more control over the trying to use it as an inline element.
I was intrigued to know that one can design a website without photoshop but instead using code. Coders have an immense confidence about them. Why? Because what they don’t know they can find easily. Coders have made it easy for other coders with code generators like this one. My instructor demonstrated how easy it is to look up an effect you want and its corresponding html. Simple, indeed. Those horrible gradients that emphasized buttons on websites in the 90s, remember those? Get some for your website here!
Subtlety is key. And remember as designers, it’s up to you to view templates and variants, understand their bones and build something of your own on top to make it special.
Always validate your html. My instructor ran the site when it was in the above state and it had 1 error due to coding em dashes. (I still haven’t figured out how to fix it without re-inputting my paragraphs of text.) In Web Design, don’t think you can get away with anything. Your instructor can look beyond the pretty formatting. My instructor used this.
Not only did I have an error in my coding, he spotted that the tagline for the site “Opera for the Post Modern World” was an h6 tag. He said that should be an h2 going along with good practices of Search Engine Optimization. Google will see how important that information is (it’s friggin’ h2, why! That’s almost h1!) and consider it a major bit of relevancy if that’s what the search calls for.
He went through my code and noticed all of the ’s. That’s a clear indication that I didn’t have control over my text and felt I had to hit the space bar to get the space I wanted. Web design is about simplicity. It’s about telling the computer in language that most computers will understand what you want to see. We take it for granted that we can send information at rapid speeds, but we also must communicate clearly otherwise the speed is irrelevant.
I spent a part of the afternoon painting today with Pete. I didn’t have anything in particular in mind. I started a couple of backgrounds like the one above and I moved on to working on a painting of what he suggested: a clown. I am not ashamed to post it on the Internet for the world to see. It’s simply not finished. Here’ s Pete’s painting.
I painted this as a birthday present for a friend. She likes wolves.
Today and next week I am going to be working on a “Social Media Report.” The small firm that I intern for currently does not have a social media strategy. This is what the the industry refers to as a FAIL. Just kidding. There’s still plenty of good reasons why an advertising agency isn’t in the big game of social media just yet. I can’t think of any reasons, but I am on the wrong side of this equation, until now.
I ‘ve been appointed as the lead on this project. My coworker/supervisor Paul pitched it to me thusly: “Kat, go get us social media.” I keep repeating that to myself as the creative brief I have been awarded. I am to spend the next week (and today and yesterday) drafting up a report. I told Paul that I didn’t need that much time, but he said that when I finish with the outline, the super general outline, I can go ahead and grab some more details to flush it out. This word map is what I have so far. Along with some tips I have picked up through some blogs. I am planning on reading some actual books about this subject, but I fear that anything printed is already outdated.
I’m fairly excited about getting this project. There is a lot of graphic design and UX involved in social media. I’m also using Evernote (I highly recommend this to creatives) to create a small database of links and advice to my intern-predecessor so that they might add to my company’s knowledge of social media, blogs and the web.
All of this Web Design Bootcamp stuff has made me extra aware of my online presence. I realized that my twitter profile looked only a notch above default. In other words, I didn’t take care of these details that could eventually get me a job. Also, after looking at patterns yesterday for my style tile endeavor, it felt weird. Even though they are free for me to use, I decided that I wanted to try my hand at making my own pattern.
I roughly followed this tutorial. It encourages a very small tile to start with, that way your website is taking up less information storage. I used a painting of mine(1) as a starting point, I wanted to recreate the leaf pattern(2). I did not paint the leaves symmetrically, so I took a small sample of the pattern, copied it and rotated it 180 degrees to lay on top of itself (3). Because of the asymmetry of the colors, tiling the sample creates a loose horizontal zig-zag (4). This (5) is what it looks like as my Twitter profile background. Not what I was shooting for, but for a custom pattern done in ten minutes, not bad.
This is the first style tile I’ve ever made. Style Tiles are a relatively new thing. With the age of mobiles upon us, we have to have elements that can size and refigure with ease. (elements:fonts, hierarchy system, button styles, colors and patterns). A mood board is too vague and a comp, too specific. In Jill’s class we made mood boards. I just feel that this is more crisp and easier to work with. When we talk about textures in style tiles, we are usually talking about a seamless background pattern that tiles. Having a small repeating png saves file space. I keep being excited about making buttons and button bars since Tim showed us how to make them. When it came to picking colors, I used the eyedropper tool to extract some colors I found in a dramatically lit photo that said “opera” to me and then modified them slightly when I found a pattern I liked that used them. And for one of the patterns, I downloaded it, then colorized it in photoshop.
Here is the list of links where I got my patterns:
nouveau flower
purple majesty
norwegian rose
Note: These patterns are from free-download resource sites. The sites don’t require linking back or credits. But, they always encourage it.
