New Blog Looks

November 27 2008
by

This blog is getting more movement and more eyes on it, so…

I decided to clean things up and give the blog a new look.

The focus has been on improving the layout, making the type a bit bigger, and generally less scrappy. Maybe adding a bit more personality, but you can be the judge of that.

I will continue to shuffle things around and improve it as I become more familiar with wordpress. If things are broken, please tell me.

Also, if you want a link to your site on the right sidebar, let me know and I will add it (or Camille can do it too).

from: Interaction Design

23 Comments leave a new comment!
November 27 2008
Mikko permalink

Strikethrough seems to be broken for some reason. Maybe it doesn’t like the font. But, no one really uses strikethroughs anyway. There are other ways to update.

November 27 2008
Mikko permalink

I made a test post and all the important stuff seems to work, like , bold, italics, and a few headings. Colors, underlining, strikethrough and bullets don’t, but they are not important. Also quoting is weird, but it’s easier to use quotation marks anyway.

November 27 2008
Mikko permalink

the blank spot in previous comment are the code tags. Really good if you are posting code.
it(looks) == this[]

November 27 2008
moydi permalink

Ummmm…the new blog is more accessible….but looks
ummm not so UID!!!! I guess look and feel should need some
more iteration…

November 27 2008
rc permalink

Thanks for the suggestions so far. I’ll look into fixing those details, Mikko.

About the look – it has a bit more to go. The masthead should get some more flavour soon. I suppose UID translates visually in different ways to each of us. A deliberate effort (on my part) was made to detour from a design “look” – read that as you will: design fetishism manifested in visual references to sketching, electronics, uber-sleekness, or post-it-note-on-every-wall campiness.

Our programme (and I speak more specifically about year 2) is far more rich to me than that. I speak personally (I undertook the re-design by myself without asking anyone after all), when I say that our programme continually challenges assumptions around design (interaction or not). The mix of students, the freedom the label “Interaction” affords us, and the laissez-fare environment created by the lack of a clear programme-leader have made it this way.

If the design of the site is a bit unexpected to visitors, I see that as a positive. Of course, the content should be clear, easy to find and neatly presented. Much of my effort was on that – clear distinction between posts, highlighting of links, and bigger type. Of course, we have Camille to thank for facilitating posting of YouTube videos, Vimeo videos and images at different sizes.

I’m open to hearing ideas around design for this site, so don’t be shy if you have specific comments you can articulate (beyond “I like” or “I don’t like”).

Back to my earlier point (if you’ve read this far), it would be an interesting discussion to surface over to the blog’s main area:

What is (or was) UID to you?

November 27 2008
Camille Moussette permalink

Hey,

thanks Roberto for undertaking this refresh. It’s very nice to see it changing after 2 years. Here is my initial feedback:

-the header image should be larger, or the full width of the top page should be used/populated. It’s floating too much for me right now. Having a larger visual element would solidify the whole thing. Maybe put a tiny space between the top and the header image, everything has white space around, except the top image which sticks to the browser window. By the way, I like the look of it now.

-Some images have a colored background (light red or yellow) if they are wrapped in a link. I’m not sure I appreciate it as it’s not uniform (across images, youtube, other graphic elements).

-I like the CURRENT IXD PROJECTS AT UID box. I just wish it would be liked to some content, details or info about the projects.

Which leads me to the bigger issue I have about the site as of now: I think we need as a group to work on the content. The way it is now is a big collection of little bits of info. Sure some of it is very interesting but the rate at which they are published (3-8 per day) makes that some great posts (like projects, good rewiews, discussions) are rapidly sunk down way below or to another page within a day or so.

I feel we should aim at having a front page with good quality content and maybe a separate track with bits, links and secondary news. Or maybe mix the two somehow. I would love to see larger texts, essays or posts that are rich and show that we can do more than copy/paste of interesting stuff we see online. Maybe we need something else than a blog for this. A landing/home showcasing more projects/ideas/thoughtful activities.

/Camille

November 27 2008
P.-A. permalink

Salut,

First off,big thanks to Roberto for taking the time to contribute to the visual appearance of the blog. I think it looks quite nice, it has a very soft feel, and perhaps too soft, in my opinion. Meaning, you can see a separation between posts, but I think it could be more obvious and have more contrast. There is a full border (line) at the end of all the posts as opposed to dotted lines at the top. I would tend to invert that. To me, it feels more natural to have the “marker” or “starting point” at the top than the bottom. Perhaps a 2-3px full border at the top?

