Create mock-up for potential designs for new OBF homepage

[yochannah]

As part of the application process, we'd like to see ideas for implementing the site.

1. Read through the design brief for this project
2. Consider how to implement the task both
   • visually - how would your design look?
   • technically - if you're creating a CMS template, which CMS would you use (wordpress preferred but not mandatory) and how would you break down your tasks?
3. Questions? Looking for feedback on your ideas? Comment here on this issue, ping me at yochannah@gmail.com, or tweet yoyehudi.
4. When you think your design is ready, fork our repo, add your idea to the design-ideas application folder, and make a pull request.

Multiple Outreachy applicants can pick up this task if they wish.

[barretoana]

Hi! I'll be working on this :)

[yochannah]

@thepurpleana awesome!

[kushinauwu]

Hi! Quick(silly) question, is the current style of the website supposed to be maintained? As in the current wiki style?

[yochannah]

@kushinauwu not a silly question at all! But no, I think that's just the default style and nothing we're tied to at all. Feel free to use your creativity!

[barretoana]

Hey there :) before drafting, I started researching other open source initiatives to see their websites and what works and what doesn't - thinking more about organisation and architecture information than anything else.

• The homepage for https://www.canonical.com is straight to the point, but very well divided. I think this model works great with the content in OBF's homepage.

• One example that I think would work great with the BOSC page is the http://adaslist.co - just better divided and linked, but overall the content is very similar.

How do you feel about those pages?

I have some questions:

1. The content in the homepage has to stay exactly the same as it is now or can we tweak it?
2. Can we reorganise/rename the road map of the website? Respecting it - of course.
3. What is the 'calendar' page? Is it actually a calendar or can it be something like this: https://events.linuxfoundation.org ?
4. Does the content in https://obf.github.io/GSoC/ have to be in the new site or will it continue to be linked?
5. Should the 'join' form be integrated in the new site?

That's all for now! HAHA. Thank you :)

[simran-pandey]

Hey! I hope you guys are having a good day :D

I too had few questions to ask few of which @thepurpleana covered above. I started creating a mock-up keeping the contents of the current website in mind. (Please ignore the alignment & formatting)

