Vaclav Slavik got their new web page design by running a design contest:
New beautiful site for a popular translation app
Check out Vaclav Slavik's Web page design contest…
Poedit is a popular and widely used freemium desktop application for translating WordPress and many other programs; this is its site. Target audience are (mostly non-technical) translators and to lesser extent developers. The app is for Windows and OS X, with more customers (and thus emphasis) on the OS X side. There are two versions: the free one and PRO, which can be purchased in-app.
I prefer lighter, look with plenty of whitespace (I link to some examples, I consider the Things and Alfred ones in particular great). Not as flat as e.g. Windows 8 look, but close (see e.g. the Evernote site). The main page probably should have some decorative background related to the app icon or the purpose (translations).
### Main Page ### Here, the primary goal is to convince the visitor to download the app. To this end, it needs to describe the benefit and offer easy way to download. Pretty much all application sites use the same structure that I think should be preserved: the page's title is app name ("Poedit") with a tagline under it ("Gettext Translations Editor"), with careful typography. Then a short description, followed by more details, screenshots, quotes etc. Notice how all app sites I linked to and many more always use application icon. I don't think it's necessary to use the exact icon (on the contrary, its current form doesn't work well in huge sizes and would need to get a "facelift"; something I'm open to if needed). But the icon is the only visible app branding and the site should evoke some connection with it. For example, the icon, or a more stylized illustration of the icon, or some elements of it, for use in background (see Tower) or foreground (see Versions). E.g. the three foreign characters (without the tablet/desk underneath) are already used for Poedit documents. - There should be a prominent download button. It should say it is free download and indicate the current platform (autodetected), plus OS version requirement (e.g. OS X, 10.7+). Below it should be a small link to other downloads for other platforms. See linked SourceTree site for a button that does that. - Main features list, described in more detail below. - An attractive block with users/reviews/tweets quotations should be present. Copy attached. I think the best way to present the capabilities is to use an alternating list of short blocks with title, description and an image - see the linked Cultured Code's Things page. The images should be screenshots where possible (attached, with names explaining the use) - not necessarily full-size ones, on the contrary: just taking the relevant part of the interface would be better (see Things again; clicking the image would show fullsize screenshot). For some parts (simple interface, for developers) screenshots are hard to find, so some related illustration/icon/image would probably work better. The WordPress section here should probably use a WP logo. ### PRO Upgrade Page ### This page is shown to users when asking from upgrade to the $19.99 pro version. It's goal is to (unsurprisingly) convince the user to upgrade, to which ends it describes the benefits — the copy for this section is at http://www.poedit.net/pro/ and I'm attaching it as well. The call-to-action button ("Upgrade to Pro") should be prominent near the top, display the price (in a way that will be easy to edit). The page is longer then screen, so some form of the call to action (either the same or different) should be repeated at the bottom too. - The supported platforms (Win, OSX) should be indicated: either with small icons (see existing page) or text. - Features list taken from the existing page, in the heading-description-picture form. I envisioned similar style as on the main page, with partial screenshots (statistics, wordpress, maybe support) or icons/illustrations like on the Things page I linked to for things where screenshots are hard to do meaningfully (support?). The WP section should probably use a screenshot here. - An attractive block with users/reviews/tweets quotations should be present (layout up to you: bottom, alongside, ...). - Small(ish) print at the end: "Free licences are available upon request to journalists and bloggers who plan to review Poedit Pro." ### WordPress Landing Page ### This page talks specifically about the benefits of WordPress support (it is a dedicated page because a majority of paying customers use WP). Copy attached. There should be prominent download button (that says it is free - "free download", "download for free" etc.), again accompanied with the link to more downloads. In an appropriate place for the Pro section (see copy), there should be a button for buying the upgrade ("buy pro", "buy pro version"). ### Download Page ### About 30% of visitors land directly on this page, so it is relatively important. Content similar to existing http://www.poedit.net/download.php (except the newsletter). There should be dominant button for the main download for the current platform, as on the main page (but without the need for the "other downloads" link underneath it, as it will be provided later on the same page). Followed by "Other Downloads" section with less prominent/smaller links for alternative downloads with short descriptions ("Windows version, for XP/Vista/7/8", "Linux/Unix tarball", etc.) - there will be two or three of them. Finally the "Open Source version..." section from the existing page. Would be nice to have current version indicated somewhere (e.g. "1.6" and a "what's new" link). ### Blog Post / Article Page ### The site will contain a basic blog (no comments, no monthly/yearly archive navigation, just next/prov). The same page template will also be used for knowledge base articles, so it should cover the basics: title, publication date, sections headings, blockquotes. ~~~ Assorted general notes ~~~ Pages that should be linked from the header: about, support, blog, download. All content-rich pages (main, pro, wordpress as well as articles) should have social sharing buttons (either stock ones from the respective sites or addthis.com etc. or even custom if the stock ones wouldn't fit your design). Header or footer should have social follow buttons (twitter, g+, fb). As the app has OS X presence, it is desirable to have the graphics files that will be used available in @2x Retina resolution.
What to avoid
Please don't use one of those macbook (or other computer) shots that are everywhere (e.g. readkitapp.com).
Don't hesitate to ask for clarification or other materials (e.g. different screenshots if you think you need them). I'll be online and responsive during work day (Central European Time).
Every design category has flexible pricing for all budgets. Web page design starts at 4.099 kr..
Full copyright with production-ready files for digital and/or print.
It all began with a design brief.
A quick, interactive guide helped them understand their design style and captured exactly what they needed in their web page design.
Designers across the globe delivered design magic.
Vaclav Slavik collaborated with designers to refine their ideas
When design entries come in, you can rate them so designers know what you’re looking for in your logo design.
99designs has great collaboration tools so you can pinpoint and capture your ideas
And then… they selected a winner!
Along the way, they met lots of talented designers…
We think contests are a super fun way to get design.
Recently completed contests:
Flagship Apps is a company which sells mobile apps (android/ios) to customers. Customers are entrepreneurs and small/med
Gender Male age 18-50 living in the United States Students - School & College Designers - Graphic/Video Professionals &
We develop software that optimizes routes. Companies who visit multiple addresses on a day with multiple staff members u
We provide full stack Wordpress development services. Our clients include graphic designers, creative agencies (branding