Table of Contents
Description
Due to the small number of members with front-end design experience and a need for a common feel across applications, a group of members will be dedicated to helping with front-end design across all projects.
Interested Members
Raf, Ben, Hubert, Jenny, Guru, your-name-here,
Discussion
Initial Design Thoughts
- No aqua-style graphics! There was nothing cooler even a year ago, but fads come and go. The current skule design uses a rather subtle variation of this style in the nav bar and as a result isn't too bad. Just unnecessary in today's world of web design.
- Use of angles of some form - I think this would add a visual edge and be a tasteful way of making it feel more like an engineering site
- Staying away from the standard header-sidebar-content layout - the current skule site is a good example of this style, but I think it is necessary to part from this style to make the site more interesting and easy to understand.
- Extending this idea, the site's layout and visual design should be scaled to the kind of content it will be displaying. If there is going to be a lot of information on the homepage than a more traditional layout is justified, otherwise I think we should try for something more distinctive and unconventional. However, a fair amount of text can still be presented in user friendly, original ways. A great example of this is http://clearleft.com/.
- Ways of presenting the skule logo. It looks good on paper, but blue, red and gold does not translate well to the web. We must find a way of displaying it in a more pleasant way. The current design does this reasonably well by using a slightly different colour scheme with a white background. Unfortunately this makes it kind of look like it was just plonked there on the page.
- Following this line of thinking, my first “big” design idea was a layout based on a photo of a skule badge on a desk with some papers comprising the content areas and some sticky notes the navigation. The effect of the photo based nature of the design would be to tone down the colours in the badge and make the layout more intuitive. However, it might be too stereotypical and present engineers as people who only do schoolwork. In addition, the photographic references might have to be re-illustrated on the computer to mitigate the pains of a photo-based layout and to make the site look cleaner. For these reasons, I'm not sure what I think of this idea, but it could work.
- Another idea I have is a design based around a spray-paint style graphics (sorry Hubert, stole that idea from your portfolio site). My initial sketch looked ok, but I've been unable to make a satisfactory mockup in photoshop (getting that effect correct is difficult).
The choice of design style really depends on what we're looking to achieve.
Design Mockups
| Info | Image | Author Comments | Group Comments | |
| photo-based layout mockup 20/06/09 –Ben |  | |||
| centered skule logo layout v. 1.0 20/06/09 –Ben |  | It's a rather conservative design. The best part of this idea is the impact that a centered skule logo can create on the page. Some parts of this are really rough (including the logo, which is taken from the last photo and will have to be re-illustrated), but I think that this one has a lot of potential if its tweaked a bit. | ||
| centered skule logo layout v. 2.0 28/06/2009 –Ben |  | I have created a rough version of the content layout using 2px wide dividers and a two-toned content area instead of boxes to separate the two different kinds of content. I also finished work on the skule logo tracing, the results of which look great. I am aware that there is a discrepancy between the font that I based my version off of (the one from the skule badge) and the one that is commonly used. I chose the badge font because I believe it looks much better than the other font that is often used. | I think the logo looks great! Good job. However, IMO, using it for a giant banner is more suitable for the EngSoc homepage, rather than just the skule home page (which would be the hub). Also: a bit dark, but I def like the removal of the blocks (and using the 2px divisors instead). I also like subtle background shade difference between the two sections (photos/events and map etc.) –Raf | |
| My quick mockups - Home Page (the “hub”) 29/06/09 –Raf |  | (focus on the items and layout, less so on the details.) | I think your design is sound, if a little plain. Being a minimalist design, I think the finished product has the potential to look great, but would revolve significantly around the quality of the photographs in the slide show, which means we wouldn't be able to let any old pictures be added to it. I know its rough and you are pursuing a minimalist look, but I'm not sure if what you're envisioning has enough visual interest, IMO. Additionally, there are some small differences in the way we laid out our content about which I doubt we disagree on and can discuss Thursday. I look forward to discussing this with you. –Ben | |
| Club Page 29/06/09 –Raf |  | |||
| New Hub Idea 07/07/09 –Ben |  | Possible hub design which aims to incorporate some of the things Raf and I discussed at the last meeting. These include: an overall “unique” look; the “wrap around/behind effect” and introductory text at the top of the page. I've also roughly laid out some page content, but visual divisions of the content portion and how that interacts with the nav and blue band have not been finalised at all. Let me know what you think. | ||
| Revised hub design 09/07/09 –Ben |  | Added a more transparent blue bg behind intro text. Does make things busier visually but i think it adds much more power to the design. | ||
| “Merged” Hub Design 12/07/09 –Ben |  | Attempt to incorporate the skeleton of Raf's layout of the logo, nav and intro text with the visual “wrap-around” style that we both liked. Visually it is very different from Raf's design, but the layout of the main page elements is virtually the same. I am most pleased about the way this design merges element from all three previously considered designs - the layout from Raf's, the visual style from my wrap-around designs and the blue title bg from my first design. This layout should also be easy to elegantly adapt for the sub pages that lack photo banners. Let me know what you think. | Much better! I like it. Can you try to see what it would look like for a miscellaneous club and their logo (try UTCA, and include a footer. –Raf | |
| UTCA Test Club Homepage Design 14/07/09 –Ben |  | Things I tried to accomplish with this test club design: Adapt the hub design for easy club customisation - this meant designing the nav to allow for a white bg behind the logo so that most logos can just be plunked in; Add additional elements to the design to unify the elements and make each page look more like the clubs' - I accomplished this by adding two 3px horizontal bands of colour, one above the nav, the other in the footer, including additional highlights for the current tab. The footer was also new. I'm happy with the way it turned out. Let me know what you think. | ||
| UTCA Test Club Homepage with revised skule bar and top nav 15/07/09 –Ben |  | Okay Raf, after a couple of tries, here's a mockup i'm reasonably pleased with that eliminates the gap between the skule bar and the main nav. I also got rid of the plain gradient bar at the top that you didn't like. Although I feel this one is missing something, tests i did navigating away and then coming back showed the streamlined version - at least when viewing the page as a whole (footer included) made a stronger visual impact, if only because of the darker skule bar. the text in the bar should also be a little lighter for more contrast but i don't have time tonight. eager to hear what you think - Ben | ||
| UTCA Test Club Homepage v. 3.0 16/07/09 –Ben |  | Raf - I know I had said we could go with the last one. But coming home and looking at it again, i just had to try one more thing. Maybe i can convince you that this one with the teeniest of gaps (and no photo peeking out) is the best mockup yet. - Let me know what you think. | ||
Useful Apps
Viewing Photos
Inspiration
Workflow
Instead of using plain ol' CSS and RHTML (ruby HTML markup), we're looking into using the following:
- Blueprint, a CSS framework
- Compass, a framework, allowing you to use SaSS with Blueprint
- http://sass-lang.com/, a metalanguage on top of CSS (allowing you to use variables, math, etc.)
- HAML, a very tight markup language