You can find the high resolution version here-- OBF Website layout.pdf (It'll open like an actual webpage after downloading and opening in a browser!)

This is what I came up with ( It's an initial draft having placeholders mostly :P ) But I wanted to ask if the homepage layout and the road map given in the design brief is to be strictly followed or if we can experiment and rearrage a bit? The draft has a one to one mapping of the current site with few additional features which might be implemented using wordpress themes ( having very clean and streamlined placement of content) like

https://www.wpzoom.com/themes/presence/?ref=26770 https://demo.wpzoom.com/?theme=insight&ref=27950 ( )

P.S While researching about themes and how to add more functionality to the CMSs, I came across this article https://speckyboy.com/wordpress-theme-frameworks/ listing open source wordpress theme frameworks, I found it very informative so sharing the same here :)

[yochannah]

Hey @thepurpleana!

Your site examples from Canonical and Ada's list are really nice!

Re your questions:

1. Homepage content is open to tweaks, certainly! creativity is welcome, and if something is wrong or needs tweaks we will tell you ;)
2. Sure!
3. For the calendar we'll likely only have a few events, mostly BOSC (once yearly) plus perhaps the occasional cofest / hackathon, I think. The page you linked looks suitable, so long as it's easy to add events by an admin via the cms without having to do anything more than adding the time, date and event details (i.e. no manual layout required).
4. I'm not sure! @kblin and @mr-c manage GSoC for OBF. Having it integrated does sound nice... Kai, Michael, what are your thoughts?
5. That sounds nice!

[yochannah]

@simran-pandey this is a nice start! Some small notes:

• I like the news highlights! I imagine this content would come from our blog feed.
• Some bits that are nice ideas but we probably don't need:
  • linkedin, facebook
  • physical map
  • phone number
• the tweets feed also looks nice!

It should be fine to experiment a bit - we absolutely value creativity!

[CristianeNaves]

Hi! I'll be making a contribution too.

[kblin]

I'm pretty open as to how we handle the GSoC pages. The current design is a clear example of what the game industry would call "programmer art": I needed something, and didn't have time to futz with things, so the placeholder I added during creating the page was kept around.

The basic design criteria we need for the GSoC pages are pretty straightforward:

• The ideas page needs to be structured by sub-project
• Every idea entry should have
  • a title
  • a rationale
  • an approach
  • a languages & skills list
  • a list of links to existing code repositories
  • a difficulty setting
  • a list of mentors
• Adding ideas needs to be easy

I'm pretty sure whatever system we come up with that allows managing via git or is a CMS will allow this.

[imjmc]

Hello everyone,

I have tried to create a wireframe for OBF homepage. This is my first attempt in doing so and I would love to hear and work upon feedback.

PS: Sorry as the screenshot are in 2 parts (the application did not allow to take a full page screenshot).

Thank you, J'

[CristianeNaves]

Hello, That's the design I thought would be interesting. I was inspired by the design of the following site: https://www.foundationmedicine.com/

• Some of the sections will be guided to another page. Not all the information will be on the homepage.
• The homepage Blog contains only the link, description and image for the main articles. The complete blog and articles will be on a separate page.
• Sections that are not on the home page will be guided to a separate page.
• And regarding the technical part, I'm still studying what the best framework is and how to split the tasks. All feedback is very welcome. Thank You!

[yochannah]

@CristianeNaves I like your choice of inspiration! The mocks look pretty good too - I like the way the dropdown menu at the top works. I'm guessing the green bit is hand-drawn - how would you implement it if you were doing it in a webpage rather than a mockup?

[yochannah]

@j-pro the wireframe is a great start! How might it look if you added a colour theme?

[CristianeNaves]

@yochannah Thank You! I could implement it using one of the following ways:

• Using some free-use image that is related to bioinformatics.
• Or if it is not a very complex illustration I could create one.
• Or it could be a photo of contributors from OBF together, if there is any picture like that. I'll attach some templates to better represent the idea. The idea of the second model is to put a photo of contributors of the OBF.

[kushinauwu]

Hi, I made a base layout using some basic HTML + CSS. -- An idea is to keep the homepage as a long page wherein we can easily see an overview of what OBS is all about. I can make a quick links tab as well maybe at the top so that the members can get to the links they care about more, i.e, the projects list, membership details, events, volunteering for BOSC, etc, while still keeping the site friendly for people who aren't members yet. -- We could keep the BOSC and GSoC links as a scroll image right at the start, for easy access. I've only added a placeholder image for BOSC as of now. As in, the image switches between the BOSC link and GSoc link. Maybe we could add some other links for that as well, showcasing the main activities. For the events tab as well as the blog posts, there should be a next button to quickly move to the next latest event/post, just for easy access and to get a general idea without having to move further down, -- Most of the panels will have a link to another page which would have more details about it, like the travel fellowships panel would link to a more detailed version of it. -- We can try to make it more newcomer friendly by moving the chat + mailing list joining links further up the document. But I figured that since we're making it mostly for the members so it should be okay if we have this at the bottom. -- The orange color scheme is just a color I picked that seemed to look good, so it isn't a problem to mess around with the color schemes! Adding animations would be pretty cool too, but I haven't attempted it for the page yet. It would be great to have some! -- There's still a few things I have missed here, like adding a quick join/login button and all. It'll be easier once we try it in Wordpress. I posted my code on my profile as well, so it can be looked at as well :)

[anubhamane]

Hello Everyone! I know its already too late to start but as we say “better late than never”, I am presenting my proposal here after careful observation of existing website, recommended design plans and suggestions from my beautiful co-applicants. The implementation can be done in following two ways by using two different tech stacks-

1. HTML+CSS+Javascript+Jquery+WordPress (Using CMS)
2. Python+Django+Html+Css+Firebase (Non-CMS) I think both of them are good options and I can work on both of these.

Next, I want the following changes-

1. Menu is shown in side bar (as on existing website) but I want it to be on top.
2. I want more images to be added from different resources and one header image is a must.
3. The logo and the colors are need to be changed obviously and let’s adapt a unique color [Colour Code] for highlighting that will match somewhat to our upcoming logo too, so that it represents OBF in a unique way.
4. On home page, with about me, news updates are flashed in sidebar and donation button to be added on the main page itself.
5. Also, the board of directors should have their photograph and at least one link to their profiles if anyone needs to contact them individually.
6. The contact email and important information to be added in footer of every page and should be static.
7. Participation in GSSOC, Outreachy or any other relevant events should be pushed under ‘Events’ menu.
8. Previous experience, testimonial or any relevant feedback to be added in the website Rest, I will remember to add everything recommended in design brief like CoC and other things, but I want it to be structured in a proper manner.

I have started working on the code already using HTML, CSS and JS initially-

It will take couple of days to code and present the final outcome though! Please let me know what you think of my ideas. Thank you so much 😊

[yochannah]

@kushinauwu Wow, you've put a lot of effort into that mock! I like the layout, but I think it's probably a bit too brightly colourful. Maybe a bit more toned-down would be good?

It might also be nice to vertically center the content in the header bar.

[yochannah]

@anubhamane - your plans look good! A CMS is important as we don't want to require specific technical skills to update the site - I'd say Option 1 was the better of the two. Your code looks very neat, also.

[yochannah]

@CristianeNaves the updated pic is better! 👍

[kushinauwu]

@yochannah Oh yes the header bar. I'll fix it so it is better aligned too and try using a color that's a little more mild too, this one was just a temporary test. I'll fix that and try making another layout as well, so we have more options to choose. Thanks for the feedback! :D

[nufina]

Hi! I'll contribute in this project. I am sorry I am too late to join. Hopefully I can catch up. I have designed the homepage and some pages that still need some revisions. I'll post if I have finished it.

Btw, What color do you prefer?

[jamessandy]

Hey guys

[jamessandy]

@yochannah check out what I just did

[jamessandy]

I have made research on how to implement it and I think it should be pretty easy, although am adding up some cool features and making it more open sourceee 😂😂😂

[yochannah]

@jamessandy Nice draft - I like your colour scheme. I'd be interested in hearing more about your implementation plans, too!

[jamessandy]

So I made changes to design color will do well to send my implementation plan @yochannah

[kushinauwu]

Hey @yochannah :) I tried a newer layout. This one is a little more modern to fit the OBF theme more! -- this mock makes it so that every "learn more/read more" button opens up that section in a new tab. So for every section there's a separate page that can be accessed by the menu bar itself. -- For the sections that have multiple subsections, like the events and travel fellowships section, we could make it so whatever icon/question we click on links to the relevant parts. I think it is convenient to have a general overview of things on a single homepage page like this that links to the rest, rather than the mostly one page layout I had submitted earlier. -- Alternatively, we could have a drop down for some sections if that seems like a better option? -- The blue panels in the first three sections should actually have pictures of conferences and the like, but I didn't use any here to respect privacy as this is just a template. Same goes for the board of directors' details! :) -- I put the by laws and code of conduct sections at the bottom because it seemed to fit better that way. Is it alright to make the main menu longer by including that there? Or is it better to keep it smaller like this? -- I varied the fonts a little for the first three sections vs the next 3 and all while keeping the heading font the same, it looked more fun that way haha. -- Kept the colors blue green this time, it feels more aesthetic to look at. -- We can make the sections fade in as we scroll down and have the buttons magnify by a few pixels once we hover over them. Some animation will add a nice touch to it. We can do that with either JS or CSS whichever works? Let me know what you think! :D Edit: I forgot to add a submit button for the mailing list text field >_<

