All posts tagged web design

  • YMS website

    Did you want to see the end of this project? VoilàMy first wordpress website for an outside party (not for myself and not for class). (Visit the website here).


    I was so thrilled to work on this project with just a wonderful, wonderful foundation. They were all so kind and sincerely enthusiastic about their cause. And why shouldn’t they be? It’s pretty amazing.

    The design for this website is inspired by the logo (which, in turn, was inspired by the project). So I wanted it to pull off of the colors and feel of the logo, the urban grittiness of it. Youthful and exciting, but still clean and easy to navigate. Successful? Those are things you’d have to judge. I’m kind of bias.

    Not to say it was all roses and sunshine. Web development is roll-your-sleeves-up and make-a-pot-of-coffee kind of stuff. Or at least it was for me. The night before it was due, my unbelievably generous friend Carissa stayed up with me and sent me screen shoots of what the website looked like a PC (specifically the most evil browser of all: Internet Explorer). Back and forth over skype for hours. Quite luckily she is in China so while it was 4:30 in the morning for me, it was only the early evening for her. Princess C is truly a great friend. So many occasions where she has swooped in to help me out of precarious predicaments. Thank you.

    Here are some things I learned:

    01. Internet Explorer is hands down the most terrible browser. When all these neat advancements are taking place in web development, there’s always a footnote: “This is not possible in IE” or “You have to do make an ‘ifIE’ exception.” HATE. As my friend Kyle so-aptly put it: “The only people who use IE are old people in libraries.”

    02. CSS3 is the bees knees

    03. Keeping the original code is essential. When you have horribly manged your website there’s nothing better than just deleting all the code you added and reinstating the original code. You probably just need to add a div anyway.

    04. Avoid absolute positioning like the plague..

    05. I love a good challenge.

  • 4025: Webdesign checklist

    Sometimes I like to think that design can’t be reduced to a checklist, but apparently it can. Virgina Montecino, an retired professor of new media at George Mason University compiled a list of Web Design Principles on one of her course pages.

    Although it feels weird for me to get my information from a list and not an article, Moncento has compiled quite a hand list. Here are some thing things she believes designers must be aware of as they design their sites (I will talk about some, but not all of them in detail, be feel free to go to her site to see a complete list:

    • Audience
    • Purpose
    • Location of the site
    • Type(s) of content
    • What information do you want on the home page
    • Content (“should be spell-checked”—sigh)
    • Level of Web technology to best suit the purpose
      • I think this is an interesting point. Can you think of a site where you  have felt like there is too much technology involved? I think any non-musician website that has music is annoying.
    • Style to best suit purpose
      • Professional, scholarly, casual, child friendly, teen-oriented, artistic?
    • Page design: Consistency, clarity, and user friendliness
      • Include a “back to home” link
      • Use a consistent template on each page
      • Create a uniform color scheme (with limited color palate)
      • Be sure there is sufficient contrast between background and text
      • Avoid a too large font that SHOUTS*
      • Avoid a too small font that is hard to read*
      • Place important information near the top
      • Avoid long lists of links if possible.
      • Categorize lists in smaller chunks and provide internal tags
      • Provide a  table of contents (with links to find information in a long list)
      • Organize your material to too much scrolling to find content
    • Technical specifications
      • graphics, resolution, frames, colors
    • Accessibility for the disabled
    • Copyright rules

    Why is this checklist important? Because even though you can read a bunch of theory and collect a bunch of advice, at the end of day your website needs to be functional and appealing in the most basic sense. I know I have to keep all more elaborate ideas grounded by consciously remembering what needs to be on my website and not just what I want there to be on my website.

    It’s also easy to get overwhelmed with the construction of a website (being defined as the organization of web content using multiple web pages) because there seems to be so many different things you have remember, do, and consider. Just making a list like this might be the best think for panickers (like me) to do.

    This entry is part of an assignment in an English class called “Writing for the Web: Digital Story Telling” in which we have to post research relevant to our final project. My final project will be the creation of a professional website.

  • 4025: Making websites “human”

    A good website is built on two basic truths—that the internet is an interactive medium and that the end user is in fact human. In other words, it is meant to be an experience. As with any adventure, a little strategic thought is needed to ensure that the experience is enjoyable. [source]

    In A List Apart‘s article, “Human-to-Human Design” Sharon Lee explain the importance for a websites to remember their audience are individuals and the importance for web designers to make their websites feel like an intimate experience (in terms of feeling human and not mass produced). I though this article was interesting because it combined a lot of the ideas our Writing for the Web class discussed.

    Here are some of the key things designers should keep in mind when creating their site:

    • Respect your audience. Lee tells designers to take time to know who their audience is and to tailor you message to them.
    • Tell  a story. The most effective way of communicating a message, and websites allow you to do it multimodally and non-linearly. Take advantage of the this.
    • Engage.Your website should create an experience for the reader.
    • Inspire & Enchant. Your website can do more than just mimic your company identity, it can show your personality.

    I believe the advice this article gives can help designers make a more affective website. Designers should be making interested in the audience as much as they would like their audience to be interested in them.

    I recently wrote a paper on a similar topic, it briefly discussed the importance for artists to show their personalities in their websites. Like a resume,  an online website needs to tell your audience who you are and why you are special from other artists. One website I really enjoy is StudioBenBen‘s. I think it’s important to seem like a person that a potential client would enjoy working with, as well as someone who is good at designing. Which means: Always keep your audience in mind

    This entry is part of an assignment in an English class called “Writing for the Web: Digital Story Telling” in which we have to post research relevant to our final project. My final project will be the creation of a professional website.

  • 4025: Web design – basic definitions

    As part of my webliography, I am required to have posts based on “source material” so I went onto Amazon* and bought two brand-spanking-new (and rather expensive) books based on reviews. They are Sam’s Teach Yourself HTML and CSS in 24 Hours and Introducing HTML5: Voices That Matter and I’ve just cracked them open today so I’m not necessarily recommending them at this point.

    Anyway, my decision to buy these books stems from the fact that I know barely enough about web design to get by and for the most part have worked in the WYSIWYG mode. I know some of the most basic tag from making a horrendous geocities website when I was 14. So really, I need to know the basics. Like, what is the difference between HTML and CSS? What is CSS? What can HTML 5 do? What is XHTML? How are you going to replace Flash websites?

    Today, I wanted to answer the basic questions on the what HTML and CSS are, and I hope to post next time about new standards in web design. Here goes!

    [Source: Sam’s Teach Yourself]

    HMTL codes “mark up,” or surround the text in order to tell a browser (Internet Explorer, Firefox, Chrome…) how to display web content. For instance, a common code bloggers use to change the color of their text is. EX:  <font color=green>Verde</font>

    Cascading Style Sheets (CSS) are, from what I have gathered, something similar to templates which allow you to carefully control the layout, font, colors, and formatting of your web page. CSS goes beyond what HTML can do.

    [Source: Introducing HTML 5]

    HTML5 is essentially the up-and-coming generation of HMTL which is significant because it’s supposed to be simpler (tags are more logically named) and is backwards compatible. The three main aims of HMTL 5 are:

    1. Specifying current browser behaviours that are interoperable
    2. defining error handling for the first time
    3. evolving the language for easier authoring of web applications

    For instance, one thing that I’ve read during my pre-book research was that instead of having a bunch of <div> (divider) tags, there will be more intuitive tags like <header> or  <navigation> —I don’t know if these in particular actually exist, but it’s the general idea that they are labeled more clearly.

    And now you know.

    *I hope you all know that if you’re a student you can get Amazon Prime for free for a year! I already loved Amazon, so this was great news for me. Free and 2-day shipping?!

    This entry is part of an assignment in an English class called “Writing for the Web: Digital Story Telling” in which we have to post research relevant to our final project. My final project will be the creation of a professional website.