Website and GUI.
 

If you haven't yet seen the site flowchart in our Yahoo! Group, please look at that. That's serving as the basic piece of architecture for our efforts and everything being done concurrently deals with what we've outlined there.

What we need to examine now is a convenient way of packaging and presenting the back-end content generation stuff to the viewing public.

We need a website.

Several people have expressed that they're skilled in graphic and webpage design. If it's possible, I'd like for people to present their ideas for how we can package this thing and get it out there for people to use and recognize.

In reality, this project is a bit larger than simply creating a website. It involves creating a corporate identity for freelanceFIRST, including an official color scheme, logo, page format, typeface, etc. This means creating an entire suite of graphics, buttons and other errata that represent our product to the public.

I expect it to be of a high, professional level of quality.

I have my own ideas of what to expect and what I'd like to see, but I don't want to inhibit the creativity of others by talking about that just yet.

There are a few requirements, though.

• It has to maintain a small palette of colors that are friendly to printers.
• It needs to be scalable. The logo or other graphics need to be in a format that allows them to be scaled up and printed in large format without any degradation of quality.
• It needs to be recognizable and easy to navigate.

Beyond that, run free and show us what you've got. Remember, we're looking for anything here. Your idea for a logo may inspire someone else to create an entire GUI or website. Share everything.

I know there's probably a ton of people that would like to design the website, but I would be more than happy to write some content for it.

I agree with M here. If we can get these graphics in .png form that would be great. Even better would be in .psd form if you can.

Photoshop format isn't scalable.

I'd prefer than any graphics be done with a vector artwork program such as Macromedia's Fireworks or Freehand, or Adobe Illustrator. When we create a website, we can export the graphics into the needed formats, but having them on hand as pieces of vector artwork from the beginning makes life easier for everyone.

Amanda: I'd like to talk with you about writing content for the site. I'm not sure how much writing there will be, really, but it's probably going to end up being more than I expect.

English majors rock. Have you looked at the mission statement?

Consider the website made!
 

I talked to Sunny Thaper, and he said he would be happy to design the website for FreelanceFIRST. (man, that's way too long to type - we need to figure out a nickname for that! ;)) Anyway, Sunny will start designing in about a week. Oh, like Amanda said, if you need anything written for the website, I'd be happy to help out where I can! :)

- Katie

Indeed I have.

Whenever you'd like to get the new website up, I would be more than happy to help.

I'd also be willing to throw my hat in for helping to write content...

I can do some graphics work or other web type work if needed but i dont really use fireworks, freehand, or illustrator. Though i have them all on my computer at work and could use them.

If you start out with a photoshop document that is big then usualy you dont have much problem scaling down, atleast thats what i have found.

PNG = good.

But this everybody helping with everything isn't really needed for graphic design. At least not for a website. Especially not for this website. All that this website needs as far as design goes is a template for the layout, and a logo/a few other themed images. The rest is backend. Something.

Also, what the crap do you mean by a GUI? Websites are a GUI... but that's called the layout. Something.

Yes. I don't expect that a dozen people will have a hand in the final implementation of the site, as that'd probably just too difficult where keeping everything consistant is concerned.

But, for now, I'd like to see that everyone's who's interested propose their ideas publicly so that we all may get an idea of what we can do with the site. We can all learn from one another if we all share our ideas about what colors and typeface we use, or what logo we might need.

Any ideas about things like that are really appreciated. They don't need to be the finished product, either. Sketches done with anything will work, as well.

Well, I suppose you're right. I guess I just meant that, since there's a lot more to this project than a pretty looking splash page, I'm really intent on seeing that its navigation is easy to use and consistent. I'd also like to be sure that all of the information that could become available is easy to access by our users.

I agree, you need a vector program. Illustrator is wonderful for scaling, and it looks better as you make it larger. I have lots of skills in it, so if you want help there, I'm in. I also can do the coding for the PHP/Perl scripts if you'd like, I've done that for years too.

As one who's already starting a bit of work on the site backend(project request/accept/decline is completely done!...which, of course, for this project is about 2% of the whole thing), I'll be keeping a very close eye on this thread...I'm working on rolling together a couple of ideas I have already seen(don't worry, the colors will be better than they were when a select few of you saw the layout last week)...if any of you are interested in seeing what i've got thus far, IM me at NateT66(AIM). I'm not online that much lately(too busy with other things), but keep your eyes open...

Well, this sure died a quiet death.

Anyway, I spent some fiddling around back at the start of this thread, and I noted that I wouldn't share my results until sometime later.

Well, since nobody else is playing along at home, I've decided to post one of my ideas.

freelanceFIRST layout.

That's my rough concept for a common header for the fF pages. I'm also working on developing an identifiable logo that will be integrated into the page layout, somewhere.

I really like that layout.

- Katie

I do like the way it is laid out, but the colors and graphics will need a little work. I think the idea is pretty good, it will be a great addition to FIRST... I often visit programming sites like this looking for work, and I know.. they do work.

Well, what, specifically "needs work?" A little more detail might help me to change things around a bit and fix it up some.

You'll find me floating face down in a river before I change the color scheme to black and red, black and white, red, white and blue, or any other typical "technology" scheme.

Computers are tool, not a revolution. My design philosophy revolves around using them as such. It means maintaining classical roots. That's why the entire design is reminscent of a frieze.

Quote:

I often visit programming sites like this looking for work, and I know.. they do work.

Could you share some links, please? I'd love to see how other people have made inroads into implementing similar ideas.

Thanks.

i really like your layout/idea...

however (you knew there was going to be an however/but ;))

i just don't like how the triangle, circle, & square look at the top in the darker blue. I'm not sure if its their location, or that i think they should stand-out more than they should :).. not really sure, but i just sort-of don't like it ;)

