Violet Rails Forum

Ask A Question


Notifications
Subscribe You’re not receiving notifications from this thread.

Landing page redesign

Product Team • Asked 5 months ago by Shashike Jayatunge

Shashike Jayatunge Mod Commented on May 24, 2021:
I think we have enough information on the landing page to warrant a better design. Any thoughts? 

Here's what we need to focus on: 
  1. What's violet rails (should be apparent at a glance)
  2. What its good for (and what it isn't good for)
  3. Getting started by either checking out the hosted application, DIY it by reading the documentation
  4. FAQ's: how to deploy, cost, what features are included, how much coding do you need to do to get started etc

Also graphics wise, we will need the following: 

  1. Favicon
  2. Logo (confirmed)
  3. brand guideline (WIP)
  4. Social media cards (these can be the same but different sizes) for LinkedIn, Twitter, Facebook

Some inspo for landing pages: 

  1. rspec 
  2. Ruby on Rails
  3. Monica / Their new product
  4. Morningbrew

Let me know if I missed anything!
Shalaka Punjabi Commented on May 25, 2021:
I think this is good!
Shalaka Punjabi Commented on May 27, 2021:
Hello!
Here is the content for the landing page. It is divided into four parts. Each part has a heading that is written in Italics so that it is easy for you to understand. Let me know if you need me to make changes or additions. 
----------------------------------------------------------------------------------------------------------------

What is Violet Rails? 

If you are an individual or an organization that is looking to create their own website, write blogs, manage emails, all in one place, then Violet Rails is the platform for you. Violet Rails is an open-source and customizable platform that allows you to manage the web presence of your next big idea. It also offers a public forum for you to connect with people from all walks of life and gain knowledge.  

Violet lets you do all your work in one place so that you can be more efficient and organized with your work. 



What features does Violet Rails offer?

Violet offers a wide range of features like creating web pages, blogging, managing emails, and having valuable discussions with others on the public forum. 

<A video of this page that clicks into every feature and explains what it is>
image.png 52.5 KB Download


What is Violet Rails good for? 

<The same image that is there on this website
image.png 42.8 KB Download



Violet Rails is for the builders.

Violet Rails is not like any other web development software. It is curated for people who enjoy building everything from scratch. Violet Rails lets you customize your content using code and doesn’t block your inventiveness through pre-existing templates. Violet allows every individual to broaden their horizon of creativity and build something that no one has ever seen before. 

Bring your vision to life with Violet Rails. 



Shashike Jayatunge Mod Commented on May 29, 2021:
Hey, sorry about the late reply on this. Thank you, I still have to go through the copy. I have been working on the medium article introducing Violet Rails (let me know what you think). 

 
Shalaka Punjabi Commented on May 29, 2021:
Hey!
No problem. I took a look at the blog and left some comments
Shashike Jayatunge Mod Commented on May 30, 2021:
Thanks for the edits, I just incorporated them. Today I'm going to finalize the landing page content so we can transition it over to Heyn. 

 
Shalaka Punjabi Commented on May 30, 2021:
Sure!

Heyn Rifan Commented on Jun 01, 2021:
Is the above website copy finalized?
Shashike Jayatunge Mod Commented on Jun 01, 2021:
Nope, its not. But you can use it for the prototype along with the content on the current landing page

I think there is enough content for you to come up with a responsive layout/presentation. 
Heyn Rifan Commented on Jun 01, 2021:
Here is the first draft of the Violet Rails Landing Page. I have used placeholders for some images/assets for the moment until the copy is finalized. Let me know your thoughts.
Shashike Jayatunge Mod Commented on Jun 02, 2021:
Wow, this got done way quicker than I thought. Pat yourselves on the back for that.

I know the mobile/tablet breakpoints are a WIP so I'm gonna reserve judgment on over-all layout-- but I think it looks great for desktop.

I like the background colors and the visual hierarchy but I think the navbar looks too much like restarone.com. The footer and call-to-actions are excellent. Can you add the two CTA templates we have to the design as well? 

Other than that, I think this is a solid first stab at a very abstract and challenging proposition :)


Shalaka Punjabi Commented on Jun 02, 2021:
I agree with Shashike. This looks great! I just have a few suggestions for the placement of the content.

image.png 46.6 KB Download

In my opinion, for this piece, the content should look like this.

If you are an individual or an organization that is looking to create their own website, write blogs, manage emails, all in one place, then Violet Rails is the platform for you. 
 
Violet Rails is an open-source and customizable platform that allows you to manage the web presence of your next big idea. It also offers a public forum for you to connect with people from all walks of life and gain knowledge.  

Violet lets you do all your work in one place so that you can be more efficient and organized with your work.


image.png 38.3 KB Download



In my opinion, for this piece, the content should look like this.

