design by no one
:: the complete web solution
:: design :: free hosting :: identity
:: personal professional web design
:: design :: free hosting :: identity
:: personal professional web design
Important design consideration:
None of the musicians is a web designer, a nerd or even interested in computers so it needs
to be made easy to maintain by different people who know nothing, using software such as notepad.
Investigate Templates with Dreamweaver help topics
Comments on the above briefing: These guys aren't going to know how to use dreamweaver, templates are a terrible way to go for this project! They work in some cases, but not here; the levels aren't deep enough for a template to be of use. Even if it was, php-include would work a lot better, and it's very easy to set that up. Comment tags in the source code of the website would be optimal, along with a little bit of HTML tutoring to whoever in St. Lucia Orchestra is designing this website would be best, failing that, suggesting a free editor like Frontpage Express is a lot better than a volunteer orchestra shelling out money for expensive design software like Dreamweaver. Have two designs (see next journal page) need 3rd (3rd: colorful!) Beginnings of the concept map: History -> St. Lucia Pics Join -> Signup Etc. No flash, minimum of javascript (menus sometimes need this).
I have not actually visited the St. Lucia or any orchestra website yet, less they cloud my innate ideas and abilities.
I don't work visually, I work by seeing a creation in outline format, I know what I want to see, and I design it. Here, you see just that, the entire planning of three St. Lucia Orchestra designs.
research concept mapping Info model content for Orchestra site develop theme and a range of collages Consider balance of layout; alignment, size and colour of text. navigation a title descriptive of content Translate collage ideas to screen to make front door interface. Place the content - front doors have summary of content and multiple entry plus a nav bar. Begin a design rationale to accompany the project Design rationale looks at design decisions and development of ideas from info modeling through collage and translation to screen to final outcomes. Consider what made the original collage lively - is it still lively on the screen? what new ideas emerged with the translation How descriptive is the title chosen Is the user informed and in control? how successful is the layout of text
pre-design (coding) stage Determining a "theme": This is one of the hardest parts of website design, partially because "theme" is a strange word to apply to website. The dramatic black background is because the musicians wear black, white text for their white shirts, the gold (uh.. big instrument) because they are a musical group! Next step: Figuring out the name of that big instrument, because I have no idea about making music and zippo musical background. Ah hah, why not ask a friend! [17:33] Lukian: Info model content for Orchestra site - develop theme and a range of collages [17:33] Lukian: theme for an orchestra site? [17:33] Lukian: .. music? [17:35] Vireninfektion: theme, them, theme... how about light brownish in colour with musical score sheet music as bg [17:38] Lukian: i was thinking a dramatic black background with a big uh.. instrument and the music sheet line starting thing as a seperator :) [17:39] Vireninfektion: it's called a stave (i'm not sure how it's spelt but that's how it's pronounced) [17:39] Lukian: thanks [17:39] Lukian: what's one of those big brass instruments (wind) called? [17:39] Vireninfektion: np :p [17:41] Lukian: http://www4.tpgi.com.au/ajbevan/index.html [17:41] Lukian: here's the current site :) [17:41] Vireninfektion: what kind of wind instrument? saxophone tuba trombone? [17:41] Lukian: tuba i think [17:42] Vireninfektion: trombone's the one that matt pittman plays [17:42] Lukian: too small :) [17:42] Lukian: i want something huge ;) [17:43] Vireninfektion: yeah, tuba is a HUGE mutha trucka [17:43] Lukian: that's what we want! [17:48] Lukian: Rules: (Always negotiable if you can provide a coherent rationale!) No splash pages [17:48] Lukian: splash page = essential, well it's actually a "front door" [17:48] Lukian: there's only 2 pages of content.. [17:49] Lukian: actually [17:49] Lukian: CONCERT DATES [17:49] Vireninfektion: i gotta go in 10 [17:49] Lukian: Conductor [17:49] Lukian: Pricing [17:49] Vireninfektion: dale's expecting a call [17:49] Lukian: Join [17:49] Lukian: History [17:49] Lukian: 5 pages :D [17:50] Vireninfektion: well.. [17:50] Vireninfektion: good luck :) a tuba! That's it :D Next step: Finalising the "concept map" and the actual content the website will have. The criteria states 1 final front door, 3 secondary levels and 3 tertiary levels: Dates - Prices Front Door - Join - Signup History - Conductor? Links Further 2nd & 3rd Level possibilites: Sign up form Glossary Music samples? Image gallery? So much possible content, but such a restricted project, pity I can't actually go and complete the entire 2nd and 3rd levels.
This is my first impression of the St. Lucia website.
It's almoSt. as bad as using Red as a background color (BTB) arg!!!
I go to the subpages to see if they are any better, and of all things, I'm greeted with the in your face this is a dodgy logo, and PINK! Text (well maybe purple)
Not only that, but the alignment is all whacked!
I have now actually looked at the St. Lucia Website.
What I expected to see when I was greeted by it, is my firSt. design.
I have now successfully translated the firSt. design to screen,
and the final product is below.
The 2nd Design aimed to keep the highly formal black style, but keep more content and allow navigation via it, however I later realised that a "front door" is simply to new style of a "splash page" except it's a "front door" and holds together the whole site, while allowing entry methods to at leaSt. the second level pages.
This was the 3rd Design I created to see what it looked like on a white background. Intriguingly, although I didn't particularly like it at the time, now that I think of it I was sick of copying / pasting and adapting code to create this design, my tutor pointed out that the site worked a lot more vibrantly without the black background though he didn't expand on exactly why it worked, which left me wondering...
I really wasn't sure at all which design I wanted to continue with, so I made this sub page of the formal style site, but something was lacking, it was very formal and suiting to a professional orchestra... but truthfully is this a professional orchestra? I'm not doubting their conductors or musicians talents, but they are a simple, personal, volunteer, lively bunch of people, not a senile formal orchestra!
This is the other sub page I created, note that on the previous page The Tuba was originally on the left, which was apparently the wrong direction for text flow, but having the wand on the right of this page works quite fine, some interesting elements which I'll have to play with here in the final design.
And the most shocking thing, I viewed the site at uni, and thought, huh? What? Have they actually updated it, then I'm like looking at the site, and the content is identical, but the background has changed, and I'm like, oh, I have backgrounds off at home... It just goes to show that the user has the ultimate control over your website and you need to make it as foolproof, as hard to crack and as consistent as possible over everything the user could throw at it.
So, while looking at this site I actually liked some elements about it's shittyness :) So what if it's badly aligned? and the colors are a bit gaudy, The colorfulness makes this website unique, active and engaging to the user! So now, My challenge is to continue the simplicity of my current designs and make personal rather than formal, as I could have quite easily made a formal site!
So I made it colorful, lively, engaging, all of the above!
Bright active colors, well separated, with descriptive content still, even more descriptive than the formal style had! The blur effect on the title was the laSt. thing added, I was going to make it a strength of 4, but it wasn't "noticeable" on my CRT, the 17" LCD did a fantastic job at "4". The font has been chosen to suit the image, which was initially found in google, and according to my tutor was made in Illustrator. The layout reflects the formality from the firSt. design, but does it in a much much more fun way! The colors are from the image itself, blue, orange and pink. The gold of the instrument has been used as a link hover background color along with the pinky/red for the actual link colors. The white background is symbolic of the white shirts they were, and the black text was inverted from the links of the 1St. draft because the performers wear black suits over white, so it's black ON white.
The title color can also be seen in the instrument, and has been used as a unique defining background color for the front door of the site! Thus, this is the complete final revision front door.
(note!!! this image is too new)
This is an original Level 2 page of the 1St. Draft of the "White" (aka. Colourful) design. Sadly, the continuity was broken, the only elements remaining is the universal navigation bar, oops, so as you will see, the tuba guy was continued from the front door, the extra image implemented on the right - two images designating a 2nd level page, and one image (a smaller tuba guy) designates a 3rd level. The background was too strong, so I knocked it back by 50% thanks to photoshop.
The continuity still needed work, so I designated "section" colors, where by, depending on what path you are travelling down, the pages of that level system are all strung together by a color from the tuba guy, this color is present on the page title and the background, the user barely notices it :) meaning it's been done right :)
The Tuba Guy is also a possible St. Lucia orchestra logo if they want one.
One of the rules I live by atm is "If you have done something right, people will think you have done nothing at all. There are elements of this throughout the site, which the user will only subconsciously notice. Aside from the blur effect on the front door, there is also a very faint drop shadow on the page titles, as you can see in the pre-final pages below. This also demonstrates the linking of a level 2 page to a level 3 page, I have added this more clearly to the powerpoint rationale.
Review of Site and commentary on powerpoint design rationale: One thing I firSt. thought about was the amount of menus on the website, but one peer reviewed my website saying they liked the 3 different menus (nav, left and bread). This made me think more about my reasons for not liking it, the only reason I could really think of was Lynx text browser, then I thought, hey, people who sit in a basement staring and surfing on a terminal screen probably ;) aren't interested in orchestras :)
(insert link to powerpoint)
The rest of the powerpoint rationale has basically been explained and expanded upon in this journal, and the next step is for me to finalise (optimise) the site, write a critical review, get some beta testing done, comment on other students work, and say thanks for a great semester with ADN215.
The other students work I quite liked, it was very out there while still maintaining the conventions of a standard website. Some people exceeded the limits of 3 secondary doors and 3 tertiary doors though and I even saw implementations of tricksy technology (one guy has what looks to be 3x 1mb AVI buttons to access the second levels, ouch for bandwidth usage, hopefully it was juSt. a draft :). Overall there are some very good and challenging designs which will make St. Lucia Orchestra really think about what they want to do with their website.(Getting a domain would be a start, they can even use their current ajbevan tpg for hosting.)
Anyway, To the e-media team, Thanks for a great Semester in ADN215, I've really enjoyed it, And actually learnt quite a lot, When I thought I knew all I could about making websites when I started :) Seems I'm only juSt. beginning my great future! Thanks guys! (and gals ;)