btw: whoever goes and makes some of the web stuff... i sure hope that you use CSS Positioning, because i'd hate to lay some of that stuff out using just tables...

great job tho..

jack

It was probably one of the last additions. I'm still trying to work on idea for implementing, subtley, that this is freelanceFIRST; without messing around with the legality of using FIRST or its logo.

I, uh, suck at making websites, so. :) I've always used Fireworks own features to slice up the images, make rollovers, and image maps, and export the HTML. I hope someone more experienced that I am helps out when it comes down to that. :)

The shapes should go.. but the main thing I don't like.. is the continuation of the blue. Change that to white, and it would be much better.

Here is a site that does similar things:

http://www.scriptlance.com/
http://www.1lance.com/
http://www.elance.com/
http://www.scriptlounge.com/
http://www.projectspring.com/

Hello,

I ran into a web site where the background is a photo. As far as I can tell, they use Javascript to accomplish that, with no slicing or dicing, etc.

I am not suggesting that we use the same picture or even a similar picture. I am merely putting this out for people to look at to see if they like the basic concept of using a picture for a background. (It could be a picture of the Nationals that is somewhat faded or transparent.)

Here is the web page:

http://www.udoerasmus.com/firstscreen.htm

Here is the javascript which as far as I can tell, puts the picture in the background:
(I am not responsible for the messages hidden in the above code, or for anything else on that web site. I just liked the idea they had for the background.)

What do you think of it?

The javascript was just coincidental.
You can do that without using JS.

I've done it with CSS: http://www.pubarso.com/

Here's a second concept.

I played with the colors suggested by the link Brandon provided in another thread, but ended up tweaking them a bit. The colors suggested often ended up being very dreary.

The circular logo may be replaced with another design. The colors may change. The formatting of the menu on the right isn't finalized. The menu on the left is finished.

I'm trying to keep the design as geometric and simple as possible to cut down on load times. I expect that we'll be transferring a lot of files, and there's no use wasting bandwidth on fancy pictures.

I REALLY like that desing Maddie. I'm not a big fan of the colors (may need more neutrals like white and grey) but its a cool layout.

Like the design. The only thing thats hard on the eyes is the text on the right. I find it hard to read, being those two colors. Maybe white text, or something a bit more contrasting than the blue-on-blue.

I was planning on making that a fancy-schmancy rollover, so it'd turn yellow when you moved the mouse over each button. :)

Or, I could just make it yellow to begin with. I have a thing for rollovers because my first website had them way back in, like, 1995, and everyone was all "oooooh."

That's a good point.

And here's what it looks like with the iB forums/iBForge system dropped into it...

http://freelancefirst.pitnews.org/forums/

*cough* phpBB *cough*

I'll actually have some time to work on some web stuff when school gets out in two weeks.. wheee.. no school :cool: :D :p

I like iB more ;)

fine :p..

shhhh.. we better stop this here before we get yelled at. The battle of the boards can continue here :)

btw: I like the second design much better. I might try acutally putting it into some type of useable html this weekend if i have time. One suggestion on the logo.. Drop the outer blue circle. then change the outside yellow on the right side to blue. (if you get that ;)) What i mean is:

the outest circle should be 1/2 blue and 1/2 yellow. :)

btw: I like the maze & blue (go U of M)

I'm going back now, while looking through the features of iB, and knowing the other parts of the interface that are necessary, and adding that to the my latest concept.

This'll give a visual representation of the user interface as I'd imagine it to be. Then, it's a matter of seeing if the iB structure can be adapted to the design. Or, maybe the other way around.

Back with more.
 

I spent some today looking over the features present with the bulletin board Nate's been using, as well as trying to understand the workflow in a project and the many different functions of the site.

It's practically overwhelming, so I started by trying to achieve a simple pattern of text, colors, and formatting that could be shifted around and applied as necessary to new functions, parts of the site, and whatever else manages to pop up.

I've used Fireworks to develop a concept of what the functioning site may look like. Of course, where graphics can be replaced with tables and things, that'll be the route to take.




The main page, after logging in. This is actually a weird hybrid, showing part of what the main page will look like, as well as the Project Management screen.

Clicking on 'view' would open a project box that acts as the interface between all users assigned to a project. There are still many elements missing from that design.

The user management box would be accessible to certain members of a project. It would allow users to be added or removed, as well as promoted or demoted in the project hierarchy.

There's still lots more to do, but I wanted to share what I've done so far and ask for suggestions about what more information to include, what may be unnecessary, and what could be moved around to make navigation and use easier.

Thanks.

I've updated the project box to show what the file exchange screen may look like. I've been trying to think of the best, most convenient, most efficient way of showing the myriad information about each file.

With that, I've also created an upload control window and a download control window. The latter is incomplete.

Getting this appearance, and more importantly, this functionality, is the next priority. I'm just trying to make sure that all possible uses, needs, and functions are accounted for before any time-consuming coding is done.

Or, any more, as the case may be.

Any comments at all?

/me can't wait to start putting all of this into flash and programming it with Nate, should be fun ;)

I'm going to have to agree with the earlier comments about more contrasting in colours being good. The black on dark blue is hard to read, too. Aside from the contrast problems, it looks good. One suggestion though, if you're going to use Flash for things like that, at least make sure the font sizes can be increased (it makes it harder to show things off to other people in the same room who aren't sitting directly in front of the computer, and I usually increase them using ctrl++, but with Flash designs this does not work).

eek! More Flash!
But Krass, your designs look pretty clean and usable though the color scheme needs some work. Maybe very color neutral- Shades of Grey and Black for the text.
Take some examples into your color scheme:
3dbuzz.com
Winbeta.org
deviantart.com
sharelive.com
They are good looking and can be used and can be READ.