That said, I like the approach — no fuss, no cheesy gradients and other tasteless perephenalia. I don’t know if it looks UID or not, but what does look like UID anyways…

Another thing, this one concerning the appearance of hyperlinks. There are 4 if not 5 different styles of hyperlinks (some appear blue, some are highlighted in pink, others in green, some gray, etc.), and actually this is a “lesson” learned from Camille that the styles of the hyperlinks, ideally, should be all identical, with maybe an exception (main menu, for example).

As for the header, I agree with Camille, it should be bigger. It could be nice if were some sort of banner that showed images of student projects or just artwork that people would contribute to it, perhaps with the type that Matt (?) did as an overlay. I know i’d be into submitting artwork (not that i’m an artist) or photos of projects/studio life at UID (maybe this is how UID looks… like the project—and the people—that do them).

Hope this can help in some sort of way. Again, good job Roberto.

péa

November 27 2008
P.-A. permalink

Actually, looking at it a little more, I would try suppressind the blue slanted lines at the end of the posts. Then the titles would stand out a little more from the endings of the previous posts. I feel I kind of looks a little awkward with these slanted blue lines at the beginning and ending of posts, especially on shorter posts, where you see a lot of blue and little text.

péa

November 27 2008
rc permalink

Cool – thanks for the keen input, Camille, and PA. I’ll address the visual comments first, and leave the “content” bit for the next comment. Brain dump follows.

The obsessive part of me would love to tweak all design minutiae to perfection, but the rational part understands there’s a limit and trusts that most choices have been made with good reasoning. As I fix things, I can try some of your ideas.

Masthead: The idea is that more of the space will be used. I’m against ‘blocking’ the full width with a wash of color, but there’s room to evolve that area. Right now it’s a light-hearted type treatment I did to which I will add some Matt brilliance when/if it hits him. Here or on the sidebar, a place for student snapshots (projects, doodles, whatever) would be great.

The current image-block docked (stuck) to the browser edge works for me as it is. When the weight of the masthead changes, my feelings may change.

Image Background Glitch: Images that are also links (but not embedded videos) exhibit this behavior. I need to see how I can allow links to still maintain a bg color (now pink) in text, but not in images. If not possible, the choices are: live w/ the glitch, or change the appearance of text links to not have a background color (making them stand out less against regular text).

Link styles: There are 3 dominant ones, with variations. I’m aware of the need to limit variants, but am not a slave to doctrine.

Let’s ignore non-essentials: comments, tags, blog-post title, permalink – adding visual clout to these would make each post even more fragmented, so discovery of these can be accidental to the user. These non-essentials are some tone of black, with highly visible hover backgrounds.

The 3 that remain are:
1. Links inside posts (black on pink with yellow background hover) that need to stand out from regular text in the the often multi-line posts.
2. SideBar links (blue with yellow background hover).
3. Top-right navigation (plain black with white on black background hover), which are clear as links by their labels, position and calm surroundings. If the masthead gets bigger, these may need to change.

Hovers are black or yellow background blocks. The intent is to make links obvious even if not exactly the same everywhere, with the common thread being the immediate block hover color change. This is currently a “link” site, so emphasis priority is for: links within posts, then sidebar content. The top-nav (about, etc) are sparsely populated pages now, that demand less attention.

Individual Posts: PA’s observations are good and a big part of the design challenge. A stronger solid line as top border will fight the blog post title. The title acts as a strong anchor, and a chunky (even 2px) or a dark line on top will add visual clutter and create unnecessary banding. Reason suggests a strong line on bottom is problematic as it seems to add emphasis where maybe there shouldn’t be. Reason fails.
The line there is solid to make the end on one post clear and open up room for the next. From afar, the top boundary is the post title. The bottom, the thin black line at the very end of the block.

The diagonals in the background of each post are there to create a light shade of blue that if solid would drown onto the surrounding white. The texture the lines add allows for very subtle color block with enough presence and clear demarcation. It’s a delicate area and in the end I felt this title block needed this treatment. This doesn’t invalidate other approaches, but this is where I ended.

November 27 2008
rc permalink

The more interesting part of the conversation is conent.

About a year ago we had this discussion. A site with links lifted from our daily blog rounds seemed ridiculous to me. We all go to Core and other sites so why bother? It turns out Mikko started posting links and others followed and it soon turned into a collection of links that are relevant to us. The voice is casual and unedited, and my opinion about having a “links” blog has changed.

