HospitalRun / design

All things design related or HospitalRun
http://hospitalrun.io/
32 stars 41 forks source link

[DESIGN] Marketing pages UI #10

Closed franciak closed 5 years ago

franciak commented 7 years ago

SUMMARY

There are three main components to this contribution:

A. Re-useable Sketch File for future design contributors

Right now, it takes a while as a designer to jumpstart a design contribution to the Hospital Run marketing UI because there are no available Sketch files / UI Kit to start with. This results to having to recreate everything manually from scratch.

This PR adds a Sketch file that future designer contributors to Hospital Run can use to take design components from, making the design process much faster and more efficient.

This is just a start to address issue: https://github.com/HospitalRun/hospitalrun.github.io/issues/48. We eventually, of course, aim to create a proper Branding Guideline and UI Kit.

B. Proposed Content Structure

The current content structure of the marketing website has way too many top-level sections. In the designs proposed in this PR, we wish to clean that up and narrow the structure down.

The rationale of the re-structure proposed here revolves around the idea that we are communicating with two different groups of people: Coders and Non-Coders (who wish to Donate or become Partners). At the moment, the pages are very much geared towards coders, while we bury information on other ways to contribute for non-coders. With this proposed change, we hope to be able to communicate to a wider audience whose ways of contributing is not limited to code, especially that one of the prioritized tasks in the pipeline is to create a page for Partnerships (https://github.com/HospitalRun/hospitalrun.github.io/issues/30, also https://github.com/HospitalRun/hospitalrun.github.io/issues/31), which I believe will not be limited to tech companies as Hospital Run scales (and perhaps moves to a non .io domain).

C. Why Hospital Run and Contribute Pages Designs

Another prioritized task in the pipeline is to design the Why Hospital Run page (https://github.com/HospitalRun/hospitalrun.github.io/issues/15). One of the Artboards in this Sketch file is an exploration for this issue.

One suggestion in the design is to cut the article down to the story of Hospital Run that both tech and non-tech people can relate to, hence the full brief being made downloadable instead (where all the technical information can be found) and the video that talks about the app being made into the hero section.

As mentioned in section B, we also aim to make the ways to contribute clearly divided to both Coders and Non-Coders, hence the proposed sections in the design.

SCREENS

1 branding guide 2x

2 why hospital run 2x

3 contribute page 2x

jglovier commented 7 years ago

@franciak thanks for the PR and your work on this! :tada: :heart:

there are no available Sketch files / UI Kit to start with

There is actually a Sketch UI file, although it's poorly organized at the moment. You can find it here. On Page 1 of the Sketch doc there is a mock of the marketing site home page:

image

I've been meaning to extract this into it's own Sketch file for easier use/discovery. Perhaps you could pull that art board out of the master UI file above, and include it in your Sketch template in this PR? That doc also has a master color palette that you could include:

image

Other than that, I think this is a huge step forward, and would love to get this merged. Then we can continue to iterate on this as a new baseline.

:zap: :metal: :zap: