Analysis of CodePen Interface
For the average web user, CodePen is a pretty much useless site, other than for browsing the cool things that users post. However, for web designers and web developers, this website is a hotbed for inspiration and coding assistance. An average user, perhaps a student who just got into coding, can sign up for a basic account for free, which gives them access to the use the code pen interface, create a profile, and comment on other “Pens” throughout the community.
Once you venture into the more advanced packages, however, CodePen becomes a much more powerful tool. “Pro” and “Super Pro” paid accounts allow the user access to unlimited Pens, live viewing as they code, collaborative projects, professor mode for teachers, up to 5GB of hosting, and much more. These bonus packages make CodePen an excellent website for designers, developers, and professors. The actual interface of sign-up is very simple, adding to the overall “modernity” of this website. They only ask for the bare essentials, which would certainly please many busy web designers.
The home page for CodePen is simple, sleek, and well-organized. A top navigation bar features the CodePen logo, as well as button for “new pen”. Below the first navigation bar is a second navigation bar, which can then be used to sift through the various Pens throughout the community. The navigation options are simple, yet effective; again, I believe CodePen was trying to make their website as simple and modern as possible, while still giving it a techy, creative feel. The navigation options include “Picks”, “Popular”, “Recent” and “Tags”. This may be one of the first constraints about CodePen; in going for a simple approach, they left some aspects to be desired. With only four categories to choose from, it may take a user sometime to find a particular Pen that may not be easily found using tags or search terms.
The “Picks”, “Popular” and “Recent” pages all use the same page layout, which is pretty simple to navigate. It features a grid-like structure, which displays 9 previews of Pens per page, with an arrow at the bottom of the page to see the next 9. Each preview is a small block that features a small picture of their coding results, as well as their username, the number of comments, the number of views, and the number of “hearts” which is the CodePen equivalent of a Facebook “like” or Google+ “+1”. A hover over the preview gives the Pen’s name, as well as a short description of what the coding is made for. This is a very encompassing way of browsing the website, as it gives you almost all the information (except the code itself) in the preview. As stated before, busy web designers and developers would surely like this approach, as they get all the information they need in one quick hover over the preview.
CodePen also features tags and search options for a more precise method of finding Pens. An aspect of this website I really enjoy (and I think is extremely effective) is the “Tags” page. 100 buttons line this page, each a small rectangle with the name of the tag on it. They are aligned forming a giant box, and the most popular tags start at the top left and then goes to the right down the box. The cool thing about this is that the entire box is color-coded; the deep red is the most popular, and the colors slowly change hue all the way until a pale bale at the least popular. This color-coded method of formatting the tags is extremely handy; it allows a user to visually and linguistically observe the most popular tags, while also including a unique spatial component (the giant box of colors). This table might have also been made like this because it’s a beautiful example of what coding on the web can do, which is what CodePen is all about.
Another very unique aspect of this website is that it almost works as a form of social media. It’s comparable to social media like LinkedIn with the fact that your “profile” displays, most likely, professional work. Users can follow each other, organize a showcase of work, and “heart” and comment on others’ work. Profiles are simple in layout and can work as a portfolio of sorts, including a picture to be used as an avatar.
The website works on a mobile version, though everything is very constrained and it involves a lot of scrolling. Unfortunately, this website is pretty much useless on a mobile version since typing code on a phone is extremely tedious. However, since the mobile version still includes all the same features as the laptop version, it could theoretically be used for small, quick changes to code on the fly. This interface is most definitely made for use on laptop, while a tablet may also suffice but be a bit slower. For simultaneously writing and editing three web languages, a decent sized screen is needed. While this is definitely a constraint of the interface, I don’t think it necessarily takes away from what CodePen does. Coders would never really need to use a mobile version, since the task of coding involves making many keystrokes, something not quickly done on a small phone.
Overall, the CodePen interface is sleek, modern, and easy to use. Its simple design compliments the simple idea of the website. It’s a great website for designers and developers, who are most likely the only users of the site; it’s advanced genre limits the amount of people who want to use it. Its affordances include easy navigation, convenience, professor perks, collaboration, community, and a wide use of spatial, linguistic, visual, and gestural elements. The website’s constraints include its difficult mobile version, the lack of instruction for those completely unfamiliar with web languages, and more-advanced features only available to paying customers.