Forum Graphics and Design

[admin]

I've put a little work into a potential logo, favicon (the small circular version of the logo for tabs, website header, and splash page. I'm not married to any of these ideas, colors, text, etc. but these can maybe serve as a placeholder for now or as a starting place.

Starting from Jack's homepage at https://www.votingtheory.org here's a mock-up idea for what it might look like, and the image files below could be uploaded as the header and buttons.

[admin]

Suggested splash page text:

Welcome to the Voting Theory Forum.
This forum was created as a space for those who are passionate about voting theory, electoral policy, and election reform to come together in the hopes that when we work together we are more than the sum of our parts.

The next generation in a series of forums which have come before, we strive to cultivate a conversation where ideas can cross-polinate and activists, experts, and everyday people can connect, share, and learn.

[admin]

Here's a link to the source graphics. https://docs.google.com/presentation/d/1SEG0eR4L9vp7tU_ZWqJrUwZNQHMNwPPORpIW_Ce5YRU/edit?usp=sharing

Anyone can create new slides, copy slides, change things, or play around with them there. I don't have adobe or anything but with huge image files you can get good results with google slides.

Here's a version with the background the blue from the forum theme we already have.

[admin]

This should be as high res as possible for this image.

[admin]

@admin

[Jack Waugh]

@admin, @SaraWolk, for the home page, I like the version you have here with the white background and the huge buttons.

The archive pages should have, in my opinion, in addition to obviously their respective main contents, the following elements:

• an extremely clear indication that the user is in archive-land.
• link to the forum.
• breadcrumbs for navigating upward.

Do you have any suggestion for style and layout for the archive pages to look consistent with the home and "about" pages?

[Jack Waugh]

I offer the opinion that refining the visual designs for the home, "about", and archival pages are not on the critical path to our welcoming the public to start using the forum.

[admin]

@Jack-Waugh- I do think that the homepage needs work visually to be ready to publish.

[Jack Waugh]

@admin @SaraWolk "sum of our parts" -- does that mean like arms and legs and such?

[SaraWolk]

@Jack-Waugh The idea is that we as voting theorists can collectively contribute something of value to the movement which is more than the sum of our individual contributions.

This sentence is intended to foster a sense of community, and also collective responsibility for how our actions online in this capacity influence those considering the adoption of various reforms, or the choice to stick with the status quo.

[SaraWolk]

@Jack-Waugh I suggest the same exact layout as the homepage for now. So the header and three buttons would remain the same across all pages. The content below (where the welcome message is) would change.

Not that the images are large because they are high res, but you would still size them as needed when you put them into the site. I suggest roughly the sizes we see in my image for the original post.

In order for the design to work for mobil users as well the key there is to have the content on the home and splash pages not take up the full width of the page, rather they would take up somewhere around 50% of the page width, with 25% margins on a computer screen.

I'm not clear on how to get to the back end page where you work on that, or what it looks like, but if I knew more I could likely give better advice.

[Jack Waugh]

@SaraWolk This is a reply, so you can test whether you receive a notification.

[SaraWolk]

@Jack-Waugh
Notifications do work! You just have to turn them on under your profile settings. In an email you mentioned a few points. I'll respond here.

I see that you have a "homepage" up here: http://votingtheory.org:3001/about

We're getting closer - This needs to have margins like you see here: https://www.starvoting.us/
and in the mock up I made. That is key for mobile users and different interfaces.

Regarding a rewrite of the description, how's this?:

Welcome. This forum was created as a space for those who are passionate about voting theory, electoral policy, and election reform to come together in the hopes that when we work together we can collectively contribute something of value to the movement.

The next generation in a series of election science forums, we strive to cultivate a space where ideas can cross-pollinate and activists, experts, and everyday people can connect, share, and learn.

Regarding the buttons and their position and sizing:
They should be side by side and roughly the size pictured in the mock up. Where you saw the giant buttons, that wasn't the mock up, rather those were the actual full size images for you to download and upload. I'd like to try and keep our design within the norm of what is current and in style for a professional looking website.

Here's a new mock up with the part you didn't like rewritten:

And here's a link to the source components: https://docs.google.com/presentation/d/1SEG0eR4L9vp7tU_ZWqJrUwZNQHMNwPPORpIW_Ce5YRU/edit?usp=sharing

[Jack Waugh]

@SaraWolk said in Forum Graphics and Design:

those were the actual full size images for you to download and upload.

I do not take images of buttons or text. I recreate them with HTML/CSS. The only images I have taken are the two variants of the logo. I do not need new mockups just for a text change; thanks anyway.