I now realize this is for us primarily and should be more of a diary of our lives at school, open also to curious outsiders (students to be, past students that feel a strong bond to the school and the odd lost passerby), but not curated specifically for them. If you follow the posts, the links posted paint a picture of what we are thinking about and working on. Much value would be added with more personal content (sketches, videos, etc – related or not to our projects). I would rather see a chronicle of the moustache trend at school than another link to a multi-touch table.

This still leaves a gap for what Camille comments on – where do we present our work more formally so it doesn’t get buried in the noise? I don’t know if this blog is the right platform for that, if it should go elsewhere or it can be mixed. It’s a conversation worth starting. The sidebar widget surfacing what each year is working on is a humble start.

Who would be in charge of collecting, editing and maintaining this content? Is this effort reliant on the few who are willing to make room and take the time for the benefit of all? How can the school encourage/reward this and track the benefits behind it?

Students document and present their work in portfolios – how can doing the same for the school’s record become a less insurmountable task (balanced with more pressing school duties)?

November 27 2008
Jannes permalink

Yeah. a lot o thanks to Roberto! a redesign of our blog was long overdue. I was thinking about doing something about it myself once in a while. The design looks really cool already! I am not a big fan of the Graphic Header on top of the blog though. It feels a bit childish to me, I’d prefer it more simple.

A minor bug I have found in the system is that you can not click the names of people who posted. Sometimes I’d like to click a name to see all the posts by this person.

After giving it some thoughts, I agree with Camille that we should think about the contents of our blog. A blog with random links/videos/… is fun and helpful and we should keep it going! But I think the focus of our blog should be our own work and culture at UID. Therefor the blog as it is now should be just a part of the whole website.
the “Current IxD Projects at UID” and “Projects [IxD2]: Experience Prototyping 2008” boxes are a step in the right direction in my opinion. but maybe we could put these boxes into more highlight (e.g. adding pictures). Also I think there should be a designated place for all student projects.

We should show the world what a great programme we have at UID. I don’t think the blog right now is delivering this experience…

just one idea: What about getting a flickr account for Interaction Design Umea. We could upload pictures of our shows, parties and workshops to this place and install a wordpress plugin so we have the latest pictures somewhere on the front page of our blog. also it would make a great archive of pictures for ourselves…

November 27 2008
Camille Moussette permalink

Great great! thanks for the reasoning. I like reading your thoughts on the various topics/issues.

Quick remark on the styles for the links. The overall goal in my opinion is that you shouldn’t have to mouse over something to see if it’s clickable or not. As of now, it happened a couple time where I tried to click something that was going nowhere. Top menu links are ok and obvious. Links in posts that just look like regular text is no good in my opinion, even if content makes it clickable (ref. http://www.interactiondesign.se/blog/2008/11/cyborg-rat/ where two adjacent textual links ‘Diagonal view’ and ‘Leave a comment’ look different).

One that confused me also was the author tag, by “Mikko”, in green. Since the background is a solid color, just like most of the other links. I click it expecting to eventually see all the posts by Mikko, but no. It doesn’t work. Functional issue, styling issue, personal issue, all of the above, none, I don’t know. But the spot of green in the whole thing is enjoyable.

Anyways, these are just small details. I don’t think we should care so much. There are much better things in life to do beside fine-tuning CSS. I’m just glad the blog has a new look/life.

I kind of like the default blue color of the some of the links. It looks like there was no CSS or the link was broken. It looks just like the old days with Netscape! Here is one site I like a lot for one particular detail. The CSS style for visited links shows which pages/links you have seen. It’s a very clever way to display the typical breadcrumbs information.

Check it out: http://www.beckmans.se/om-beckmans/

I was thinking of something similar could be done with the little arrows.

Cheers,

/Camille

November 27 2008
Camille Moussette permalink

By the way, the links in the comments should maybe have the same style as the ones for the posts…

Roberto, if you need help with the CSS files, let me know. I’ll try to help out if needed.

/Camille

November 27 2008
rc permalink

Thanks for catching more issues. They are on my list (for tomorrow). The green author box not linking bugs me too… I need to figure out how to make this work in WordPress.

The distinction b/w “body” links and “leave a comment” links needs to exist, still, IMO. The blog post is pointing you to a resource (the link) – leave a comment is secondary. Given our posting history, they often appar adjacent to ea other.

Anyway, more to play around with.

I hope to get the more obvious problems out of the way tomorrow.

The Flickr group is a great idea. We should definitely do this – so easy to set up.

Thanks.

November 27 2008
pea permalink

To maybe say one last thing concerning the appearance of the hyperlinks, if you say that the ones that are directing to comments are less important, another (efficient) way of creating hirachy is modifying the size in which the type is set. Nothing new here obviously, but I would simply try to reduce the size of the type—and therefore keep a more unified appearance of the hyperlinks. I think it’s worthy of at least being tested in Illustrator.

As for content, I have talked quite a bit with Camille about the almost total absence of informative/promotional material regarding UID. I’ve also very modestly offered my services to Mikael and Mike, telling them that I would be interested on working on anything that would promote the IxD students and the program. Both were very enthusiastic about it, the former saying he would talk to Tapio about if he could find funding, the latter encouraging me to write a detailed proposal of what I intended to develop (which I have barely started doing).

Today i’ve also talked with Niklas Andersson quite a bit about the subject and we both agreed that it is definitely towards web-based promotion that work needs to be done. We also agreed that often video is by far the best medium to communication interaction design projects—a photo gallery would be nice, but a video gallery would be even better. Just look at the videos from the second year guys and girl that undertook the Experience prototyping class this semester; they’re particularly good, I think.

Maybe more importantly, i’ve also talked about the subject with a few classmates (Joachim and Benjamin) who also seem to be willing to get involved. Since there is very little—but very open-minded and forward-thinking—staff at UID, I think that it is a great opportunity for students to get involved. I know I want to.

I’ll try to come up with some plan about developing the interactiondesign.se website in the next couple of weeks and send it to you guys (or post it on the blog, whichever) so that:
1) everyone can submit ideas/suggestions
2) people can suggest on what they would want to work on
3) the future website/outcome reflects the IxD students.

