Academic plan for Web design
If I wanted to go into Web design, I would definitely start by taking Advanced Web Authoring. I’m trying to get into that class for the spring ’11 semester but it’s very popular apparently and I’ve been put on a wait list. Other classes that would be useful would be graphic design classes that got me used to creating graphics and working with images. (I’ve always wanted to say “I’m rendering an image on my Mac” for some reason – I think because that’s the bow-out excuse at the Apple store, saying that “It’s not like you’re going to be rendering images or anything…”) Even if I have no intention of going into Web design, having a graphic design class would be very useful. There is a group called The Society for News Design in the Communication Arts and Sciences college, and they have gotten some good press for the work they do. Since I’m a journalism major and my intention is to become a copy editor after college, familiarity with layout would be a great skill to have. I think there would be significant overlap in the concepts of print layout and Web layout, and I think both approaches would help train my eye for what works visually. In fact, understanding the differences between the two would probably help me be better at designing each type. Web design is interesting, and it seems like one of those skill sets that would be handy even if I wasn’t doing it for a career.
Re-branding exercise
Krista and I were assigned to rebrand the Detroit Lions with McDonald’s. We renamed the team McLions and changed the color of the lion graphic to red. We had wanted to incorporate the golden arches in a unique way, like having the lion leaping through flaming arches, but we ended up adding it as a small tattoo on the lion’s shoulder because it was more reasonable.
This branding exercise was interesting because it made us think about how to combine colors and graphics into a new product that still bears a resemblance to the old logos. It was a challenge to decide the appropriate ways to incorporate the different corporate colors and fonts into a new representation for the football team. It definitely takes an artistic touch and an eye for aesthetics to successfully work with these visual images. It can seem a little overwhelming because, basically, anything is possible on the Web when it comes to graphics and design, but limiting us to two themes to blend together was a good way to frame this creative project.
Conference follow-up
The chat conference we did was helpful. I’ve got a pretty good bead on where I’m going with my portfolio site. You suggested to create the site in Dreamweaver and then copy that page and tweak it for the subsequent pages that will have different content. I know I want the main visual frame to stay the same no matter what page you’re looking at. Another suggestion you made was that if my stark color choices – black, red and gray – prove to be too visually boring then I could add an accent color or some drop shadows.
One of the things I’m looking for online is a free graphic of a stack of books. I’ve found a few that would work in a pinch, but I haven’t found exactly what I’m looking for yet. Most of the book graphics I’ve found show the page side of the books, and I want a graphic that shows mostly the spines of the books because it’s more interesting that way.
So, my goal is still to create my site from the ground up, but having learned my lesson from the prior module, I am prepared to use a template if I have to. I will find a great template and use that as my fall-back position in case I can’t build a from-scratch site in time. I’d prefer the from-scratch method because I think I would be able (theoretically) to build it exactly how I am envisioning it. So, there will be questions coming up, for sure, but for now I’m just plugging along.
catch-up blog: Web site win
What makes a website “successful?” You can answer that question however you’d like. I have left it sort of vague on purpose, so it’s okay if you do some exploring of the question as you respond. (I just double-checked the email you sent with the list of blogs so far and realized I missed this one)
I think what makes a Web site successful is when it identifies a target audience and then successfully markets to that audience. This would mean a steady or growing hit rate and appropriate advertising for revenue. One of the things we talked about at the beginning of the semester is how sometimes companies create a Web site that they want to create, without tailoring it to the appropriate audience. It is critical for companies/Web authors to pay attention to the demographics of the intended audience and to style the site according to the needs of the target audience.
Another aspect of a successful site would be an appealing, attractive layout. Simplicity seems to be a key factor in the sites that appeal to me. From my perspective as a consumer, the company should make it as simple as possible for me to give them my money. This means no extra clicks, no unnecessary page changes or pages that have too much stuff crammed onto one page, and certainly no broken links. If it’s a news site or a blog, I don’t want to be visually overwhelmed. The style of the site should not overwhelm the text, it should complement it.
The cephalopod sees what you did there
Your next prompt is this: I want you to post an image (or a link to an image) of a logo you think is well put together. I then want you to explain why you like it/think it is effective.
This is the logo from the art/techno site Laughing Squid. The site tends to feature art that incorporates technology or that implements new ways of using common mediums.
There are several reasons why I find this logo appealing (the most irrelevant of which is that I’m obsessed with cephalopods). The first is its visual simplicity – there isn’t an overwhelming array of shapes and colors to boggle the mind, just a simple but attractive presentation of two colors and one image. The second is the multiple arms of the squid – signifying user contributions from all sides, and seemingly acknowledging and embracing the fact that art can come from anywhere. Third, the two long tentacles that follow a circuitry-board path culminating in a shape that evokes ideas of computer parts – this seems to represent the technical aspect of the site; not only does the site embrace the blending of technology and art, but it also offers a Web hosting service. Lastly, the squid’s very large eye seems to be looking at you expectantly, waiting to see what you will contribute to the site. I also just noticed that if you let your eyes relax and see the picture all at once, it makes a laughing face with two eyes, a huge nose and a crazy mustache.
The simplicity of this memorable logo belies all the symbology hidden in it (in plain sight), and that’s what makes this logo appealing to me. It’s intelligent and clever and someone obviously put a bit of thought into it.
say what?
On your blog, I want you to tell me the story of something you’ve tried to do or are trying to do that isn’t going so well. I’m going to use these entries to determine what stuff we should actually talk about in class next week.
I really like using Dreamweaver. It seems like once I get the hang of it, it will be very easy to use. There are obviously a lot of things that program can do.
I’d say that my biggest problem so far has just been trying to break into this ‘css’ language thing. I liked the exercise in class where we used a template to see the changes it made in the coding. I think if we did that 10 more times I might actually get the hang of it 🙂
The readings are very useful but are a bit overwhelming because there’s so many of them. I would really, really like it if you picked a really good one that had a step-by-step tutorial, and had us take a day in class to work on it all together. That way we could keep referencing the instructions while we try to create whatever the tutorial creates, and you could walk around answering questions and giving advice. The hardest part about class for me is that you give instructions so rapidly that if I mess up a step then I lose everything you say from then on and I feel very, very lost.
Module 4 prep
Your blog prompt for this week is this: give me a preview of what you’re working on for mod 4 (as much as you have now). This can be narrative, can include images, or links. Ask questions if you have them! Think of this as pre-writing for the web.
I will admit that all these different projects are starting to get confusing. We’re supposed to be working on our final project, which is creating a web site, as well as module four, which is a redesign of our wordpress blogs using css, but then we also have to do this blog about working on module four, and they’re all tied together in a cumulative-learning sort of way so right now I have about 20 windows open on my desktop and my brain is tied into a knot. I see why we’re doing things in this order, because each experience should help us gain knowledge for the next project, but I feel like I’m starting out blind. And, I need to learn Dreamweaver and Photoshop…
I’m going through all the different CSS guides and tutorials online, looking for a good one that makes sense. My prior experience with html is very, very rudimentary (think coding images for myspace layouts), and when I look at CSS code I see a language that I need to memorize. I can identify individual words that make sense, like the font or color, but it’s all laid out in a language that I’m not familiar with. I can’t just type ‘make this page blue with diagonal stripes’ and have it work. So I’m trying to sort through the links we’ve covered in class and other things I find on the web in order to get a starting point for this. I feel like I should go to the bookstore and buy a book titled ‘CSS for Dummies.’ Not a bad idea, actually…
I get that CSS is a language for web design. I get that each part indicates a style for the web page(s). But all the tutorials start out halfway down the road. I’m trying to find a site that says ‘blahblahblahcode is what represents a banner, and you can change color, size and orientation by changing these parts specifically.’ You know? All the tutorials I’ve used so far assume that I know the code and can recognize it.
So as far as Module 4 goes, I’ve got a background image selected and a visual idea of how I want the blog to look. I want to set my background image as stable and have the blog text slightly opaque so you can see the image behind it. I guess I’m just getting confused because I’m trying to a) decide what I want the blog to look like, b) learn how to turn my mental image into CSS code, c) figure out how I want my final web site to look, and d) figure out Photoshop and Dreamweaver. It’s doable. I’ll figure it out!
Echo of tweets
Think of a website you go to on a nearly daily basis. What is one thing you wish it did (or one feature you wish it had) that it doesn’t, and why would you want it to? *this is an audience question *
I use Twitter because I am a journalism major and my professors have all instructed me in no uncertain terms that I need to have a Twitter account. So, I joined. A little something inside me died, though; Twitter was one of my stalwart holdouts that I just didn’t want to participate in because it looked so faddish and trivial. Now that I have had an account for about 7 months, I can finally see that there is indeed some value there. I get breaking news from feeds like CNN and The New York Times, and I find links to all sorts of bizarre and interesting things through other people’s tweets. I still don’t tweet often, because I just don’t have that much to tweet about and I’m certainly not going to tweet “eating breakfast” or “omg going to the mall.”
As I’ve gotten used to using the site, I’ve realized that if I don’t check twitter at least twice a day, there are so many tweets that go by that they become almost inaccessible. I tried once to find a tweet from about 24 hours prior, and after clicking ‘older posts’ ten times and only going back a few hours, I realized that those day-old tweets were functionally blocked. So, one thing I wish the Twitter Web site did is have a function for searching through older tweets. If they had an archive on the side, broken down into 24-hour chunks, that would allow me to quickly scan through the tweets and see if I missed anything good. I know much of the appeal and usefulness of Twitter is the timeliness of the information in the tweets and the second-by-second updating. But that’s not the only value for a casual user like me – sometimes I just want to make sure I didn’t miss anything good. I think the Twitter people assume that everyone will use it like a stream of consciousness, and there is value in that, but they’re completely ignoring the way that some people might prefer to use the site. I think I would use Twitter more if they had a way to access tweets on the site in a less time-sensitive format.
The colors, man…
We’ve looked at color and issues of color blindness this week. What I’d like you to think about is a site you’ve visited recently that doesn’t seem to be carefully attentive to color (for whatever reason). Write up a short plan to modify the page so that it takes into account some of the stuff we’ve learned this week.
Boo hiss
This weekend, I’d like you to think about one design convention you’ve noticed on a number of websites that you don’t like. Explain why, and think about alternative ways to do the same work. Offer specific examples.
The most annoying tactic that I’ve seen used on a site is on Lansing State Journal‘s Web site. The page opens up normally, and for just a few seconds you can scan the info that they offer. Then a giant ad drops down from the top. It’s so large that it blocks the entire screen. The worst part is, it isn’t a ‘click here to make this go away,’ it’s actually animated and moves the entire content of the original page down, stays for a few seconds, then slowly shrinks away and moves the page content back to where it was originally. This is incredibly annoying. I try to deal with it by quickly scrolling halfway down the page so I can slowly scroll up as the ad activates, but it’s really annoying and frankly, it makes me visit the site less. I’ve never seen another site do this – I looked at that CBS sports site you posted a link to, and that’s annoying, but I’d say the lsj site is worse because it happens before you can figure out how to stop it. It’s like a new version of a pop-up ad. The alternative, I guess, would be to just make the banner ad a little bigger than normal.
Another problem that’s quite common is to offer far too much information on the front page. Again, lsj is a culprit. When you open the page, you see a blur of text. There are two bars packed full of tiny tabs at the top, underneath a jumbled header with a 3-line brand, which is underneath yet another bar of tabs. My first instinct is to say ‘no way I’m hunting through all that nonsense.’ I’d rather go to another, more organized site to find what I’m looking for.
This could easily be remedied by organizing more, and offering a more distinct focal point on the main page. I know the creators are probably all in a dither about how much info they want to give the reader, but they’re doing it wrong. They need to prioritize their content so it can be presented in a coherent, easy-to-digest manner.
Laura Riess' Reticent Ramblings 