Sublime Forum

New Website Preview

#5

The Coda homepage only work in a couple browsers. It works in Safari and mostly works in Chrome. This being a cross platform editor it should work on all platforms. I think the video/slides displaying Sublime Text 2 are good. I do think having a features list in text is important. A lot of people scan pages looking for those details and expect to see them.

0 Likes

#6

@BestGreek: i guess you make some confusion in „works in a couple of browsers” and „look the same in a couple of browser”.
Coda site is perfectly usable even in IE8 :smile:

0 Likes

#7

I don’t know if you are planning on releasing a visual refresh of the design in addition to the content changes, but I think for version 2.0 it would be well worth it. Now, I’m not saying you need to completely change the branding of Sublime, but the I feel some fairly quick tweaks and changes could make a big difference.

Here is some content feedback on what you have so far:

  • Move the download link up above the folder, perhaps to the right of the intro text

  • Change “code, html and prose” to “code, markup and prose”

  • Add content to the intro sentence about speed/performance: (e.g. Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.)

  • Increase the contrast of the selections at least in the multi-select example (1/6). The light gray is hard to notice what is changing in the graphic.

**Additionally, I think it would be wise to add some more in depth content at the bottom of the page talking more in depth about other features and functionality. ** Your homepage is the only place you really talk about what the editor can do, so it would be nice to take more of the long-form approach that has become popular on the web over the past few years. Basically start with what you have and then get more detailed the farther down the page someone scrolls. This allows users to just download right away if they want to, or if they are more inquisitive, they can read some more and learn why they should try it out.

If you aren’t currently planning on doing a visual refresh, I do have some comments about the current design that I think may be useful. I’d also be happy to follow up via email.

0 Likes

#8

[quote=“iamntz”]@BestGreek: i guess you make some confusion in „works in a couple of browsers” and „look the same in a couple of browser”.
Coda site is perfectly usable even in IE8 :smile:[/quote]

I think what I was thinking of is when I checked the site in IE7 (Work computer) and it looked pretty bad. I’m not sure but since launch day they might have touched up some of the browsers to look better then they had. For panic it makes sense to not worry about non-mac browsers since their product is only for the Mac.

0 Likes

#9

The animation is too slow, and the progress bar is distracting. My eyes are drawn to it, and I miss the subtle text editing animation.

I don’t think you need to animate the features, just a carousel of the features would be better.

Here’s a good, simple app site: http://macrabbit.com/espresso/

0 Likes

#10

Well, I guess using a 6+ years old browser come with it’s downsides. You don’t expect sites looks perfectly in older browser, no? Because i can bet coda side is looking awful in safari 2 :smile:

Ok, enough rambling about browsers :smile:

0 Likes

#11

The animation looks great. Piggybacking off @wbond’s great suggestions, I have a few ideas of my own.

  1. The animation paginator thing should be more friendly. Instead of just having 1 of 6, why not take up more space and give a small thumbnail and title to each of the highlighted features. That way, people aren’t just blindly stalled watching the animation and instead can see the content they’re interested in.

  2. People have become lazier when it comes to websites. They want the homepage to tell them everything they need to know. Don’t be so reluctant to talk about all your work. Exaggerate. Be more grandiose. Talk about every feature as if it’s a work of art. Mention the “super intelligent autocompletion” and the "incredibly powerful and flexible API)

  3. People love colors. The coda website is bombarded with colors and gradients. Obviously you’re not trying to attract the same crowd, but the same ideas apply. People are like cats; they are attracted to bright and shiny things. It’s not just OSX applications that have taken this approach. Git recently redesigned their website: git-scm.com/

  4. Where’s the icon? You shelled out for a brand new icon but I don’t see it anywhere. Even the favicon is the old icon.

  5. Update the navigation bar and lose the grey gradient background. It feels old-fashioned.

Sorry if I was ripping apart your work. I just really like giving constructive criticism. Hopefully you’ll consider my suggestions. Keep up the great work!

0 Likes

#12

I see where you’re going with it, but I’m with wbond. It could really do with a proper refresh. I don’t know if it’s just me, but the grey to white gradient is ageing and kind of “dirty”.

And carrying on from the above, the slider isn’t working (not literally) I was stuck watching it repeat four times before I actually realised I can change slide. You really should make a more “Web 2.0” website, fresh, clean, new, exciting.

Most app websites now feature the homepage as the place to go to know EVERYTHING about the product. You should do this.

0 Likes

#13

Btw, You could also list some plugins there, like Package Control, SFTP (even if is a paid plugin), Zen, Git, SVN etc.

0 Likes

#14

[quote=“iamntz”]Well, I guess using a 6+ years old browser come with it’s downsides. You don’t expect sites looks perfectly in older browser, no? Because i can bet coda side is looking awful in safari 2 :smile:

Ok, enough rambling about browsers :smile:[/quote]

I was only mentioning IE7 (work computer) because its an example of what some people are stuck with. Luckily I use a Macbook Pro at work (if you want a good computer buy it your self) My point was your web site should support the browsers of your target audience. If your product is cross platform then it makes sense your website works correctly on the same platforms.

I would bet a good number of Sublime Text 2 installs are still on Windows XP so at the least it would make sense to support IE8. Doing a graceful degradation is fine like if video tag isn’t supported falling back to flash etc… I was only trying to point out on launch day the new Coda 2 site didn’t work on all browsers so its not the best example of how to display a product that is cross platform. For Panic its totally fine they are Mac only.

0 Likes

#15

IMO the feature animation should autocycle, I didn’t realize there were more features to watch at first.

Also I didn’t know that you could type “file@func” as a single step, that’s awesome!

0 Likes

#16

It does, but for some reason, the first feature plays twice.

0 Likes

#17

I think the features playing twice is important - its hard to understand what’s happening at first.

In fact, what I think would really benefit this is for someone to create some hand made animations to REALLY illustrate what the editor can do. We can all watch those animations and understand what’s happening because we’re familiar with it already. I’ve had people here at my desk watch me show off some features, even while I explain it, and they don’t immediately grasp what’s happening.

I’m not proposing the simplicity of a cartoon - but there should be a better way of showing off what’s going on to someone who’s never used ST before.

0 Likes

#18

ST2 being such a keyboard paradigm I think demo should show key presses as they occur.

Perhaps something like Screenkey: http://www.youtube.com/watch?v=2GqCu0wI-hc)

0 Likes

#19

I would make them mini-screencasts rather than just visual animations. i.e. have a voice-over that quickly notes what will be shown before showing it. As it is just now, people will have to read the bar at the bottom while other stuff is happening and it’s a bit “help! flashing things… what’s going on?”.

Glad to see you’re closing in on the launch. You’ve got a great product on your hands!

0 Likes

#20

Something like Coda 2’s new preview video would be awesome!

0 Likes

#21

I would really prefer something like this, for example: opera.com/addons/

All the main features presented should be listed on the side. Clicking them, or just hovering, can run the animation (although personally I think such animations are pretty hard to follow unless seen few times).

0 Likes

#22

I’d echo some of wbond’s and cod312’s impressions but put a different take on some of that:

  • I would keep your own slightly subdued take on design, but recast the page is a single page app and brighten it up a bit.

  • Panic’s Coda 2 page is over-the-top Mac, promises quite a lot, and has become annoying with pointlessly big eye candy. Textmate’s page is a little text-y, more like a blog post, and like an Apple page from 2007. So these aren’t great models. I’d guess the Textmate audience is more like yours than the Coda audience.

  • I suspect you use the gradient to give texture to the page. I might freshen the design by maybe creating a speckled beige or yellowish background. The speckles might use your brown or might be an orange, blue or even a green. Think a very subtle stone.

  • I’d keep your big claim text right where it is – above the animation – but use color or bold a few key words. Also I’d refashion the text to say:

(I’ve repeated two ideas from someone else there.)

  • I might then go on to have a 2 x 2 or 2 x 4 grid beneath the animated image viewer with big text to highlight whatever you think your big advantages are. Maybe it’s Selection and Navigation; Find and Replace; ecosystem of plugin developers, etc. If you do the texture idea above, you might put a white or other light background behind this grid, making it about as wide as the animation’s container.

  • I’d adjust the animator quite a lot. This one is changing the geography of the page as the explain text grows or shrinks. Fixing the height of that text area might solve that, as would controlling the volume of text. I’d also want the “where am I” indicator to be more in the center, toward the bottom, with left and right arrows or nice, big next/previous affordances. I think I’d also work with the text; each rotation shows a major claim followed by an explanation: I might make the big claim bigger than the elaboration. This goes for the other spots on the page, too, where I think you could add a little more variability in text sizing and coloring to enhance the interest and appeal, just to move the eye around the page. I might also put the animation in a bed of something – something with curved corners to soften the dominance of right angles.

  • I agree with someone else that the download button might be moved up top. You might left align your big claim text, and let it flow maybe 2/3 - 3/4 across the width of the animation. Then maybe slide a “Try it now for {OS}” button, a little turned up from yours and with a less heavy border but keeping the curves. you might be able to add enough smaller next beneath the big Try it now text that you either won’t need the license footnote, or maybe you use something like a panel that opens when the button’s clicked, now showing the footnote and the other platform option.

  • Your design aesthetic prefers subtle shades within a nearly monochromatic palette. I can see it in both the site design and in the editor. That’s cool, “let Jon be Jon,” to paraphrase. Your claims for the editor sit comfortably within that sensitivity. Still, with just a few nods to curves and selected punches of bright color, I think you can keep your message but also enhance “the cool” that’s in the editor. I make that claim both for the site, and for the editor – some of the recent theme work does just that.

0 Likes

#23

Seriously, hire a pro designer and let them do the job it will have a much greater impact for the launch!

0 Likes

#24

I think u could ask for someone in this forum to do that for nearly nothing(maybe a free license…)

now my personal consideration from an insider…

  1. The home page is the most important part of a site. I think that u should fill it with a list of major functionalities and highlights
  2. Use all the incredible reviews and opinins from the guru of this sector…like jeffrey way from nettuts who uses ST for all of his tutorials
  3. image and slideshow/videos are attractive but what makes sites it’s the content, so add every written content u think it’s important for this awesome editor
  4. make more visible the references (actually i don’t know either how much they are and how to properly use it) this will increase users but mostly developers to develop new and awesome theme/ scheme/ plugin
  5. abuot design only I suggest to make a site builded on a full width structure with grids. this little tricks it’s a simple but great step forward for all sites that wants to take part of the so called web 2.0

just side notes about else
community and consequently ST users love developers that aren’t nearly invisible…try to update more often the blog, let it be a great hub between users and you. don’t forget about twitter
advertising in this positive way will make this community bigger and bigger with major obvius income for you XD

ok my 2 cents of u want more advices/ moral support XD just ask

Fed03

EDIT: just remebered…find an incredible logo(ok i don’t like this one but it’s my opinion) and build the site around it. every company, every serius software has a strong logo that immediatly remember about the subject. make it visible but inobtrusive. I assure u that the visual impact wil be better than what u may think^

P.S. sry for my bad eng^

0 Likes