Create Marketing landing page

[twentysixmoons]

Overview of Needs

• [x] Content for the landing page
• [x] 1-page design for the landing page
• [x] development for the one page design

---

Background

While work is underway for the application it might be a good idea to stand up a landing page that includes the following

• More info about the project,
• A sign-up to learn when it will launch
• info and links on how to get involved.

Having this prior to Mozfes(October 27th) would be ideal since it could help articulate the work underway and collect emails of people interested in the project and it's development.

Examples

One example is Budget party. Its landing page currently only works if it's your first visit so going incognito might make it pop up:
http://austinbudget.party/home

There are plenty of other projects that have landing pages though. Once the app is up and running then we can change the CTA from "get involved/sign up for info" to "open the app/etc"

Here are some other nice landing pages:

• http://teampaper.me/snap/
• https://onepagelove.com/gallery/app

[rickmcdata]

Edward (UI background) is creating simple prototype of the page in Sketch to share with team. Andrew (marketing background, new to Open Austin) has offered to assist with content for the page. Using the README content as source material.

[2echoi]

https://open-austin.slack.com/files/U70FPPF51/F7KMN3LEB/desktop_hd.png

Here's the demo I created I'm thinking of adding images on the website, but let me know your thoughts!

[twentysixmoons]

Hey @2echoi. Great that we have something down. I think there is some clarity needed.

1. The current headers aren't mean to be shown on the page. They were more to mark what each sections purpose seems to be. I'll make a note in the content.
2. The button at the bottom should actually be an email collection form. We are trying to collect emails of people potentially interested in following along and/or supporting.
3. Maybe we should use some way to differentiate the sections? Right now it's all blue.
4. Check the color palette and fonts in use here: #5

Check the updated content doc.

@jessvsmachine also mentioned having screens that could be used to mock up the ui. Having those assets might help some. I think sourcing some additional assets like photos of the capitol for background or something might be beneficial too.

[jessvsmachine]

Thanks for working on this, @2echoi! We'll use this as a wire and add more detail and imagery in the dev stage in order to get this up in time. I know you were interested in creating more artifacts for your portfolio, so if you'd like to, I'd definitely encourage you to incorporate all of @VictoriaODell 's edits into a more high-fidelity design. You'll see that she also links to https://github.com/open-austin/influence-texas/issues/5, which goes into more detail about the Material design system we use on this project (we discussed design systems at the hack event, and this will give you some practice incorporating those elements into a unique design). Material dictates everything from color to the amount of pixels in the borders and margins, so if you'd like to familiarize yourself, I'd encourage you to dig in and explore the different sorts of guidelines they have.

[2echoi]

@jessvsmachine Thank you for your feedback. I'll let you guys know on Slack. I wasn't sure if I should use the design from the mobile app one, but I use it as a reference.

[2echoi]

[jessvsmachine]

Thanks, @2echoi ! Definitely a lot closer than the first version :).

• I like how you alternated the colors—wondering whether reusing the background color from the first section in the How section might be a little less visually jarring. I'm guessing you made the choice because the blue in the icon was too close to the other background color—maybe if you removed the background of the scales icon, it could would be less of an issue?
• Are these images available on an open license and if so, can you provide source links? If not, we can use them as a guideline/placeholder for other images.
• Perhaps alternating the placement of the image and the text each section could guide the eye in a zig zag down the page and add a little more visual interest?
• It seems like the email signup module can be combined with the previous section so that the signup is right under the copy about the project being under construction.
• Lastly, I do think it would be cool to have one of the sections show a few screenshots, like the Budget Party example.
• I think we could also punch up the headlines a little bit—I'll ping Andrew about doing so.

Thanks again for the speedy edits!

[2echoi]

Hey @jessvsmachine , thank you for the quick feedback. I did fix the issues as you told, but I'm not sure about the "open license". This one is done by Sketch, but I send you the Sketch file if anyone wants to examine it.

[jessvsmachine]

@2echoi Awesome! I really like the variety created by switching the image and the text in each section.

I think I wasn't clear about what I meant in the How section—could we try just changing the background to the same color as the first section? Then change the last section to a white background?

For the license question, I meant the images you used—the scale, the magnifying glass, etc. Did those come from Sketch? I'm thinking we can replace the scale with screenshots from the app (I can make an image for that, so don't worry about it).

[2echoi]

@jessvsmachine Yes, all of the images are made in Sketch. I'll screenshot the mobile and upload it soon! And thank you for the reply!

[2echoi]

@jessvsmachine Oh and could you get rid of the number boxes from the screenshot? I don't think it will be okay if I put those screenshots on the landing page. https://github.com/open-austin/influence-texas/issues/5

[jessvsmachine]

@2echoi I have the original files for the prototype on my other computer, so I can put together a composite image there. When you say the images are made in Sketch, do you mean you personally created, for example, the image of the envelope yourself?

[2echoi]

Yes, I created those images in Sketch. I could have done it in different software, but I just did it anyway.

[jessvsmachine]

@2echoi Cool! Can you create transparent pngs of the images? I'll probably work on the dev in the next few days. Great work incorporating the feedback so quickly. If you want to do a last edit, you can change those background colors noted above and put a generic placeholder of screens in place of the scales.

[2echoi]

@jessvsmachine Yes, that is correct. I designed them by myself. Anyway, is there anything else I can do?

[jessvsmachine]

@2echoi Just those pngs of the images when you get a chance. I'll do the background color thing in the dev. Just so you're not surprised, I'm going to build these in a Material framework, so some of the font sizes and margins might change, but it should be close!

[2echoi]

[2echoi]

Here you go.

[jessvsmachine]

@2echoi Thanks!

[jessvsmachine]

Landing page preview is here! http://influencetxlanding.bitballoon.com/ Influencetx.com can redirect here or the below files can be uploaded to a server if we have one. InfluenceLanding 3.zip

[2echoi]

What happened to the images that I uploaded?

[jessvsmachine]

@2echoi I am guessing you are looking at the page on a phone? The desktop version includes all of your images but the scale, which we discussed replacing with a screenshot. This is the desktop view.

[2echoi]

Oh ahahahah. Yes you’re right. i was looking at the phone. I take it back.

[jessvsmachine]

@2echoi Cool. Yeah, I would definitely not have left them out after you worked on them! :)