[jamessandy]

Hello @yochannah in regards to how I am going to implement my design. I'll code the front end with HTML, css and JavaScript and then convert it to a wordpress template or theme and then I'll install it on wordpress or otherwise I can use wordpress pagebuilder to implement it. Most open source orgs prefer using Django (Drupal CMS) to develop their site if that is alos considered I will can also do it, so any which is choosed I call comfortably make it work 😉😉😉

[nufina]

Hello @yochannah,

This is my homepage design. My design is clean and simple. In term of how to implement it is by using WordPress template and WordPress plugins. WordPress is easy to use so it will be easy to maintain. The WordPress plugins will help us to add some features such as event calendar, contact form, donation page, etc more easily. We can also get a dynamic website with responsive design by using WordPress. I'll provide details of implementation and visual design in my final presentation.

Note: The green color should be the same as OBF logo.

[yochannah]

@kushinauwu @nufina both doing great!

@nufina - nice choice of colours and I like the little explanations of the right

@kushinauwu the new design has much gentler colours, well done! The text comments you added when you posted the draft show that you've really thought this through.

[yochannah]

All: I've been periodically posting updates in the Gitter chat: https://gitter.im/OBF/homepage - it's probably a good idea to check in there occasionally.

Some notes:

1) don't forget to record your contributions on Outreachy!! 2) Final applications on Outreachy are due November 6th. Don't forget to apply, you've all been doing such great work it's going to be a really tough decision ❤️

