Mockup previews of Appleseed 1.0, feedback appreciated.(opensource.appleseedproject.org)
opensource.appleseedproject.org
Mockup previews of Appleseed 1.0, feedback appreciated.
http://opensource.appleseedproject.org/preview/
11 comments
I think web designs can fit into 1 of 3 categories:
- Designs that immediately make you cringe
- Designs that make you analyze for areas of improvement
- Designs that are so elegant you simply admire
I think these mockups fall into the "areas of improvement" category. They aren't bad by any means, but I immediately saw myself saying "that shade of blue contrasts with the rest of the color scheme" and "that is an inappropriate use of whitespace" and "the padding for that navigation looks unbalanced."
I think with some iterations and a "designers eye for the developer guy" these could jump to the elegant category. I think you're past the chasm; designs that make you cringe can't be iterated upon.
- Designs that immediately make you cringe
- Designs that make you analyze for areas of improvement
- Designs that are so elegant you simply admire
I think these mockups fall into the "areas of improvement" category. They aren't bad by any means, but I immediately saw myself saying "that shade of blue contrasts with the rest of the color scheme" and "that is an inappropriate use of whitespace" and "the padding for that navigation looks unbalanced."
I think with some iterations and a "designers eye for the developer guy" these could jump to the elegant category. I think you're past the chasm; designs that make you cringe can't be iterated upon.
As a final note, the Appleseed logo in the top left is going to cause some undesirable behavior if left like that.
I also thought this was kind of strange. It looks alright in the mockups, but I can't think of a behavior for that logo that would deal well when you shrink the view horizontally. The design seems to suggest that the left margin will remain empty space, as trying to slide it to the left would cause the profile picture to overlap the logo entirely.
Neither leaving the blank space nor covering up the logo seems ideal to me.
I also thought this was kind of strange. It looks alright in the mockups, but I can't think of a behavior for that logo that would deal well when you shrink the view horizontally. The design seems to suggest that the left margin will remain empty space, as trying to slide it to the left would cause the profile picture to overlap the logo entirely.
Neither leaving the blank space nor covering up the logo seems ideal to me.
I've gotten some criticism that Appleseed's design and user experience was lacking, so I decided to work on a set of mockups for where I'd like to see Appleseed go for a 1.0 release. While we're still on version 0.7.9 (publicly), I usually feel that solid mockups can set good guidelines for building software for the future.
I would love to hear HN's thoughts on these, I'll be taking criticism to heart as I break these out into HTML over the next few weeks.
I would love to hear HN's thoughts on these, I'll be taking criticism to heart as I break these out into HTML over the next few weeks.
Way to go! Those mockups look amazing- They're clearly Facebook inspired, but it brings it's own flavor to the party.
Did you make these in Photoshop, or HTML? Did you do these yourself, or have these made up?
Either way, FANTASTIC work.
Did you make these in Photoshop, or HTML? Did you do these yourself, or have these made up?
Either way, FANTASTIC work.
Thank you very much! There is definitely some Facebook influence, I tried to take the best from the best, so you'll see some Gmail in there, some Livejournal, and some Facebook, along with a little bit of others. No MySpace, though. :)
I did these myself, I'm not a designer instinctively, but I had a vision for how I saw things working, so I just started hacking away and refining things until I found something I liked.
And I did them in Photoshop, that's how I usually do web design, since it's what I'm most comfortable in.
I did these myself, I'm not a designer instinctively, but I had a vision for how I saw things working, so I just started hacking away and refining things until I found something I liked.
And I did them in Photoshop, that's how I usually do web design, since it's what I'm most comfortable in.
I know its a matter of opinion, but I suggest doing these in HTML/CSS. I could tell these were done in Photoshop. I think HTMl/CSS will let you fine-tune these to make them very presentable.
That's the next step, I always do mockups in Photoshop, then breakouts in HTML/CSS as the next step.
Great approach, and kudos to you for going this route! It's a very clean look, and a great base to build on.
The mockups look great.
Gut reaction is that you are clearly inspired by Facebook, but there's only so many ways to peel this particular orange. I'd consider a primary color change as a quick and painless way to distance the two; I think it's the blue that's keying me to Facebook the most. There's an argument about whether that's fair, that they psychologically own social blue in my mind, but better to differentiate (in my mind).
Gut reaction is that you are clearly inspired by Facebook, but there's only so many ways to peel this particular orange. I'd consider a primary color change as a quick and painless way to distance the two; I think it's the blue that's keying me to Facebook the most. There's an argument about whether that's fair, that they psychologically own social blue in my mind, but better to differentiate (in my mind).
there's only so many ways to peel this particular orange.
It's true, there's certain paradigms that just work, and I played around quite a bit with more experimental approaches, and I just couldn't see the user flow working in a way that didn't throw users completely for a loop.
I'd consider a color change as a quick and painless way to distance the two.
With the beauty of Appleseed themes and CSS, I'll probably try and have three or four variations on this layout for the 1.0 release.
It's true, there's certain paradigms that just work, and I played around quite a bit with more experimental approaches, and I just couldn't see the user flow working in a way that didn't throw users completely for a loop.
I'd consider a color change as a quick and painless way to distance the two.
With the beauty of Appleseed themes and CSS, I'll probably try and have three or four variations on this layout for the 1.0 release.
agreed, definitely try to lead with one that has less facebook-y and diaspora-y colors
Most social networks are in various shades of blue. http://www.quora.com/Why-are-most-social-networking-sites-bl...
I'll concur with this. Originally, Appleseed was green, and people hated it. I tried various different color schemes, and while I don't think social software has to be blue, blue color schemes are definitely the easiest to make work.
What concerns me is the emphasis on open-source and decentralization on the front page. They are marketing the features like this is a software product, which is not how one should market a social network.
If they ever want this to appeal to anyone but alpha-geeks, they should emphasize how the unique features make the _experience_ on Appleseed better than it is on Facebook/other networks.
If they ever want this to appeal to anyone but alpha-geeks, they should emphasize how the unique features make the _experience_ on Appleseed better than it is on Facebook/other networks.
This is a common concern, and I understand where it comes from, but I actually disagree that we should be marketing directly to users
Instead, I think the most important thing is to become the de facto foundational software for anyone who wants to build a social networking site.
Do you want to set up a social network just for cat owners? How about one for orchestra students around the world? Or a fan club of the Anime series, Cowboy Bebop? Then we want you to run Appleseed. It being open source is a huge benefit for that. And the distributed features are gravy. Or icing. Depending on your tastes.
Users may not ever know what Appleseed is, and that's fine.
In other words, Appleseed isn't the next big thing, but we want the next big thing (or things) to be built using Appleseed.
Instead, I think the most important thing is to become the de facto foundational software for anyone who wants to build a social networking site.
Do you want to set up a social network just for cat owners? How about one for orchestra students around the world? Or a fan club of the Anime series, Cowboy Bebop? Then we want you to run Appleseed. It being open source is a huge benefit for that. And the distributed features are gravy. Or icing. Depending on your tastes.
Users may not ever know what Appleseed is, and that's fine.
In other words, Appleseed isn't the next big thing, but we want the next big thing (or things) to be built using Appleseed.
If I'm a cat owner and a Cowboy Bebop fan, would I have two profiles? Would I choose one site to "own" my profile?
In this Ning-like scenario, what's the value of the distributed protocol you spent so much time on?
In this Ning-like scenario, what's the value of the distributed protocol you spent so much time on?
You would choose which site best represents your identity. Say that's the Cowboy Bebop site, so your identity becomes [email protected]
You can now login to lolcats.example.org using that identity. So it acts as a single sign-on.
There are other planned features, like profile linking and cloning so that you can have multiple identities tied to a single user, but that's how it works for now.
You can now login to lolcats.example.org using that identity. So it acts as a single sign-on.
There are other planned features, like profile linking and cloning so that you can have multiple identities tied to a single user, but that's how it works for now.
I don't think it's a good idea for a person's identity to be anchored in one particular community, because people join and leave communities over time. In a generic system like Facebook, I can cut all ties with high school if I want to.
That's where linking, cloning, and profile forwarding come in.
Intriguing, although I couldn't find any docs about those concepts.
I'll write something up for Appleseed's wiki when I get a chance, for the most part they're original concepts that are being worked out within Appleseed. But basically, they work similarly to what their names imply.
Linking, Cloning: I have two accounts, on a.com, and b.org. When the two are linked, actions taken on a.com are duplicated on b.org as my b.org identity. Friends on b.org are not made aware of the existence of my a.com identity. There are subtle differences between linking and cloning that are still being worked out.
Profile forwarding: Works just like email forwarding. I leave one site, and move to another, and at the original site, I leave a forwarding address.
Linking, Cloning: I have two accounts, on a.com, and b.org. When the two are linked, actions taken on a.com are duplicated on b.org as my b.org identity. Friends on b.org are not made aware of the existence of my a.com identity. There are subtle differences between linking and cloning that are still being worked out.
Profile forwarding: Works just like email forwarding. I leave one site, and move to another, and at the original site, I leave a forwarding address.
I don't care as much as other people that Facebook === blue.
But, IMO it needs a bit more polish. To a designer's eye, this immediately screams "programmer-designed". You may want to hire a designer - hand them these mockups - and let them add a "designers' touch" [more padding, better typographic alignment, softer contrasts, etc].
That said - this is a big improvement over the previous design. Also, please don't feel like I am ragging on your work, just a bit of constructive criticism.
But, IMO it needs a bit more polish. To a designer's eye, this immediately screams "programmer-designed". You may want to hire a designer - hand them these mockups - and let them add a "designers' touch" [more padding, better typographic alignment, softer contrasts, etc].
That said - this is a big improvement over the previous design. Also, please don't feel like I am ragging on your work, just a bit of constructive criticism.
Not related to the mockup, but while you're looking at the thread - have you thought about making appleseed bittorrent-distributed instead of diaspora-distributed? In other words, no server at all, just a swarm of computers storing the social graph data, photos, comments etc. between them with some amount of replication?
I actually don't think that's practical, at this time. Diaspora originally started out with that goal, but quickly moved over to the same server-to-server approach that Appleseed had been using.
Just adding the required usability to allow single-users to administer a social networking instance adds a whole ton of complexity to the software. Way more than something like Bittorrent.
I think it's possible, at some point, but for now, I think a more conservative server-to-server approach is necessary.
Just adding the required usability to allow single-users to administer a social networking instance adds a whole ton of complexity to the software. Way more than something like Bittorrent.
I think it's possible, at some point, but for now, I think a more conservative server-to-server approach is necessary.
Any specific roadblocks you'd like to comment on? Pieces of infrastructure that are still too weak or anything like that?
Social spam, prevention and management. Data replication. Peer scaling and availability.
I took a quick look through the mocks and my gut tells me it's a little too ambitious for a first version. Focus on one problem real people have that other social platforms don't solve well, and do it well. Cloning facebook's featureset does not a social network make.
It's not a first version, I've been developing this for a few years now, there's around 50 sites running the software, and our beta site has around 600 users.
It's probably still too ambitious, though, but that's why it's fun. :)
It's probably still too ambitious, though, but that's why it's fun. :)
There are so many minor design improvements and "don't dos" that I'd love to share. If you are interested, I'd be up for skyping and rapidly spouting out all my feedback instead of typing it. Email is in my profile.
I love the polish. It is way too wide, though, and the left third of the window is wasted in most cases.
Looks really really really really nice. Did you design it, or did you hire somebody?
A+ Job.
A+ Job.
Thank you! I designed it myself.
All those years throwing together flyers for my friends punk rock bands paid off, maybe. :)
All those years throwing together flyers for my friends punk rock bands paid off, maybe. :)
I hate the blue. I think the UI is facebook 2.0 completely, and while I think they are well done - I think they look like a cold corporate site profile and is one of the things that I have always hated about facebook - the UI is really not that good. Sure its functional - but you cant argue that its something revolutionary.
I hate the blue.
Luckily, Appleseed is very flexible, so it's not only possible to change the colors, but to radically rearrange the layout while maintaining the functionality.
I expect many sites running Appleseed will hire designers to "brand" their site in a way that appeals to their users.
but you cant argue that its something revolutionary.
I wouldn't, actually. I think social software works best when it's pragmatic and conservative. The revolution is under the hood with distributed social networking.
Luckily, Appleseed is very flexible, so it's not only possible to change the colors, but to radically rearrange the layout while maintaining the functionality.
I expect many sites running Appleseed will hire designers to "brand" their site in a way that appeals to their users.
but you cant argue that its something revolutionary.
I wouldn't, actually. I think social software works best when it's pragmatic and conservative. The revolution is under the hood with distributed social networking.
BTW - I dont mean to take away from Appleseed or what you're doing - but I just have a gut reaction against all things facebook. I have never had an account and never will and I have a very dystopian view of what that service really is.
See my post here on the subject: http://news.ycombinator.com/item?id=2429993
I believe in social networks, their value and need - but the current execution in the area is clearly leading us down a dark digital path.
I recall when appleseed was first announced, Ill need to look at it again...
See my post here on the subject: http://news.ycombinator.com/item?id=2429993
I believe in social networks, their value and need - but the current execution in the area is clearly leading us down a dark digital path.
I recall when appleseed was first announced, Ill need to look at it again...
There are definitely good reasons to look like Facebook (which I'm pretty sure is intentional). The most obvious reason is user familiarity: people know how Facebook works and they're going to be a lot less intimidated if they've seen something like it before. However, one not-necessarily-obvious downside to doing this is that people know Facebook and know how it works, and if things look like they do on Facebook but don't behave the same then they're going to be confused. That's not necessarily a reason to change the look entirely, but it definitely is something you need to be aware of if you're going this route with your design. Another potential issue is that people really don't like change. (For an example, see your Facebook news feed any time there's a design change.) If you look similar to Facebook but not as good, you may have issues getting over people's initial reactions.
There are a lot of little details I could pick out, but I think your biggest problem right now is with spacing and whitespace. The info page, for example (http://opensource.appleseedproject.org/preview/images/info.p...) has way too much whitespace around the actual information. Whitespace can be a good thing when your content is balanced with it, but right now the whitespace is dominating the page and it looks very empty, which is not at all the impression you want to give off.
The other thing I think you can improve on immediately is your use of gradients and drop shadows. Right now they're too obvious: a little goes a long way. The design is otherwise very flat and text-based (not a bad thing!), and so they stand out a ton and look out of place. The combination of the square tabs and the very large drop shadow is especially jarring. As a first step, I'd suggest getting rid of all (or almost all: the subtle blue to white from top to bottom is working pretty well) of them. Focus on getting the basics of spacing and hierarchy right first, because that's much more important.
As a final note, the Appleseed logo in the top left is going to cause some undesirable behavior if left like that. Either the logo is going to be hidden by the edge of the window or the picture when the browser gets narrower, or it's going to cause a horizontal scrollbar. Both are bad things.
Hopefully that was at least somewhat helpful and gave you some things to think about. And like I said above, I'd be happy to give more (and more specific feedback) later in the week once my thesis is finished.