Anyhow, sorry for the long post. I guess I should get back to work.

Cheers,

péa

P.S.: Flickr group and Vimeo group, perhaps.

November 28 2008
moydi permalink

Hi again…
Sorry i was not so clear on my last my comment!..I think its great work and excellent initiative to redesign….I know it must be a lot of work also :-)

most striking thing for me was the logo or header…with too many colors and not very clear design…and what it says!…..UMEA- SWE in the logo ( sometimes misleads…..) …..perhaps interactiondesign.se is enough as logo?…….dont know…

may be its a good idea to get a second opinion on logo!

November 28 2008
pea permalink

Just to clarify what my previous post was saying about the smaller type… I meant smaller type not in general, but for the less important hyperlinks.

In other words, a unified look for the hyperlinks, but with the less relevant stuff being set un a smaller type size.

péa

November 28 2008
Mikko permalink

I think the blog looks just fine. At first I was shocked about the logo, but I can see the point. I am not overly enthusiastic about “clean” design, so I am ok with things falling a bit out of place. The other thing is what Camille said about the projects being important and I agree, they should be emphasized more. I post a lot of stuff here, mainly because my delicious is getting crowded and I need a place to put the interesting stuff. (not really) This way all the project posts get lost in the mass of stuff that get posted. It would be nice to have a space between the header and the posts for the projects, so they become more important. Just my 2 öre.

November 28 2008
rc permalink

I fixed a bunch of things. The links are no longer pink. Although that style provided nice contrast with the reg text, I couldn’t find a way to make images not inherit that style. On rollover, the images still get a yellow band at bottom, which we can live with.

The links w/in posts are now blue (an to give them proper contrast against the reg black text, an underline was added). The “leave a comment” link at bottom of each post now has an underline, but is not blue to create distinction against the proper outbound links in posts.

The author green box remains unlinked. This stays as a to-do.

December 12 2008
Camille Moussette permalink

Hey all,

just a quick note to let you know I updated WordPress to version 2.7 (latest one, with various tweaks and nice updated interface for the admin section). Also, I added a link on the green author tag “by Username”. Now you can click the name and see all the posts by this author. I was quite easy to do, two lines to change in the code, voilà!

/Camille

December 14 2008
rc permalink

Thanks for the updates Camille. The Author name (in green box) now appears in black instead of white, which is a bit of an eyesore. I’ll have to look into adding style to the css to make it white again.

December 14 2008
Camille Moussette permalink

I’ve updated the CSS to make it white again.

December 14 2008
rc permalink

you are quick! thanks!

Leave A New Comment

Captcha Challenge * Time limit is exhausted. Please reload CAPTCHA.