John Ellison

Day 69: Working on Refugee Community

1 min read

On Day 69 (Sunday), I spent most of the day working on my Refugee.Community project. I launched the website and am looking forward to testing it with users and improving the experience. Hopefully we'll be able to build a nice community of people taking action to help refugees. I am super excited about this side project.

http://refugee.community/ is now live.

refugee community screenshot

Check out the website and let me know what you think!

---

Tagged:

John Ellison

Day 62: Working on The Refugee Community Landing Page

1 min read

I spent most of Day 62 (Sunday) working on the landing page for the Refugee.Community site. I'd gotten pretty far the week before, but still there was a lot of work to do so I headed to my favorite Brighton cafe (Redwood Coffee House on Trafalgar Street) and got to work.

Here are some screenshots of mobile and large screen. I need to fix some styling of course (especially on large screen), but the core wireframe of the site is layed out. All I need to do is get some imagery, typography and interaction design details in place and I'll push it live.

It's been a fun project but I'm aware of the urgency of this situation and want to get it out to the public as soon as possible. It doesn't need to be perfect, just good enough.

mobile-screenshot-welcome

mobile-screenshot-slack-welcome

mobile-screenshot-about

mobile-screenshot-situation

mobile-screenshot-footer

desktop-screenshot-welcome

desktop-screenshot-about

desktop-screenshot-situation

desktop-screenshot-help

desktop-screenshot-request-invite

Tagged:

John Ellison

Day 55: Working on Refugee.Community

1 min read

On Day 55 (Sunday), I spent almost a solid half-day working on the Refugee.Community website.

Here's what I accomplished:

Crafted a progressively-enhanced mobile navigation menu from scratch

(pure HTML/CSS/JS—no framework)

 

my first progressively-enhanced mobile navigation menu from scratch open

 

my first progressively-enhanced mobile navigation menu from scratch closed

 

my first progressively-enhanced mobile navigation menu from scratch non-mobile

Refactored content and styled basic layout for mobile

refugee-community-styled-mobile-content-layout.jpg

 

Built accessible web form from scratch and styled for mobile

 

refugee-community-testing-mobile-content-aloud.jpg

 

Tested reading the content aloud with a few users

 

refugee-community-testing-mobile-content-aloud.jpg

 


Another few half-days of work and I should have this site live and ready for the public. I'm really looking forward to launching this and building a community around people who want to help refugees.

Let me know if you want to get involved!

Tagged:

John Ellison

Day 48: Working on Building a Refugee Community on Slack

2 min read

I spent Day 48 (Sunday) working on Building a Refugee Community on Slack. The idea came from the Day 43 workshop.

I decided to build a landing page that would integrate with a small web app. The role of the landing page was to answer the following questions:

  • What is this 'Refugee Community on Slack'?
  • Who is it for?
  • How did it start?
  • How can I help?

The role of the small web app was to allow users to request an invite and submit the invite directly to the Slack API. The slack API, upon receiving an invite from a user, would send me an  email and ask me to confirm whether or not the user could join the community.

I would then be able to do some research about the user based upon the information provided and ensure that they are who they say they are and that they would be a good fit for the community.

Vanilla HTML & CSS

For the first time, I decided to build the landing page 100% from scratch using no template or framework. I'd always used Zurb Foundation in the past, but in seeing developers work at Clearleft I decided to do it all from scratch. It was a bit slower but I definitely had a lot lighter and faster web page in my hands. I was also learning a lot about mobile first design and how to code interaction patterns.

Here is the landing page as I had it after the end of a few hours:

refugee community landing page work in progress

Scalable Responsive Typography

After some research, I stumbled upon a great article that inspired the way I approached the typography for the landing page. Here's the typographic scale I started with:

refugee community on slack typographic scale

I didn't end up having as much time to work on the Refugee Community project, but I'm hopeful that I can sneak in a few hours outside of work to get the landing page launched and start building this community for people who want to help refugees.

I Need Your Help!

I've got a public Trello board for this project: http://trello.com/b/E3v2VsRh/refuge-community-on-slack so if there is anything you see on this board that you'd like to pitch in on, contact me and we'll get you on board!

Tagged: