KnowBetterBen got their new other web or app design by running a design contest:
Visual (Re)Design for Online Markdown Editor
Check out KnowBetterBen's Other web or app design contest…
Center for Assessment provides support for the technical, practical, and policy issues of large-scale educational assessment and accountability programs nationwide. The Center is made up of policy, education, and statistical experts focused on improved student achievement through enhanced practices. Content area experts in large-scale assessment, like those working at the Center for Assessment, traditionally don't have the web development skills to turn their content area knowledge into web-based products. These experts are more familiar with producing content as static Word/PDF documents as opposed to HTML based documents in the browser. These experts are the target audience of the Literasee platform. The platform aims to empower these experts in three ways: __Create:__ To create engaging and compelling web-based content while minimizing the hassle of programming tools and environments. __Collaborate:__ To collaborate on the development of such content by using GitHub as a backend allowing for distributed content creation as well as the "forking" of work one wants to build upon __Communicate:__ To communicate the content developed through the web through the use of Literasee and social networking
What's your vision?
Note: This brief is attached as a PDF, which has better formatting and working links. A zip of screenshots is also attached. Literasee (https://www.literasee.io/) wants to be Medium (https://medium.com/) for Explorable Explanations (http://explorableexplanations.com/). Allowing content area experts to create explorable explanations in their area of expertise while requiring a minimum of programing. Literasee is an application that allows users to create and edit web-based content, and then make that content available in two ways: __Report:__ The report is a web-page showing the content. (https://view.literasee.io/literasee/Basic_Literasee--Mathematics/report) __Presentation:__ The presentation is a slide-show presenting the content in a presentation fashion. (https://view.literasee.io/literasee/Basic_Literasee_Mathematics/presentation#/) At a high level the app has two modes: edit mode and view mode. Editing is only available to authenticated users, while viewing is available to anyone. What is meant by authenticated users? **Literasee uses GitHub as the back end for most of its functionality,** so authenticated users are those who have granted Literasee access to their GitHub account. This allows Literasee to read their profile data, create and edit repositories and files on their behalf, etc. This also means that **Literasee projects are actually GitHub repositories behind the scenes**. TASKS FOR THIS CONTEST: Refine the design of 2.5 existing screens and design 2 new screens. SCREEN 1: PROJECT LIST VIEW The app landing page http://literasee.io/ and any user's home page http://literasee.io/someusername contain a grid of project links that display the project name and a thumbnail of the project. The existing design is nothing but this project grid, which is not sufficient. For anonymous users (those who have not connected their GitHub account) the project grid will display featured projects as chosen by us, but we want to display content above the project grid that explains what Literasee is and encourages them to connect their GitHub account and start creating content. This could be in the form of a hero image with some text and a button but we're open to ideas. For authenticated users we can make the top of the page more functional. This could be displaying their recent projects, recent or popular projects from other users, etc. The project grid in this case would be all of their Literasee projects. Lastly, the project grid probably needs a header to communicate what is being shown and a way to search/filter the projects. The header options would be Featured Projects, My Projects, Some Person's Projects, etc. SCREEN 2: PROJECT EDITOR The project editor is the biggest piece of the app. You can think of it as being similar to sites like JSBin, Codepen and the like in that it provides code editing capabilities as well as previews of the output. These functions are currently shown side by side, but we want to move away from that due to challenges around updating the previews in real time. Users will probably need to toggle between edit and preview modes. As mentioned previously, each project can have two output types. Reports are standard web pages with integrated graphics, while Presentations are slideshows, currently rendered with Reveal.js (http://lab.hakim.se/reveal-js/#/). Both types of output are authored in Markdown. We would like to explore the addition of some simple WYSIWYG controls, similar to what GitHub recently launched (https://github.com/blog/2097-improved-commenting-with-markdown). The editor also allows the user to maintain a list of keywords for the project. These keywords are used to enable search and aggregation of similar projects. SCREEN 3: PROJECT VIEWER HEADER When you actually view a report that someone has created in Literasee, their content is the star of the show. Just like Medium, we have implemented a small header that gets out of the way until you need it. SAMPLE PROJECT LINK The header provides links for viewing the source of a report, viewing the author's GitHub profile, and sharing the link on Twitter. We want to retain the current functionality of the header, but make it look better. SCREEN 4: NEW PROJECT WIZARD (NEW SCREEN) When a user initiates the creation of a new project we need to gather some information from them. The user must provide a project and author name, select a license type, and select a report layout type. This could be implemented as a separate screen or a modal. SCREEN 5: PROJECTS ADMIN (NEW SCREEN) By default, Literasee will display all of a user's repositories from GitHub. For active GitHub users, most of these repositories will have nothing to do with Literasee and will not be compatible. As a result, we want to provide a screen where users can mark GitHub repositories that Literasee should ignore. Once ignored, the repositories will not be shown anywhere in the Literasee app, other than the admin screen. Since the repository list can be extremely long, items that have already been marked as ignored should probably be in a separate list below non-ignored items. The admin screen may house additional functionality in the future.
Due to the relationship the app has with GitHub we'd like the styles to feel related. Use of their icon set and/or CSS framework would be great. Sketch or Photoshop comps are acceptable deliverables, but assets like HTML and CSS fragments would be phenomenal. If you intend to deliver comps please ensure assets are properly layered and named so they can be extracted as needed.
Every design category has flexible pricing for all budgets. Other web or app design starts at $599.
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 other web or app design.
Designers across the globe delivered design magic.
KnowBetterBen 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
Along the way, they met lots of talented designers…
We think contests are a super fun way to get design.
Recently completed contests:
We are an expert and trusted education consultancy in placing overseas students to some of the world’s prestigious Engli
After-School Program for Elementary through Middle School Students-- Our target audience is parents who are looking for
Gamers and businesses, ages 18-40, mostly male. We sell both custom gaming computers and custom business workstations.
Benephactor is a platform that allows content creators and influencers to receive regular payments from their audience.