Web Design Homework Due 09/29/16
For the beginning of class next week, Thursday, September 29 (what? already?!?), please complete the following:
Work through Chapter 1: The Language of the Web in your textbook. It covers pages 1–42. Ack… forty-two pages?!? Don’t freak out; this isn’t the same as slogging through some tome on 19th century German philosophy. Our book prioritizes pictures, activities and examples over walls of text, so you will be able to progress reasonably quickly. Fair warning, though, this book is insanely cheesy.
INSANELY cheesy. You may have to fight the urge to do this…
…or even a little of this…
But there is a method to the schlock, and the the doofy presentation actually seems to make the information stick better than it does with your average tech manual. Therefore, I encourage you to temporarily disable your campiness firewall and just go with it as much as possible. If you’re interested in more about why your textbook is written the way it is, read the introduction, which discusses the learning psychology behind all that Cheddar, Swiss and Muenster.
Tuning In/Turning In
As you’re working through the exercises in Chapter 1, you may write directly in your book or on a separate piece of paper… student’s choice. Part of Chapter 1 involves creating two HTML files using a plain text editor. After you have finished these, save them together in a folder labeled yourlastname_starbuzz01. Compress (zip) the folder and e-mail it to me before the start of class on the 29th. In case you don’t know how to compress a folder, here are instructions for Mac and Windows. I will check your other chapter work in class. FYI: you do not have to do the crossword puzzle on page 37. If you do complete it, I will give you some extra credit.
Once last thing about this assignment. As you no doubt have realized, all the answers for the exercises are in the book. There are also HTML files for each chapter, and I have loaded these for your downloading pleasure onto our course Dropbox (please just download; don’t move or delete). Because of all this, it is crazy easy to cheat on the book-based assignments if you are of a mind to do so, especially since I’m not particularly inclined to pursue some kind of mean-principal-in-a-teen-movie campaign to catch deviant homework behavior.
You’re adults choosing to take this class, so it’s up to you whether you want to really learn the content or whether you want to engage in jiggery-pokery. All I will say is that blowing off the textbook now sets you up for genuine headache later in the semester, because I will expect you know it. If you didn’t learn, you will probably find yourself collapsing into a fetal ball of frustration once you start coding your own pages. I don’t want that for any of you, my dear web designers.
Start working out the functional layout for the new home page for popsice.com by completing at least 10 wireframe thumbnails. These can be 10 completely separate layouts or variations of a few layouts. It’s fine to do your thumbnails with pen/pencil and paper. In fact, I recommend it, because it’s important at this stage to work quickly through lots of possibilities rather than focusing on one “perfect” idea.
Potentially Helpful Links
- Not sure what a thumbnail is? Check out this description.
- Want more information on wireframing? Here is a link to a pdf of my lecture notes on the topic.
Read This Section: Reminders Aren’t Just for Ignoring Any More
As you get started making your rough wireframes, remember the key is FUNCTION. You are not designing layout based on what looks oh-so-nice. You are thinking about the placement of navigation, text and media to effectively guide the visitor through the page, allowing him or her to find the information they need as well as the stuff the client (Pop’s) wants them to see. To help you figure out those needs and wants, look to the functional analysis you did last week. Your reorganized site map will also come in handy since it determines what links appear on the home page.
Of course, with wireframes, you get to decide not just which links go on the home page (which is what your site map tells you), but where those links will be located in the layout. Are they in the header or the footer? Is there a top nav or side nav menu bar? Perhaps there are some things important enough to necessitate a call for action. Remember not every part of a website needs to appear in your redesign (you may not want… say… a footer). Whatever you put in the mix, though, don’t sell short the prime web real estate at the top and left of the page. You know… the lucky stuff that’s doesn’t get hidden when the browser window is resized.
Finally, don’t be afraid to try different or even waaayyyy out of the box arrangements if you think they might function well. Working breeds inspiration, and it’s a lovely thing to follow that inspiration and let it reveal to you its possibilities.
Other Things to Do with That Endless Ocean of Free Time College Students Have
There are two other tasks I strongly recommend chipping away at this week if you can find the time. I wont check them (yet… dum dum DUM!), but they do have to be done sooner or later. Sooner sets you up well for what’s to come.
- Complete the digital site map for your reorganization of popsice.com. Because you worked out how you want to set up the new site with index cards, you should already have the reorganization more or less in the category of NAILED IT! However you may need to tweak it based on what you learn-as-you-go, and you definitely need to finalize the professional presentation, which will ultimately be due the day of our final critique (October 13 if you’re tracking). I showed you in class how to use Photoshop as a tool for making a digital site map, but you can finish yours in another program such as Illustrator or Gimp if you prefer. Don’t forget the important extras like title, project info, and map key. It’s also good to remember is that site maps are meant to be documents that even your crazy Aunt Edna can understand. So, keep the language and labeling clear and Edna-friendly, and don’t get too wackadoo with the colors, textures or shapes. If these mere words can’t sway you from putting all the hues of the rainbow in your site map, perhaps grades will. You WON’T be graded on how pretty-pretty your map is but you WILL be graded on whether it effectively explains the organization of your redesign. Visuals can help, but they can also hurt. I would rather see a clean, simple design that quickly conveys information, than a beautiful, complex design that doesn’t.
If you need a reminder on what a site map is or what it does, I made that thing… you know… last week’s handout. You can also inquire with your friend Google. I bet he’ll share if you ask nicely. 🙂
- Start looking for images that you might use in your redesign mockups. Set the size filter on the Advanced menu in Google Image Search to a reasonable minimum size. 400×300 is probably the absolute smallest, and… this is totes obvious but… for anything that will appear larger on the page you want bigger minimum dimensions.Save any images you think you might want to use with descriptive, web friendly names (no spaces or special characters). Your collection will come in handy over the next couple weeks and so will the neat organization of files. I’m talking to you, non Photoshop-layer-namers!
That’s all (certainly that’s enough!). Have a great weekend, and I’ll see you next Thursday!