81

A website dedicated to a website deconstructions. New post every week, you're in charge.

6 years ago from , Front-end web developer

Thinking about launching a brand new website purely dedicated to a website deconstructions.

Similar to this, this or this.

The Idea

  • EVERY WEEK a new deconstruction
  • YOU NOMINATE a website for deconstruction
  • if approved, it will be in the NOMINATION section for 1 week
  • YOU VOTE on what's next
  • the site with the most votes is NEXT UP

Let me know what you think about the idea and feel free to suggest a website for the initial deconstructions.

Thanks DN, you rock!

51 comments

  • Todd BurtonTodd Burton, 6 years ago

    I really think this is a great idea. As someone who is just getting their footing in the HTML/CSS world, this would be an awesome resource.

    11 points
    • Petr Tichy, 6 years ago

      Thanks Todd. I guess JavaScript code wouldn't be something you would be looking at?

      0 points
      • Todd BurtonTodd Burton, 6 years ago

        I feel like that's the next logical step as I continue to learn more, so I'm sure that's something that would also be useful.

        0 points
  • Joseph FelicianoJoseph Feliciano, 6 years ago

    I think that would be really interesting to keep checking back on. Makes me think of the curated showcase sites but with more of a purpose and something you can learn from.

    I say go for it !

    3 points
    • Petr Tichy, 6 years ago

      Thanks Joseph, the idea is to deconstruct the best and the most interesting websites out there and learn something new on each of the deconstructions.

      1 point
  • Vinh LeVinh Le, 6 years ago

    go forth

    2 points
  • Aaron CalzadoAaron Calzado, 6 years ago

    Just commenting to read this later. Is there a bookmarking/save feature for DN?

    1 point
  • Joel CalifaJoel Califa, 6 years ago

    I'd love this. If you need someone to do the design part, let me know :)

    1 point
  • Andy SmithAndy Smith, 6 years ago

    Sounds like a great idea. Would you be looking at UX, UI or the code behind it or all of the above?

    1 point
    • Petr Tichy, 6 years ago

      Thanks Andy, I am a front-end developer and my passion is to deconstruct the HTML, CSS and JS code.

      That's how I learned most of the stuff and I think others would learn from it as well.

      0 points
      • Hugo LeloupHugo Leloup, 6 years ago

        Then maybe you could team up with someone who would tackle the design ? I think your idea could really benefit to designers either. But that's just a suggestion. Great idea anyway !

        2 points
        • Petr TichyPetr Tichy, 6 years ago

          Thanks Hugo, I would definitely need to team up with someone who would tackle design, great suggestion.

          1 point
  • Coulter PattonCoulter Patton, 6 years ago

    I think this is a great idea.

    When you're a beginner, it can be really hard to understand how everything fits together.

    I like the idea of having an official breakdown, but also allowing a discussion to form where designers and developers can talk shop about the site.

    1 point
    • Petr Tichy, 6 years ago

      Thanks for the feedback Coulter.

      Great point about the discussion between designers and developers. We all know how important it is especially these days.

      0 points
  • Kyle DeckerKyle Decker, 6 years ago

    Yes, please! I'd love something like this.

    1 point
  • Jamie WilsonJamie Wilson, 6 years ago

    Would really love this! I keep meaning to dig around thenextweb.com. I really like the way they've handled their breakpoints and navigation.

    1 point
  • Petr Tichy, 6 years ago

    Thanks everyone for the feedback. Here's a quick update.

    The landing page is up and site build is in the process.

    Visit and sing up here: websitedeconstructions.com

    Let me know what you think and If you would like to contribute, get in touch.

    0 points
  • Katharina ClasenKatharina Clasen, 6 years ago

    Sounds awesome! Could you write an update post when the site is online? I don't want to miss anything ;)

    0 points
  • Christopher SciollaChristopher Sciolla, 6 years ago

    Petr, I say go for it. I think this is a great idea and many people of all skill levels would benefit. If nothing else, you will learn a ton!

    Good luck!

    • Chris

    p.s., if you'd like help, ping me!

    http://twitter.com/csciolla

    0 points
    • Petr Tichy, 6 years ago

      Hey Chris, thanks for the comment. It would be great to put together a team of front-end developers for this.

      I will be in touch in the coming weeks.

      Cheers P.

      0 points
  • Dan MalarkeyDan Malarkey, 6 years ago

    Sounds like a great idea!

    0 points
  • Manoj ManiManoj Mani, 6 years ago

    I think it would be great to even add some thoughts from the original designer on their process. Just so that we understand the real reasons behind the designs instead of just deconstructing. Great idea though!

    0 points
  • Cihad TurhanCihad Turhan, 6 years ago

    Cool, I have some nice websites which will be entertaining to deconstruct.

    0 points
  • jacob weberjacob weber, 6 years ago

    I think this is a great idea!

    0 points
  • Marcos MejiaMarcos Mejia, 6 years ago

    I think this is an excellent idea. I would also even go as far as to contact the website creators and get a small summary of their approach towards constructing the site itself and their challenges.

    0 points
  • Casey BrittCasey Britt, 6 years ago

    This sounds like a good idea, but make sure you stick to it.

    "Announcing your plans to others satisfies your self-identity just enough that you're less motivated to do the hard work needed." http://sivers.org/zipit

    0 points
    • Petr Tichy, 6 years ago

      Thanks Casey.

      You don't know me.

      Petr, the guy who hates tomatoes, does what he says, but thanks for the extra motivation:)

      ihatetomatoes.net/blog/

      0 points
      • Casey BrittCasey Britt, 6 years ago (edited 6 years ago )

        I don't know you. but I dig the blog :D

        I only bring it up so that you're mindful of it. I think many people post up/tell friends about ideas like this and after getting all the pats on the back for the idea they're less motivated to do make it happen. I know I've been guilty of it.

        Anyway, you got the RSS follow out of me. Looking forward to more deconstructions, as you call them.

        1 point
        • Petr Tichy, 6 years ago

          Thanks Casey, you will be the first one to know about it.

          Launch date: 3rd November:)

          0 points
  • Mark MyersonMark Myerson, 6 years ago

    Definitely do it Petr. It would be particularly useful for an early-stage learner of UI like me.

    Also, if you decide to go ahead, post the mailing list here — wouldn't want to miss your launch :)

    0 points
  • Dan BerkoDan Berko, 6 years ago

    Sounds like a great idea. I'd really be interested to see a breakdown on The Verge. It'd be a bit of an endeavor, but I'd love that one.

    0 points
  • Kyle CaseKyle Case, 6 years ago

    I'd also love this.

    0 points
  • Daffy KyleDaffy Kyle, 6 years ago

    Think that's a really good idea but there should also be a 'how could they have done this better' kind of discussion area. I love looking at new website designs and thinking from a UX perspective how certain things may have been done better.

    0 points
    • Petr Tichy, 6 years ago

      Nice one Daffy, I will review all the suggestions and see what makes it in.

      Thanks for your comment.

      0 points
  • Isabelle LepezIsabelle Lepez, 6 years ago

    Great idea!

    0 points
  • Owais FarooqiOwais Farooqi, 6 years ago

    wow love the Sony website

    0 points
  • Taylor Van OrdenTaylor Van Orden, 6 years ago (edited 6 years ago )

    I've been sorting through this front-end code / design on and off for an hour now. It's not perfect but man...it does some cool stuff!

    http://vintageproductions.eu/

    Still on my list of unanswered questions:

    1. How did they do that animation on the homepage? (A: it's a video - not a gif or css3/js animation)

    2. Why did they chose video over gif? Can you even make gifs that long / high quality? I think you can? Maybe not? Could you hypothetically do that as a CSS3 animation?

    3. How did they get the color of the video on the homepage to perfectly match the web background? Red is an insanely fickle color, especially when moving from different programs. Print / digital / video / compression / conversion to mp4 / webm etc.

    4. Is there an A/B test on click rate for the case studies? If so, is the click rate down at all due to the highly entertaining red box that follows your cursor?

    0 points
    • Jesse DobbelaereJesse Dobbelaere, 6 years ago

      Interesting website! I live nearby but I've never heard of them. I can't answer your questions, but I do know that I've seen those animations on Codrops:

      • The red box mouse hover thingy is inspired by this codrops demo
      • The detail page of a case loads with a stretching box effect. I think they got it from this codrops demo (lazy stretch).

      It's weird that they used video on the homepage. I've seen some cool animations with canvas, like on this one-page website. They use PNGVideo which seems like a better solution than using animated gif.

      2 points
  • Jonathan ShariatJonathan Shariat, 6 years ago

    Deconstructed how? Its front-end code? or more from a design perspective?

    0 points
    • Petr Tichy, 6 years ago

      Great question Jonathan.

      The idea is to deconstruct each site from a front-end code perspective - HTML structure, CSS techniques and JavaScript.

      That said even designers could learn from the visuals and see how the sites are put together.

      Let me know if you have another questions.

      2 points