I propose the following edit of the blurb text. I use italics to call out edits; I do not propose to italicize in the publication.

Welcome. This discussion forum was created as a space for those who are passionate about voting theory, electoral policy, and election reform to come together in the hope that when we work together, we can collectively contribute something of value to the movement.

For this forum, the next in a series that have existed over time for the same topic area, we strive to cultivate a space where ideas can cross-pollinate, and where activists, experts, and everyday people can connect, share, and learn.

[SaraWolk]

@Jack-Waugh said in Forum Graphics and Design:

that have existed over time for the same topic area,

I like all those edits except the suggested change to "that have existed over time for the same topic area,"

I don't think it reads quite as well, and it doesn't reference that this is a continuation of the election science forum, which is a hat-tip to them for their contribution.

Re: the buttons. My point was to clear up the misunderstanding on the correct sizing. It's important that subtext like buttons not be larger than the actual heading. I think I sized it to be the same as the tagline.

[Jack Waugh]

@SaraWolk I think of the layout of the page as consisting of the header with the main body below the header. Our header will have the banner on top and the standard row of three buttons below the banner but still within the header. Some of these definitions are arbitrary, but you and I need a common idea of them so we can talk about the placement and size of the components and not misunderstand one another. Again, I am using the term "banner" for the dark ribbon above, which contains the logo and the cursive writing and the orange writing, and the term "header" to include the banner and the standard buttons.

I understand that you like to see the header a little bit wider than the main body. The above illustrates that relation and so does starvoting.us, which you cited as an example of a professional and trendy look. However, the picture above is not as wide as the max width in starvoting.us. Suppose a visitor makes her browser screen really wide. Then what should be the max width of the banner and the max width of the main-body text? Unless you say otherwise, I will treat the above example as the maximum. I think we should limit how far a reader has to scan back and forth while reading a paragraph. Otherwise, one gets lost. That is why newspapers are printed in columns. If the text were any wider than the above, I would want to go to two columns.

[Jack Waugh]

[SOLVED]

@Marylander, do you by any chance know CSS?

My media queries don't work when I tell Firefox to simulate a handheld Trojan horse.

I have:

@media not screen and (min-width: 561px) {
  .banner.of_darkness {font-size: 5.5vw}
  .wide-for-banner {display: none}
  .narrow-for-banner {display: inline}
}
@media only screen and (min-width: 561px) {
  .banner.of_darkness {font-size: 31px}
  .wide-for-banner {display: inline}
  .narrow-for-banner {display: none}
}

These work as I expect on my computer. When I narrow my browser screen past a certain width, the behavior switches as I commanded. But when I tell Firefox to simulate a handheld, the rendering makes a miniature copy of a very wide window. Any idea how to make the viewport-width detection work on handheld devices?

SOLUTION

@media (min-device-width: 561px) and (min-width: 561px) {...}

[SaraWolk]

@Jack-Waugh I don't know about fixing the code, but the widescreen margin spacing is looking better in your image.

I was picturing the buttons on the white background below the banner, partly because I made my mock up using the format you already have in the pink votingtheory.org page in the hopes that you could just plug in my images to the existing layout.

Creating the elements from scratch in the code is more professional, so whatever is easier for you and looks in proportion is fine with me. Whether the buttons are in the header or below it, I imagine it will look fine either way.

[Jack Waugh]

@SaraWolk Using the images would have saved me a great deal of time, and I know how to keep them in proportion. For almost every objection I can think of to doing that, I can also think of an answer to that objection. However, I still have a vague feeling that such a practice can come back and bite later. Also, building the looks with HTML helps me improve my skills.

"Whether the buttons are in the header or below it, I imagine it will look fine either way." Here, you have confused talk about definitions with talk about real things. But no problem; I have come to, I think, reasonable answers about the widths and margins.

[Jack Waugh]

@SaraWolk said in Forum Graphics and Design:

I like all those edits except the suggested change to "that have existed over time for the same topic area,"

Where's my text cursor? It disappeared.

Well, the main thing that bugs me about "The next generation in a series of election science forums, we . . ." is the "we". Who are we? Are we a group of people who are doing this? As a group of people, we're not a generation. Also, the plural of "forum" is "fora", and "election science forums" means election fora that are also science fora; we want "election-science fora" or "fora on election science" or "fora on the science of elections."

In building this, the next generation in a series of
election-science
fora, we strive to cultivate a space where ideas can
cross-pollinate and activists, experts, and everyday
people can connect, share, and learn.