Web typography assignment

While I was away on a short trip to Quebec City, I missed the class dedicated to Web typography. Luckily, Mark was kind enough to record the class for me. Being a print designer and having worked in the magazine industry, I am already familiar with typographic contrast and hierarchy, but review is always welcome.

After a quick summary of the major typographic concepts, it was time to start  styling the articles we had selected. In the spirit of the subject matter, I chose to style an article on Paul Rand, a graphic design icon, and as a side benefit, got to learn more about him.

I enjoyed working on this project; it was pretty painless and although I struggled a bit with (up-to-now) seldom-used elements (table and definition lists), it turned out as I envisioned. Check out the result here.

I must admit that I do wonder about  the timing of this typography lesson. We have already built numerous websites and it kind of feels like this lesson and assignment should have come much earlier on in the semester. I’m sure it’s information that would have been beneficial prior to composite one.


Design-to-code assignment

This was a seemingly simple assignment that got way out of control for me. I thought I was pretty decent at the basics we’ve tackled so far and haven’t struggled too much with css and responsive design using the 960 grid, aside from the dreaded navigation bar, and in particular, the dreaded mobile navigation bar.

But this layout was actually built at 1024px, so I decided to nest a 960 grid within that. I managed to get the static desktop site mostly coded during class except for the form, and thought I was in good shape to make it responsive. I had already set some of the widths using percentages so it should have already been resizing fluidly, at least a little. But it wasn’t. Not one single part of it. So after trying to tweak things for a little while, I decided it might be better to start over. And over. And over. I think this final version is version 4.

To get to this stage, I have broken nearly every single thing, and usually more than once. I’ve had every block level element collapse on me, elements not centering when I thought they should, both vertically and horizontally. I’ve had trouble deciding whether an image should be applied as an image tag or a background image, and I’ve gone back and forth trying out each option. I’ve been on the verge of giving up on this assignment several times.

This isn’t perfect, but I have to stop working on because 1) I’m now growing to resent it and 2) I’m falling behind on all of my other assignments. That pesky imac illustration overlaps and doesn’t resize because I made it a background image. Maybe I could at least tweak the position, but I’m going to live with it now. I’m also pretty sure I was supposed to replace the images with their higher res 2x versions for retina screens, but I didn’t do that either.

Here are the final results: http://denisechan.ca/design_to_code/

To answer the Design to Code questions:

2. The layout uses the 960 grid…sort of.

3. The 12-column grid works best for this layout.

4. The main sections are: intro, services, portfolio, contact, footer.

5. I created body, header, nav, articles.

6. The full width of the site is 1024px.

7. Typical 960 grid has 10px padding and 10px margin all around. I didn’t have too many of the elements adhering completely to this convention though.

8. I probably could have wrapped the entire thing in a main tag, but I kind of thought they were all of the same importance so I didn’t use one at all. All of my elements are outside of main tag, though I don’t think it would be odd to have the footer, and maybe the nav outside of the main tag.

9. The only graphical elements i created were buttons. Now I’m wondering if I was supposed to make more? Maybe a favicon?

10. The “view my work button” was 140px wide x 50px high, while the “view project button” was 109px wide x 50px high.

11. I created the buttons using css a tags instead of creating a graphic.

12. The main colours used in the design were: #B9383E (dark red), #F64ES2 (lighter red), #E8E8E8 (light grey), #FFF (white), #000 (black).

13. This could have used a little letterspacing on the h2 tag in the contact section. The capital T and E are touching and that doesn’t look great. I find that letterspacing isn’t as subtle as kerning so I’ve mainly stayed away from it unless I want it to be really obvious that I’ve manipulated the spacing, but maybe I’m doing it wrong.


What is good design? Glad you asked…

As luck would have it, I attended a screening of “Design Disruptors” last night; it is a fantastic documentary (produced by Invision) about how some of the most innovative companies in world have used design to improve their products and gain a competitive edge in business. Rather than accept that pain points are an inevitable part of life, these companies focused on creating new products to address them. They saw opportunities to improve or simplify the lives of their users, and worked tirelessly in this pursuit. They brought design to the forefront to ensure that their users had a pleasant experience at every point of interaction.

Some of my main takeaways from this film:

  • identify who the end user really is (and acknowledge that it might not be you)
  • brainstorming sessions appear to be collaborative but can lead to group think and stifle abstract problem-solving
  • design is iterative and needs to evolve along with end user’s needs
  • conducting user testing at the prototyping stage allows you to address unforeseen flaws before official product release
  • unlike releasing printed products, you can immediately measure the success of digital products releases through analytics, social media
  • the experience is the most important thing and may require the sacrifice of visual design elements
  • design humanizes technology
  • truly great design is still really hard to attain

This quote from John Maeda will stay with me for a long time:

Design is about making solutions. Art is about making questions.