Website Design Templates

[colegleason]

We need to come up with a good frontend that emphasizes current web design trends while also being very usable. Usability is always more important, and remember that form follows function. I've looked through a lot of professional themes on themeforest, but I wanted to see what we could come up with in house first. So, here is a sketch I did for the homepage. Tell me what you think.

Homepage sketch:
http://dl.dropbox.com/u/21151868/liquid-home.jpg

[dylnuge]

Not bad. Maybe it's just me, but I've never been a fan of the giant slanted picture thing at the top. Also navigation should be more prominent, middle of the page seems awkward.

[bnookala]

I've always preferred a navigation bar that scrolls with the page - that way you wouldn't have to scroll to the top to get to the navigation.

[dylnuge]

I agree with bnookala that scrolling nav is nice, though we probably shouldn't be cramming too much on a page anyways. The front page should have pretty much what you showed in your design (brief info paragraph, summary of upcoming events, and maybe some social widgets like github and twitter); that probably can be fit in without any need to make the page that long.

[colegleason]

Scrolling nav bar is noted. Dylan, would any picture slider be bad or just
the one I drew. I like having one on the home page, but it could be
slimmer and sexier if you want.
On Dec 19, 2011 1:29 AM, "Dylan Nugent" <
reply@reply.github.com>
wrote:

I agree with bnookala--scrolling nav is nice, though we probably shouldn't
be cramming too much on a page anyways. The front page should have pretty
much what you showed in your design (brief info paragraph, summary of
upcoming events, and maybe some social widgets like github and twitter);
that probably can be fit in without any need to make the page that long.

---

Reply to this email directly or view it on GitHub:
#1 (comment)

[dylnuge]

I more meant the slant between picture and text design that seems common on websites. I'd like having pictures in their own slider (i.e. full rectangle or a box next to some text), perhaps with a text overlay like "Association for Computing Machinery"

But keep in mind that's my personal opinion on the design, and it is quite likely other people disagree.

[colegleason]

Yeah okay. How about a slider like in this template?

http://themeforest.net/item/etherna-powerful-and-flexible-htmlcss-template-/full_screen_preview/237525

[dylnuge]

It looks pretty. I guess my concern would be that it also looks like a company website--like we are trying to sell something.

We want our ACM site to be for members (and prospective members). If were trying to sell anything, it should be how much cool stuff we do--that's why I loved the idea of the github widget. Some photos of the office might be cool, but I feel like they shouldn't take up that much of the screen.

We should consider what we want the website to do, first and foremost, before we design it. If we're trying to sell ACM (as in the website is mostly for prospective members), this may not be a bad starting block. I was envisioning it more for ACM information, as a hub for members and prospectives alike.

[colegleason]

Yeah, I just meant the slider on that theme. We want to sell ACM on the
homepage via activity widgets and events, and then the ACM members can
always get more involved by digging deeper. This isn't a great website
design, but MIT's SWE chapter is kind of doing what we want.

http://swe.mit.edu/

On Mon, Dec 19, 2011 at 4:25 PM, Dylan Nugent <
reply@reply.github.com

wrote:

It looks pretty. I guess my concern would be that it also looks like a
company website--like we are trying to sell something.

We want our ACM site to be for members (and prospective members). If were
trying to sell anything, it should be how much cool stuff we do--that's why
I loved the idea of the github widget. Some photos of the office might be
cool, but I feel like they shouldn't take up that much of the screen.

We should consider what we want the website to do, first and foremost,
before we design it. If we're trying to sell ACM (as in the website is
mostly for prospective members), this may not be a bad starting block. I
was envisioning it more for ACM information, as a hub for members and
prospectives alike.

---

Reply to this email directly or view it on GitHub:
#1 (comment)

Cole Gleason

Student, University of Illinois at Urbana-Champaign
Student Consultant at Engineering IT
Email: cg@colegleason.com
Website: colegleason.com

[bnookala]

I really like how straightforward stanford's acm site is: http://stanfordacm.com/

[bnookala]

I suppose one thing to note there is that they're using a static site blog for the majority of it though.

[dylnuge]

I do like their layout though. It's pretty centric on speeches, which is probably because that's how their ACM is organized (most chapters organize around meetings/speeches).

As to the static blog layout, I'm still uncertain what we're gaining from writing a dynamic site from scratch.

[colegleason]

I mean, Jekyll and other static site generators are not bad. I guess I just got caught up in writing a webapp. Thoughts?

[dylnuge]

ACM Website Goals:

• Communicate current events and activities
• Show off projects and work
• Give general information (about, contact, joining, etc)
• Provide a space for ACM SIGs to do the same
• Help organize documentation and projects

Pick the best tool for that job. IMHO we want to be able to quickly update the website, and possibly (ideally) have single point for making changes (e.g. making a new event does not require editing the website, the Facebook group, and the membership mailing by three different people)

[colegleason]

• Current events and activities: some sort of calendar/event thing. So
  either custom or embedded GCal.
• Projects and Work: Can be static unless you want users and SIGs to be
  able to own/edit their projects
• General info: static
• SIG info: static with permissions
• Documentation: Confluence

So what does that leave us with? I could do all of this in Django if you
like since users and such are easy (although I dunno how hard integrating
with Kerberos is). Or Bhargav suggested backbone.js, which I don't know
much about.

On Fri, Dec 23, 2011 at 2:58 AM, Dylan Nugent <
reply@reply.github.com

wrote:

ACM Website Goals:

• Communicate current events and activities
• Show off projects and work
• Give general information (about, contact, joining, etc)
• Provide a space for ACM SIGs to do the same
• Help organize documentation and projects

Pick the best tool for that job. IMHO we want to be able to quickly update
the website, and possibly (ideally) have single point for making changes
(e.g. making a new event does not require editing the website, the Facebook
group, and the membership mailing by three different people)

---

Reply to this email directly or view it on GitHub:
#1 (comment)

Cole Gleason

Student, University of Illinois at Urbana-Champaign
Student Consultant at Engineering IT
Email: cg@colegleason.com
Website: colegleason.com

[bnookala]

Backbone is only a tool for the interface part of this :P. You'd still have to build a backend system, to some extent.

[dylnuge]

Cole said he wanted to work on the backend first anyways, which I fully support.

(although I dunno how hard integrating with Kerberos is)

Don't do it with Django, do it with Apache. I'm going to work on getting acm-uiuc/ideamine set up on our servers over break; I'll try a kerberos integration and report back how it goes.