Closed Espina2 closed 8 years ago
cc @jancborchardt @jospoortvliet
@LukasReschke You can give feedback to, its a open discussion. :)
Very cool start, and awesome to have you here @Espina2! I especially like the light feel and the great graphics for the 3 points! :)
Some input:
That’s the main feedback from my side. :) I really like the direction! Bright and friendly.
cc @jospoortvliet @elioqoshi @nextcloud/designers for more input. :)
Thanks for your feedback.
• First of all I don't think a good ideia when you have a logo you have mandatorily blue bg. I think its more friendly when you have a white background and a color logo because the popup more.
• The Typeface is Lato, is open source to, but in my opinion the weights of this particular font are very good designed, and for this reason I really prefer her.
• I put an iPad just to put the people think about it, because we have to change the Headlines. Its really just a first approach of what could be done, and more like and look and feel.
I'm glad that you like it,
Tomorrow I think that I can finish the Homepage and put some more things in here.
Ps: if you like the illustrations its very easy to me animate them like this http://www.hi-interactive.pt/www/assets/images/default/gifs/research_w.gif
I really like it!!.. It is a clean design and sightly. I think centered titles and description on the "Why nextcloud" section will look better.
I guys I just updated for "beta" version. I need to tweak some things like the top "banner". What you think about it?
@ldonis Sometimes it looks better centered titles, but its better left aligned because its more easy to read, your eyes dont need to search where starts a new line. :)
@jancborchardt
@Espina2 yeah, that looks super awesome! :) Only the points I mentioned above already.
@jancborchardt I will test some things and put examples like you suggest don't worry. Its really easy and fast to test your sugestions.
• No problem for me, I will change.
• I use the SVG that is on the website and I didnt change anything but maybe the software change the stroke lines for inside instead of outside, I will check it. I prefer like you said, logo on the left and text on right, I will test it and publish.
• I really like more of the white its more cleaner, the header should be fixed on top and its not nice when the header is blue and somewhere the BG is blue to.
• This kind of problem is very easy to get rid of, one sass variable and its all the same. Also, I'm using shades, meaning that the blue isn't always the same exact code, I use a color pallet. But I will fix it when I make a styleguide
Another question who is coding this? :P
Yeah, the logo SVG from the website is wrong cause the strokes are not converted into a shape … Use the logo SVG from here: https://github.com/nextcloud/promo/blob/master/square.svg, either like that or you can move the text right next to the logo.
By the way, instead of the Shutterstock image we can get a free culture one from Pexels or Unsplash. :)
Also, the background image (https://github.com/nextcloud/server/blob/master/core/img/background.jpg) isn’t used anymore. I guess you run a Nextcloud instance and there we use it as log in background. We also use it on the website to have some brand consistency. Might be cool to continue doing that. cc @jospoortvliet what do you think?
Regarding the coding question: @Espina2 Maybe it’s a nice project for you to do more HTML+CSS? ;) I’m also from a pure visual design background but programming is more and more important these days.
Otherwise @jospoortvliet and me can do it I guess. :) Or do some @nextcloud/designers want to jump in?
I really like this!
I don't see much of a problem the logo being blue on white as that's why a logo should be flexible. There is already so much blue, that avoiding doing the same here could be beneficial.
I agree that the tablet is a bit of an overkill. A screenshot could do it I believe (it also makes it look a bit more corporate with all the device stock images). Maybe we can alter that a bit?
Hi @elioqoshi, im glad that you like it to.
Its like I said, when the header and the background of some area are blue, doesnt look at all.
I agree to, but I think we have to think better about the two headlines, and after we choose a better image to fit in the "concept". Lets say that its some dummy content for now.
@jancborchardt
Its not a problem to me buy some photos of shutterstock I have a premium account. BTW unsplash is amazing.
I dont like the BG image at all, dont add any meaning and doesnt show what is Nextcloud. Sorry its my opinion.
In general I dont get attached to what is allready done, I really want to make a new version of "nextcloud" like a 2.0 one. Now i'm focus on website but after Im going to the "app itself".
To the code one I really dont have the time to do that. I think I give a lot more with my time if I focus only design.
I will put more things sooner.
Ps: I only put some 2/3 hours on that. The page are gonna still be improve a lot when i put some more hours on it. :)
Its not a problem to me buy some photos of shutterstock I have a premium account.
Yeah, it’s mainly a thing of that we support the open source design ecosystem. :)
And ok, good point about the background image. I do think it looks very nice and clean without it.
Regarding improving the design of Nextcloud itself let’s do it very step by step. Design refreshes are good, and we have to take care that lots of people use the software and are used to how things work. Also many elements are the way they are for a reason. Nextcloud is always praised for its ease of use and I’d like to maintain that. :) I saw some »redesigns« over the years which only had screenshots and basically no interaction design or reasoning behind it at all. So we should for example tackle specific parts, like updating the apps management, or making flows easier. And above all we need to work step by step so it’s actually possible to implement. Because when mockups just lie around then no one is really happy. They usually don’t just get implemented magically. ;)
I uploaded some new versions, and fix and test some points that you are talking about. @ldonis @jancborchardt @elioqoshi
Please stop editing your first post with your mockups by removing your old and adding your new drafts. I'd like to see the differences between your old versions and your new ones, so it would be nice - if the old ones are still accessible 😉 @Espina2
I like your mockup 😉 ...and I would like to see a appropriate PR on that 😁 ... I think it is better to talk about code and themes if they are already in development. What do you guys think?
@mar1u5 The old ones are only temporary, because of that I change it. Doesn't really add nothing to anyone see the old unfinished versions.
About the code question I don't really understand what you are talking about, but I have this files in Zeplin ( https://zeplin.io) and this are suppose to be my deliverable format. I need email of who are coding this to add to the team (Its free to use).
@jancborchardt Sorry for only answer you now.
I'm actually agree with all you said maybe I explain me wrong, I think we can do a lot better in the app to, but first we have started with the website. After that we can make a lot of things, we can make A/B testing in some new designs on the App, maybe only some reskin and design some new icons or maybe I don't know make a new beta version... There are so many possibilites, that we can make the things pushing forward, and change its not a bad thing at all. We always to see what is good or what is bad, and with that.
Ps: English is not my native language and perhaps sometimes I can't explain at the best way what I want to say. :)
Overall, from a visual design point of view, I really like it. It's clean, spacious, follows fairly standard design paradigms etc.
Now, I'm not sure where the text came from (the current website?), but as an ex copywriter (for a 12 time NYT best selling author, an ex co-founder of the secret service's counterfeit money detection program etc), I can see quite a few improvements that we can make here.
There is a lot of wording that is both vague, and yet unnecessarily technical at the same time, and is overly focused on "Nextcloud has feature X and Y" rather than "You get benefit A and B by using Nextcloud." (The difference between a feature and a benefit is outlined in many places online, but really is critical and is worth understanding).
I'll admit that some of the current wording likely comes from walking a tightrope between the needs and language of enterprise users versus home users, however in many cases it comes across as an incomplete translation from developers language, rather than c lear explanation of benefits that would be visceral to potential users.
Accordingly, I would suggest the following replacements:
Entrepise
with:
Enterprise
...for obvious reasons. And, then:
A safe home for all your data
with:
A safe home for your digital life
...as "your data" is cold, detached and lowers the perceived value of what we're actually aiming to protect here. This isn't just "data". It's the digital aspect of people's lives (/ jobs / businesses / missions / clients)
Likewise, I'd replace:
Nextcloud is developed in a transparent and inviting way by the open source community
What converts is not how something is developed, but the benefits that come out of that. As a user, what do I get from Nextcloud being developed in a transparent and 'inviting' way? Why / how is it inviting? Inviting to do what? So my suggestion that focuses on Nextcloud's unique benefit is:
Enjoy constant improvements from a thriving and transparent, all open-source community development model, free of lockins or paywalls.
Likewise:
Nextcloud keeps your files secure and private - you decide where to host your data
"host your data" is again abstract and detached. This is about the safety of people's digital lives/businesses and ability to control them, so I'd suggest we replace with:
Keep all of your life / business private and secure. Share with only who you choose, and no-one else.
... to keep things personally relevant.
Nextcloud is extensible with new functionality to provide all you need to live your digital life.
Uses way too many and too complicated words to express a simple concept, ie:
Expand Nextcloud's ability to do whatever you want, with Nextcloud apps.
Ok, this next one is meant more for enterprise, so you're justified in using more enterprise standard terminology, however "the extensibility and features you need." is still overly vague. People don't want to think about using "extensibility" to shoehorn solutions into eventually, hopefully doing what they need. They just want a solution that works, that lets them use the tools/apps they're used to using. So... Instead of:
Nextcloud integrates in your infrastructure, offering the extensibility and features you need. Manage access to data and communication across devices and platforms, on premisis, on existing storage or with cloud storage.
Let's try:
Access everything with the tools you're already using, regardless of the device or platform you're on. Pictures, videos, documents, contacts, communications - they're all available right where you need them whether they're coming from your local storage or remote cloud services.
Lastly, no one wants to subscribe to another email list for the nebulous benefit of some products vaguely defined "news"! Staying informed about cool stuff in an area you're interested in, easily though, is another matter. So let's replace...
Stay up to date with Nextcloud news! / Subscribe to our newsletter
with...
Stay up to date with Nextcloud's latest enhancements! / Just click here »
On the next screen where they're asked for an email, it will be pretty clear it's an email newletter. Making this process 2-step, typically increases conversions by around 60% as tested by Leadpages Inc. Adding arrows / carrats to buttons has also shown increased click through's on multiple large scale split tests.
Now at this point, I'm sure that many dev's reading this have likely had "But I wouldn't say it that way..!" moments. The question though is not whether a developer relates to what I've written, but how much our potential users will, remembering that they're a different group of people with different desires who use different language (or as many copywriters would put it "With a different buyers story in their head".)
If we're going to bring our copy back to what works, it's always going to be basically about: What is the shared pain / passion in our potential users? How can Nextcloud uniquely help with that? How can we explain the likely benefits (not features) to come out of people enjoying our unique solutions?
@Bugsbane Very nice your changes and suggestions, Its very nice to see copywriters here. I will need your help in the next pages to. For me its very difficult to change copy from Nextcloud website because Im not a native english, but I worked some years on big Advertsiement agencies with awesome copywriters and I love you guys. :p
Ideally with have different ton of voice, one for public and one for enterprise. Am I right?
@Bugsbane I starting redesign this page now, https://nextcloud.com/enterprise/ can you look to all the copy and sugest new ones? I think this page are very heavy text can we reduce it a lot?
@Espina2 great stuff! :) Looking at the newest mockups I really think the last one look best, with the blue integrated header. How do you feel about that? Except that I only have some minor feedback right now:
And about doing design improvements on Nextcloud itself and the apps: Of course it’s good! :) Just wanted to let you know that we need to tackle these things step by step since the important thing is that it also needs to get implemented. And I don’t want you to get demotivated when someone doesn’t come along right away and implement a big redesign. That’s just why we need to do small improvements. :)
@Bugsbane awesome to have you for copywriting help then! I’m sure @jospoortvliet also appreciates that. :)
What do other @nextcloud/designers and @jospoortvliet @karlitschek think?
Wow. This improved a lot since the last time i looked into this. 👍 from me.
@jancborchardt
•I think we are stick with the Headers, that one that have white background is showed when we scroll down and stay fixed on top, its more easy to people navigate the site this way.
It looks nice were to (Its the enterprise page)
•Can you send me the better screenshots?
• I get it and I understand what you are saying, I hope this dont gonna happen. :)
• I changed all the copy, look here for all the versions updated, I gonna post all the pages on this link, are more easy to me update and maintain. https://scene.zeplin.io/project/57bf54c24ff046f70c9b9694
And looks the Styleguide are going to
Maybe its time to open an issue to get people start coding. What you think?
I really ❤️ the Enterprise Page 😍 Verry good work from you 👍
Looks good, a refreshing change :+1:
Im glad that all the people like, and are giving some feedback. Thanks for the <3
@oparoz
•We are going to have the two, one when we make scroll (the white one) and another when We are on top of the Page (the one without BG). Do you agree?
• Dude don't be an hatter of IOS/MAC devices, I see a white phone and a white screen, not any branded IOS/Mac devices, and nowadays many devices have this shappes. (I don't see a problem at all) :p
• If you can write me down 6 points for "Why Nextcloud" that add value to the message, post it and I will add it. Don't only say we need 6 points. Why 6 or why 4?
We are going to have the two, one when we make scroll (the white one) and another when We are on top of the Page (the one without BG). Do you agree?
Could be interesting. I'm waiting to be able to play with it to see if it works :)
I see a white phone and a white screen, not any branded IOS/Mac devices, and nowadays many devices have this shappes
Well, I've seen plenty of "themes" which come with the same elements (iOS device, safari, macbook, mac monitor) and this would be one focused on a specific market. Works well in the US per example, for consumers. The GUI stuff above the screenshot per example, that's not the OS most people use and thus recognize, so there can be some confusion about what's part of NC and what's part of the browser. But overall, I think it's best to include diversity, just like we're trying to have diversity in the community. There are probably several ways to achieve that. Abstract concepts is one way.
If you can write me down 6 points for "Why Nextcloud" that add value to the message, post it and I will add it. Don't only say we need 6 points. Why 6 or why 4?
Not a bad suggestion :) I'll think of something, but some ideas would be to take some of the key items from the features page:
So could even be 9 points
@oparoz
• Do you want start coding the Header?
• This is not a "theme" all of the devices are made by me. This things are just representative not a concrete one, it could be run on MAC OS like I have, you have to retain the information not be concrete. If I want some concrete I take some photos of my computer with my camera. Maybe I can explain it this way...
• Its a good start but i need the rest of the copy, and for the kind of thing we need to know what is the key features, for example I dont think nextcloud can edit documents on web app version.
Do you want start coding the Header?
No, I meant I'd be happy to test the feature
This is not a "theme" all of the devices are made by me.
OK
for example I dont think nextcloud can edit documents on web app version.
Yes, it can and it's proving to be a popular feature :) https://www.youtube.com/watch?time_continue=2&v=sZpYXUD1ZVM
i really like the new designs! But I must say that I would HATE to see Apple devices on Nextcloud, which is all about Free Software cloud solutions for maximum privacy, yet I see it presented on Apple devices. I would roll my eyes if I'd see it live. Let's not go that route. Use other devices if necessary but Apple would be too much of an irony.
@elioqoshi
Its very nice that you liked to. Thanks
Dude, that is just a "Fanboy" feedback and will not design or illustrate another devices, but you can do it if you want.
Why im not design new ones? Because this are utopic subject, you can say "oh no I Hate apple devices", and "I can say "oh no I hate Microsoft devices" and another "can say oh no I hate Linux devices", and doesnt matter at all what OS you like or use what matters its the app itself and are represented inside of the devices.
And sorry for some of my hard words, but if we go this way we never have something, we are not dealing with personal taste we are dealing with users.
And one more time, we can change the pictures and test it, one month with this devices and another with another devices and we can see what get better results.
Enterprise (I need to think about the Public Sector and Education illustrations)
This looks really awesome, @Espina2 🚀
@jospoortvliet Guess you need to figure out some CSS magic again at some point 🙈 😜
Yeah, I think the FAQ there is going to be useful :)
A couple of issues:
No need to to know if they are optional on this fase. I really think about this.
I agree with you Buy it isnt Really good copy, but get started now dont are good to. We need to get a new alternative.
The final price it will depend on many variables and since we have to contact to "get started" we can send a proposal price after we contact. Anyway they already have a base price on top.
Don't only say we need 6 points. Why 6 or why 4?
Just an interesting quirk of human psychology... typically having an odd number of bullets (typically 3,5 or 7) tends to convert better in split tests than even numbers. The only place I know of where even numbers usually outperform odd numbers is in pricing for prestige items (eg a $1,000 watch instead of a $999 one)
Ideally with have different tone of voice, one for public and one for enterprise.
Absolutely. They're very different target markets, with very different psychology and pain pain points. We won't know on the home page who we're talking to, so we need to keep the wording more generic there, but we can link from parts that appeal more to enterprise users, to pages that have a more enterprise focus (in language, imagery etc)
A couple of notes on the enterprise page:
The Title Instead of "Enterprise support subscriptions" the title should be about getting the benefit of an enterprise support subscription. Once the benefit has caught their attention/desire, we can explain , with the text underneath that they can get it with a subscription. Remember, people aren't looking for a subscription, they're looking for a solution to their pain point, such as the hassle of troubleshooting an enterprise-scale installation. I'd suggest something like "Relax. We'll take care of it." Then we can continue with something like "An enterprise subscription to Nextcloud guarantees that the same team who developed your private cloud solution are supporting you and your team 24/7, from setup and deployment, to scaling and full life cycle maintenance ."
The Followup Text We'll need to think carefully about the explainer text under the title. I won't The text underneath can emphasize simplicity, ease and direct access to the development team. I would like to see a couple of things though before we throw people straight into pricing and FAQ's, specifically more detail about features and benefits of specific interest to enterprise users, and some testimonials, preferably a video and at least a couple of written testimonials. Ideally the written testimonials will have a head and shoulders image or at least an enterprise logo to go with them.
End of Page Call to Action Also, at the end, we should have another call to action, that is a call to book a subscription or be contacted for a discovery call, rather than having interested prospects read to the end and then just be invited to read more. Is there a process in place now for enterprise customers to be contacted by a representative from NC? Follow up calls are very important for establishing trust on products in the price range I'm sure we're talking about. To that end, I'd like to see something along the lines of "Have questions about whether a Nextcloud Support Subscription is right for you? Talk to us »" that at least goes to a contact form, although really, for the reasons I just mentioned, it should be a real, actual human being phoning them up.
Call to Action Buttons As @oparoz already pointed out "Buy it" on the CTA buttons doesn't really work in this context. I'm not sure what cicking the buttons will actually do though - take them to an order form? Have somone contact them with a survey to give a price quote? If so, I'd go with "Learn More »"
Background Image Regarding the image, you want to make sure that any people's eyelines and image focal points draw the readers eye to the page title. Currently the people in the photo are looking off to the right of the window, which actually draws people's attention away from the page text. This is a conversion killer.
Remember also, that we want an image that doesn't just convey "Enterprise", but an image that conveys the benefit of an enterprise subscription, being that the CTO / manager can relax in the certainty that their NC install will be deployed and function smoothly, quickly and easily. I suspect that in large organizations, meetings don't evoke those feelings of ease, relaxation and certainty for our target audience. Personally I'd rather see something that speaks to the benefit more such as this if we can find something decent and not too cliche.
Miscellaneous Can we change "Product overview" to "Nextcloud Features" and "Know All the Features" to "Learn More"?
We need visual icons for the "Public sector" and "Education" titles.
There is still quite a few other suggestions I'd make for the copy, but I get that this is intended as a visual draft, at the moment. Overall, it's looking nice so far!
Thinking about it, "A safe home for your digital life" on the first page should actually be "The secure online home for your digital life" as "the" emphasizes that Nextcloud is unique and "secure" emphasizes that we've focused on security better than the word "safe" does.
I'm a bit concerned that "digital life" still focuses too much on the home market, where most NC customers are going to be enterprise, but when we're targeting two markets, there's always going to be some mismatch. I'm still thinking on this one.
@Bugsbane
Thanks for your detailed and good feedback.
• You are talking about prices, and its easy to explain, in design we like pair numbers because it look organise to the eyes.
• I think it have to be more "enterprise" language can something very similar but without of "Relax".
• Nice to have testimonials, but we don't have "data" for doing that, we need photos (photos is better than logos because are "human") and this no need to explain first, what we want its compare features and see what is better and What I can afford. (My opinion)
• I will add an Call to Action on the end of the page
• Nice point, I flipped the image, and I think its fine because the image show some people supporting.
• I changed the Headline for what you said, but the call to action Its better to stay as we are, because we are only presenting some key features, and if you want to know more you are going to page Features.
• The icons I have to think about it, Public sector its very hard to visual represent and for that reason i need some time go prove some concepts.
Once more thanks for your feedback, it really helps a lot and but me thinking about the subject. :)
I will do more things when anyone start to code. I think we have now a very solid starting point. :)
I will help to review the code and some Q&A. All you can see all its done here https://scene.zeplin.io/project/57bf54c24ff046f70c9b9694
I suggest the people who are coding this to sign up on https://zeplin.io
And just send me the username to add to the team and you will have something like this
Having no Apple devices is not a matter of taste, but a matter of company values and they contradict with Nextcloud values. @jancborchardt can agree with this I suspect since this seens to be "my personal taste"
In the end it's all about who does the work 😉 – I wouldn't block this just because of some devices that look like an iPhone or a MacBook.
If someone in the future has another replacement that looks at least as nice we can still replace them. But let's not drag this into a discussion of "closed devices" vs. "open devices".
We are talking about Nextcloud here, not Dropbox. If one wants to get the work "done" they use Dropbox. Also, it's the first thing you see on the page.
Yes, this is exactly the discussion we are having and I don't see why we shouldn't "drag" it there without backing arguments in my honest opinion.
Wow, awesome work @Espina2 this looks seriously great. Seriously! So I can help with CSS and HTML and I really appreciate the feedback from @Bugsbane on the text, that is awesome and we need some of that!
This will make the website look so much more professional, damn. Rocking.
I created a user (jospoortvliet) on zeplin. What is the plan for coding this? I will not have much time until at/after the conference -> conf.nextcloud.com - perhaps come there and we can do this together, in person :dancers:
You would deny support a people who work with iphone and mac? Why nextcloud have desktop/mobile clients for that?
You dont make any sense at all...
For example google doesnt develop app for windows phone because we dont want to do it, if you dont want open source software work in not open source software why develop for them?
Its just stupid debate about that and makes no sense at all. And still apple devices can run Linux and open source software.
And why I should use Dropbox if I can have nextcloud? Nextcloud can be better than Dropbox, we only have to be smart and think outside of the box. We can create tendencies and not follow the others. Its just a way of thinking...
@jospoortvliet Its nice to help something that I use all my days.
Thanks for your invitation but Im from Portugal, and its very hard to go to Berlin, maybe in another time I can go. :)
I already added you to the team. I think you should focus somehow in reuse some of the code you done. Im not a coder, I can help because I can read code, but im not good at making them "if you get what I mean". I think you can start for coding the Header and apply them for all the pages. What you think?
Do you have some staging server or something like that?
About the devices conversation - I don't care and we shouldn't, in general. Let the devices look as they do and if we want to change it later on - we can. It's a minor issue at best, imho.
@Espina2 thanks for the invite. Berlin is far, but perhaps we can help with travel support?
Glad you're helping out! I'm no coder either, btw, I learned over the years of having to maintain a website ;-)
But I think I can implement most of this and I will - but I don't think I will have much time until during or after the conference... If you are willing to start on something I can perhaps help a bit but for now, that is what it is. I have to make sure people have something to eat and drink at the conference ;-)
@jospoortvliet maybe in the next conf. Now its very difficult to me, but thanks for offering me help. :)
My problem are that I really dont know here to start, and I hate php and wordpress... :(
I think if you post this job and show the mockups maybe anyone its interested to help. What you think?
Its the first time I do it some things for open source, you know what to do better than me I guess. :)
Generally, the best is to try and move in small, incremental steps. So for example, the header is, right now, in: https://github.com/nextcloud/nextcloud.com/blob/master/templates/header-top-navbar.php with CSS here: https://github.com/nextcloud/nextcloud.com/blob/master/assets/css/home.css
This doesn't really use php, by the way, as I have 0,0 PHP skills. I only copy-paste that shit. It is all html and CSS (bootstrap).
If you could turn that into what you designed - I like the last one, with full blue logo ;-)
A next step would then be the rest of the front page, in here: https://github.com/nextcloud/nextcloud.com/blob/master/page-homepage.php
Again, no php, just HTML in a file with the PHP extension ;-)
I tried to install and setup a local development process and made all the steps( I tried more than one time and with different versions of wordpress), and when I try to acess http://cloud.paulomoura.com.pt/wordpress/ give me error, but when acess from were http://cloud.paulomoura.com.pt/wordpress/wp-admin/ its shows all the things.
Its because of that I dont want to code, it consumes all of my time for nothing... Im done with my try, and will not waste my time making something that I dont enjoy at all.
If anyone want coding the pages they are on the post, I will not code and design more until I see some things done.
All the Mockups are here, and the Styleguide to. Take a look. https://scene.zeplin.io/project/57bf54c24ff046f70c9b9694
See the attach files.