Violet Rails is not like any other web development software. It is curated for people who enjoy building everything from scratch. 

Violet Rails lets you customize your content using code and doesn’t block your inventiveness through pre-existing templates. It allows every individual to broaden their horizon of creativity and build something that no one has ever seen before.

Bring your vision to life with Violet Rails.


That's all from me. 
Thanks!
Shashike Jayatunge Mod Commented on Jun 03, 2021:
I have gone ahead and started implementing the landing page and in the meantime noticed that @Heyn will need to add the hover states to the buttons/links:

view it here

Heyn Rifan Commented on Jun 04, 2021:
I have added the buttons with the respective states and CSS color codes on the third page of the link. 
Shashike Jayatunge Mod Commented on Jun 04, 2021:
Just took a look at page 3 of the prototype and the hover states look good.

We are almost done with this page so let me give the final push.

For this section, we will need to illustrate to the user the anatomy of a Violet Rails app. Out of the box, they get web pages, email, blog and a forum. Is there a way we can show a slice of each of these in this box? (like a collage). 
Screen Shot 2021-06-04 at 6.24.23 PM.png 162 KB Download

The following icons in this block need to be replaced:
Screen Shot 2021-06-04 at 6.27.20 PM.png 277 KB Download


scalable storage: need a new icon (maybe a hard disk or floppy outline?)
built with top-shelf OSS: need a new icon (maybe a star?)
unlimited email addresses: need a new icon (maybe the outline of a message with the @ symbol)
Heyn Rifan Commented on Jun 05, 2021:
I have added the buttons states, CSS color codes, and the other stat boxes' CSS color codes to the brand guideline and attached it here.

Violet Rails - Brand Guideline.pdf 1.86 MB Download
 
Heyn Rifan Commented on Jun 05, 2021:
I will try to see what I can come up with for the illustration. And I will replace the icons here and update the UI
Heyn Rifan Commented on Jun 05, 2021:
I have created the illustration/graphic you mentioned. Let me know your thoughts on that
Shashike Jayatunge Mod Commented on Jun 05, 2021:
Heyn, this looks good. Only 2 changes:

1. Replace "your website" with "your idea"
2. For build your website and write blogs, bump up the fidelity so the website looks like a web layout and the blog looks like a news column sort of thing.

2A4EFB7A-8825-4BBC-85CE-5D7B6E8B824C.png 280 KB Download


Icons are good now! 
Shashike Jayatunge Mod Commented on Jun 05, 2021:
Also, where can I find the graphic assets? I'm gonna start building this today. 
Heyn Rifan Commented on Jun 05, 2021:
About the asset feedback,

1. Done
2. I don't understand this. By bump up fidelity do you mean to have real code on the "build your website" and real text content on the "write blogs" section?
Heyn Rifan Commented on Jun 05, 2021:
You can either download all the assets from the Adobe XD link itself or I can add those into a Figma file.
Shashike Jayatunge Mod Commented on Jun 05, 2021:
Can you add it to a figma file and just share it with me? I cant seem to figure out how to pull assets from Adobe XD (and somehow I'm still considered a developer?)
Shashike Jayatunge Mod Commented on Jun 05, 2021:
Heyn about #2, what I mean by high-fidelity is making it more obvious to the user what they are looking at.

So for example, under "build your website" it should be apparent to the user they are looking at a CMS/website builder. So you can maybe include some interface that looks like a CMS/HTML editor.

The graphic for "manage emails" is good, just add some low fidelity text lines and placeholder assets like images/video to the text box.

For the "create forums", you could include a profile caricature next to each text block. 

I think calling it high-fidelity was misleading, to begin with, but hope this clears it up!
Shashike Jayatunge Mod Commented on Jun 06, 2021:
Heyn, I just finished up implementing the landing page. I still need the replacement asset from the above comment ^ and can you remove the excess padding on this asset?

You can move everything to the edges so that there is minimal white space around it.
Screenshot from 2021-06-06 09-55-38.png 313 KB Download


Heyn Rifan Commented on Jun 06, 2021:
I have done the changes to the asset, let me know if that looks good.

About the whitespace around the asset, the shadows I have added to those are what's causing the whitespace. It doesn't look that good when the shadows are narrowed down or removed. However, I have added the new asset as two versions on page 4 of the prototype with and without shadows. 
Shashike Jayatunge Mod Commented on Jun 06, 2021:
Brilliant, this looks great. Thanks! 
Shashike Jayatunge Mod Commented on Jun 06, 2021:
So the new landing page is live but we are missing the graphic asset on the background.

@Heyn, any ideas on how to implement this? IIRC the way we did it before was just with an SVG (restarone.com is most likely done this way) but I think that implementation is sub-optimal.  

Maybe we can do this with CSS, When you get a chance-- can you drop in the SVG for the pattern?