[CristianeNaves]

@yochannah I still did not answer how I could implement the mock-up I put here a few days ago. For this I would use Wordpress for CMS and use CSS, HTML and JavaScript. And I could split tasks by functions, for example, task 1- About Us, task 2- GSoC, task 3 - Blog, each task would be a section of the site.

[kushinauwu]

Hi @yochannah ! I made a few elements of the homepage here with some free to use placeholder images. -- I used a little Bootstrap to style everything better and ended up deviating a little from the original mockup I posted. I'll just post the screenshots for now as my code isn't very polished yet and I have yet to add JS animations. -- The links that are differently colored in the news and fellowships sections are the ones that are being hovered on currently. --Is it a good idea to make the navbar sticky? Let me know if I should change any other things up and improve on them :)

[jyoti-u]

[jyoti-u]

mock-up.pdf

[jyoti-u]

mock-up .pdf

[kushinauwu]

Hey @yochannah ! Here's the code to whatever I have currently done : OBF Homepage I changed up some buttons and the navbar items order from my previous screenshots. Added some JS as well to make some things smoother. Let me know what you think! :D

[jamessandy]

Hello @yochannah I have finally finished my mock up design 😊😊 I'll be happy if you or any other person can review. Will start implementation right away. PS. I added no pics because I had access to none. File is too large but will create a PR

[jamessandy]

This is of low quality... So it may look bad

[kushinauwu]

Hi I added a Projects Section as well, here's the screenshot. The code is in the same repo as my previous comment which is https://github.com/kushinauwu/Theme-2. Please let me know how to improve further on this :)

[yochannah]

Okay, some more small bits of feedback:

@jamessandy - the mock is pretty, but it's a shame I can't see details very well! 🔍 @kushinauwu - your repo is good! If you have time, can you enable github pages? It'll make it easier for the OBF team to review it when we are reviewing final applications. 👍 @jyox007 thanks for sharing your mock on GitHub as well as via email! 😄

[yochannah]

Feedback for everyone: We have less than two days before final applications are due. If you haven't started yet, now's the time to focus on writing your application. I'll do my best to answer any questions but try not to leave things until the last minute. Also, try asking your questions on gitter - sometimes another Outreachy applicant might be able to answer you questions if I'm not about.

Remember that a complete minimal application + contribution is always going to be better than an overambitious and incomplete application, and good luck all! ✨

[kushinauwu]

@yochannah I'll get to putting it up on github pages! Working on the application too, I'll include links to the github page :)

[JSENL]

Hello I am interested, I updated the Home Page @yochannah I used Bootstrap as I like to see the javascript and css principles in work and then can upload/update it via WordPress. The application is in the process of being complete today.

[khailda]

Hi i design this home page in wordpress

[S-Garg338]

Hi, I'll be making a contribution too.

[yochannah]

Hey all - Looking over this issue there were so many amazing designs. Since we've selected an intern and are moving on to the implementation phase I'll be closing this issue, but please remember - you are all awesome and we were privileged to have you work on our issues, even temporarily <3 ✨ 💖 🦄