Design the Campus Campaign Website about opendesign HOT 35 CLOSED

Recently i visited " https://takebacktheweb.mozilla.community/ " website and found some typography problem which is really bad for user experience. On that design some sections are strated with left align and some sections are started with centre align which is looks bad for user experience. Blog sections doesn't match the theme of the site. Overall the website doesn't looks better i think, Is it possible to redesign it ?

from opendesign.

Related to this issue #1

from opendesign.

I would love to help on the layout part, but i believe we need professional illustrator to support here...

from opendesign.

@yofiesetiawan if you can make the layout that would be awesome!! We can always add the illustrations later. Do you think it would be possible to get them by Friday? I know that's a crazy-short time line but though I would ask. ;)

from opendesign.

Let's start discussion with this?
Characters still just dummy...

from opendesign.

Hey @yofiesetiawan,
This is great!! Thanks so much! A few initial thoughts.

• I don't think "choose yours" needs to be a button. Just a big call to action for people to choose from the ones below.
• Can we change the top banner color to something more inviting maybe another colour or even a graphic?
• Can we stack "become a campus team" above "become a local coach". We want to highlight the campus team one slightly more.

Overall I think this is heading in the right direction! Thanks again!

from opendesign.

@seeam I saw your awesome illustration work on issue #20 and was wondering if you could help out with creating illustrations for the design above.

We're envisioning three characters:

1. Representing the Education & Awareness track - (maybe holding chalk and wearing glasses or something?)
2. Representing Policy and Advocacy (maybe carrying a megaphone?)
3. Representing Technology & Innovation (maybe wearing a hoodie and carrying a linux laptop ;P)

Let me know if you're interested/available to help with this!!

from opendesign.

@Lucyeoh firstly that was not my illustration, I used them under CC license (and it was mentioned there). I'm not that much good with illustration but hopefully I can produce some flat illustration. I will try to create some but it will take one or two day.

from opendesign.

@seeam ah gotcha! I'll see if @elioqoshi or @flukeout have any ideas either!

from opendesign.

@Lucyeoh revised..

from opendesign.

hi all, I'm paarttipaabhalaji

I'm very interesting to join with us. please guide me.

On Fri, Feb 26, 2016 at 3:12 AM, LucyeoH [email protected] wrote:

Hey @yofiesetiawan https://github.com/yofiesetiawan,
This is great!! Thanks so much! A few initial thoughts.

I don't think "choose yours" needs to be a button. Just a big call to
action for people to choose from the ones below.

Can we change the top banner color to something more inviting maybe
another colour or even a graphic?

Can we stack "become a campus team" above "become a local coach". We
want to highlight the campus team one slightly more.

Overall I think this is heading in the right direction! Thanks again!

—
Reply to this email directly or view it on GitHub
#35 (comment)
.

from opendesign.

hi @paarttipaabhalaji what are your background?

from opendesign.

Web designing using html 5,css 3 and js

On 2/27/16, yofiesetiawan [email protected] wrote:

hi @paarttipaabhalaji what are your background?

---

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

from opendesign.

What do you think about this @Lucyeoh ? Changed the layout's idea of yofiesetiawan for better placing of the icons and increasing readability of header.
This characters are ripped-off form https://goggles.mozilla.org/, I'm not sure is it OK to use! But I think these characters serves the purpose quite well.

from opendesign.

@yofiesetiawan @seeam thank you both for these wonderful designs.

@yofiesetiawan I shared the one you made around a bit and everyone loved it! Would you mind sharing the source files for it so we can share with our developers?

@seeam thanks so much for putting this together! We were a little worried about using assets from other campaigns but loved the layout and colours!

from opendesign.

@Lucyeoh actually i like @seeam approach on footer or bottom area, so i try to apply to mine.. i hope that's okay.. but here i attached 2 versions i made...

Not sure why i can't attached zip files here..
https://dl.dropboxusercontent.com/u/4450713/mozilla/GitHub/campus-campaign/02-home.psd.zip
https://dl.dropboxusercontent.com/u/4450713/mozilla/GitHub/campus-campaign/03-home.psd.zip

from opendesign.

Hi i am Adi,
Interesting 😄 , i join #UX on irc and just pointed here.

from opendesign.

hi @brutalcrozt welcome! are you a coder?

from opendesign.

Hey, guys, I can help with the front end, I am a coder.

from opendesign.

@yofiesetiawan yeah, web stuff. But i like more code than design

from opendesign.

@brutalcrozt @anistuhin I'm going to be able to start the development of this tomorrow, if you want to collaborate that would be great. Nice design @yofiesetiawan I like it with @seeam 's bottom.

from opendesign.

@phinity great, maybe i can help. vanilla html5, css3 and js?

from opendesign.

@brutalcrozt I'm going to go a bit more complex and use Wordpress with some tools like Grunt and Bower. Css will be Less.

from opendesign.

@phinity I am not yet familiar with Wordpress but i use codeigniter, it should not create trouble.
i use grunt a bit, and angularjs lately. Maybe it's good to move the discussion and creating some to-do?

from opendesign.

@brutalcrozt I'll ping you at the email on your Github account to discuss. FYI the project will live at: https://github.com/mozilla/takebacktheweb.mozilla.org

from opendesign.

Hi guys, can i help with characters? : ))))

from opendesign.

@Raphseck Yes! Here :)
#36

from opendesign.

@Raphseck can't wait! :D

from opendesign.

Thanks so much for everyone who helped on this! Very excited to see this website going live this week!!

from opendesign.

@Junaed33 Thanks for the good input here and concern about UX.

I mentioned the alignment to the content admin and she made updates so the centered text is shorter; and I mentioned that if the text is long in the future it should be left aligned for readability. Does this address your concern?

Regarding the blog I hope to make updates to the listing page so that categories are listed in a right column but with only two blog posts right now it is not a problem to see what is there. If you or anyone has any moderate suggestions for updates to the blog design I am open to it should be improvements and not a completely new design. I basically implemented the blog section based on the content design on #56

from opendesign.

@phinity wrote:

I mentioned the alignment to the content admin and she made updates so the centered text is shorter; and I mentioned that if the text is long in the future it should be left aligned for readability.

Aligning text smartly may come in handy then. Found on CSS-Tricks.

from opendesign.

@phinity Actually on the design there is focus everywhere, like how a heading opacity is 100%, again paragraph opacity is 100%, if we use 80% to 60% opacity on paragraph,the headings will be more visible. Again on header section there is One heading and another subheading is centre align with 'follow the campaign' button but paragraph is left align, i think it's not a good practice. This button is doesn't get focus here as well.
All the section heading is center align but Blog is come from left align, if we use this as center align, it will be consistent with other sections and if we use two background for these two blogs and put them besides each other it will looks better than now, i think. See my work.

from opendesign.

Hi, who help to works on front end? If possible, i would love to explore for better design... Since we don't get clear content when first starting the design, it's kinda wondering at first. But now we already clear with the content, i think we can create better design... Thanks @Junaed33 for inputs..

from opendesign.

@yofiesetiawan
which one is the final decision? about your PSD, can it be exported to svg?
i don't have legal Photoshop app

from opendesign.

@Lucyeoh what are the next steps on this?

from opendesign.