Redesigning a preferred interface is an effective way to enhance your expertise.
Whether or not you wish to hone your mockup design expertise or craft your frontend prowess, a elaborate redesign is a strong observe challenge.
It’s simple to go looking Dribbble and discover tons of web site redesigns as static photos. Nevertheless it’s not really easy to seek out comparable redesigns in code.
That’s why I took a dive into CodePen’s archives to seek out these 11 customized interfaces that reimagine well-liked websites. You’ll discover designs for Twitter, IMDb and even a couple of different notable web sites you would possibly acknowledge.
Google Search Redesign
See the Pen Google Search (Customized) Redesign #2 by max (@vm187) on CodePen.
The notorious Google search web page will get billions of impressions per day. Truly 3.5b per day, to be actual.
In order that web page wants a design that’s on-point. If you happen to’re redesigning one thing, there’s a little bit of room to have enjoyable with it and that’s the thought behind this pen.
It’s a easy Google web page redesign focusing simply on the search enter subject. It includes a vibrant, colourful button with drop shadow results that you simply’d by no means see from Google’s design staff.
The result’s a enjoyable solution to reimagine search.
See the Pen Gmail Software by Kenny (@ispykenny) on CodePen.
Google followers will in all probability get pleasure from this reimangined Gmail in the same vein because the final pen.
However this one includes a full Gmail interface – so it’s a bit extra detailed.
Clicking by the sidebar animations, you’ll discover that they actually do animate easily. To not point out the smooth materials design shade scheme.
If you happen to’re a frequent Gmail consumer, you could even want this redesign over the present type.
Google Branded Redesign
See the Pen Google Redesign by MohamadReza Deylami (@imohamad) on CodePen.
Right here’s one other Google redesign I needed to throw in. This one’s a bit extra detailed with hyperlinks for Google’s complete set of instruments.
This pen by Mohamad Reza Deylami includes a redesigned Google brand, altered shade scheme and hyperlinks to all of their totally different search options.
I believe it’s a bit extra advanced than the present web page – so I wouldn’t take it over Google’s design.
What I do like about this redesign is that it’s distinctive and it stays true to the Google type. Oh and all of the code is open supply, too.
See the Pen Twitter UX by Calin (@CalinM) on CodePen.
Twitter has a bunch of UX options spanning their desktop and cellular interfaces. One well-liked design type is the cardboard interface, which you’ll see on this pen.
It’s a reimagining of Twitter’s UX with a smaller card design.
This features a scroll bar together with buttons for enhancing your profile. And once you scroll down, there are even placeholders for the tweets. How cool!
Trendy Twitter Redesign
See the Pen Trendy Twitter Redesign by Gibbu (@Gibbu) on CodePen.
Now for one thing a bit extra technical, have a peek at this Twitter redesign.
This factor is monstrous and it actually does flip the Twitter interface on its head. I really suggest finding out the design in full view to see the way it seems to be in your browser.
I like the menu, love the timeline and actually love the straightforward hover/focus results. The one factor lacking? This isn’t a responsive web page.
However in all equity, Twitter does have a mobile-specific structure apart from the principle desktop design. In order that they deal with cellular customers in a different way, too.
See the Pen FreeCodeCamp homepage redesign by Giana (@giana) on CodePen.
Builders love FreeCodeCamp for its infinite assist of recent builders and for its pleasant method to charity.
CodePen consumer Giana should actually love the positioning since they created a full redesign of the FreeCodeCamp homepage.
I can’t actually say if it’s a greater or worse design. It’s superior in some ways and in addition very totally different. It’s price a look when you’re acquainted with the unique structure.
Spotify Artist Web page UI
See the Pen Spotify Artist Web page UI by Adam Lowenthal (@alowenthal) on CodePen.
The Spotify net structure is one other widely-known interface and Adam Lowenthal took it upon himself to recreate the Spotify artist web page.
Many of the options don’t absolutely work – so you’ll be able to’t stream music. However the precise web page components are actual, so you may copy/paste this code to combine up your individual HTML audio participant.
Plus, the entire thing is cellular responsive. In order that’s good.
Unsplash Redesign Stuff
See the Pen Unsplash Redesign Stuff by Kyle Shanks (@mavrK) on CodePen.
I can’t say that this redesign of Unsplash is best than the present homepage. However I do assume it’s a artistic reimagining of how the structure may look specializing in a distinct construction.
This pen nonetheless has the identical grid system however developer Kyle Shanks additionally locations a concentrate on the e-mail seize field and the dropdown navigation menu.
It’s tremendous clear and tremendous simple to transform when you’d wish to edit this on your personal web site.
See the Pen Redesign idea IMDB sequence web page by Joanez Andrades (@JoanezAndrades) on CodePen.
Not all the things on this IMDb redesign is purposeful. That’s the draw back right here.
However the upside is that this design actually seems to be spectacular. It’s completely phenomenal and would in all probability work nicely as a web-app for touchscreens.
Take a peek on the full view to essentially see the way it all comes collectively on the web page.
See the Pen LinkedIn Redesign by Nahom Ebssa (@enahom99) on CodePen.
Through the years, LinkedIn has cluttered their structure with so many additional options. I’m actually a fan of minimalism and that’s what I see on this redesign by Nahom Ebssa.
Easy colours with an easy-to-use interface. Many components even borrow concepts from the fabric design language.
Granted, the structure doesn’t appear 100% completed – however I believe it’s a very nice template.
In order for you some HTML/CSS/JS observe, perhaps fork this one and take a look at including your individual options.
See the Pen YouTube redesign idea by Dino (@dinocam) on CodePen.
For an additional design that’s not completely finished (however nonetheless seems to be wonderful), I’ve to suggest this YouTube redesign.
Not one of the hyperlinks or buttons work – so it’s not usable. Nonetheless, this can be a sensible try to deliver YouTube’s design ahead with a way more centered UI.