Web Design Workshop #17: Cold Call Radio Show
tuts workshop

Web Design Workshop #17: Cold Call Radio Show

Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, a radio show website..


Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.


The Design

Web Design Workshop #17

The link just goes to the current site. But the file included is an image of the new design I came up with after I designed the new logo. I like the colours and the typography the most. I would like the whole design critiqued. My design skills have been improving a lot over the past year and I don’t really have anyone that can professionally critique my work without bias. – Chad Gregory


Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Joe

    http://redbarradio.net/

    JUST LOOK AT IT.

    Honestly, I’m not being a dick here – Chad has has previous, let’s say “Interactions”, with Red Bar. This was a conscious decision to copy parts of a far better website (and a better show).

    • Gilbert

      This is not the place to critic content. We are criticizing the look and feel of CCR. If you can’t be objective don’t post anything.

  • samir

    very nice this template is essentialy made with photoshop?!
    and when we integratecit in webpage we’re essentially slicing images and embeded them!
    now for popular radio, isn’t it too mutch for the bandwidth!
    l have to say the design is pretty and i hope that we will a photoshop tutorial showing us how to make a design like this one
    thank you very mutch

    • asdf

      He didn’t design this himself – the design is stolen from http://redbarradio.net/

      This site will be shut down within a couple of weeks.

    • http://coldcallradio.com Chad Gregory

      Yes, this template was designed in photoshop.

  • http://designersof.com mariess

    seems a bit Red Bar-y maybe if had a little bit less Red Bar?

  • Pingback: My Stream | Web Design Workshop #17: Cold Call Radio Show | My Stream

  • Bob

    How can you offer advice on design when you stole someones great web design and pass it off as your own Mr. Gregory? I’m looking forward to your answer! Thanks!

  • Zak

    Well, you’ve started a really nice Red Bar, but if your trying to make a real carbon copy, all it needs is more red and black in the color scheme and replace the fat fuck with Mikes cartoon face, then you’ll be almost there.

    • http://coldcallradio.com Chad Gregory

      “Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.”

      Read it and follow it lol

  • Kim

    I don’t like it, it looks too much like another website that I follow.

  • Techeese

    where should I start with this… okay here it goes

    Theme Color: you may to change and add a few more colors at the same time trying to make them subtle to blend with the over all design.

    Logo: I like the design not the color and that over distanced drop shadow once you fixed your color theme, you can improve on this to make it flow with the over all design.

    Typography: it’s bad because your using the same font(HeliosCondBlackRegular) in the whole design, only changing the color and font size and what’s worst is the font your using on the whole site is bold by default. line-up your heading and paragraph. try to use one more font(sans-serif type) which is not bold by default to make it more readable not slapping users in the face with your bold content.

    Structure: why are you putting a title and link tag within the body?
    properly copyright your site.
    Presentation: read a few more css tutorials on how they work.

    view more webdesigns that is related to the site your building.

    hope this has helped you.

  • Christian

    This is a batant copy of Redbarradio.net

  • Hamid

    Hello Ian & Chadm the colors were good and the typography was cool too, but i guess it was possible to use some box shadow & transition for [an animation] on the Navigation Links [and especially that're on the button] and i think you’ve few white spaces on the sides and close to the main content of the logo.

    if you right click on your browser[ mine is FF 14 ] click on the view source, you miss some meta tags like description for simple and guys, what’s about less HTTP request if he use 1-2 [in avarage] css files instead of using 5-6 css files? Also i don’t see any copy right rules.
    gl with it Chad and i hope the comment was helpful.

    Regard Hamid.

  • Jabroney

    It’s amazing how “your” website looks EXACTLY like http://www.redbarradio.net, another (and much better) podcast radio site, which has been around for ~1.

    If you want a TRUE critique: Come up with an original design rather than steal from other, more talented people, you slobodon.

  • Pingback: Web Design Workshop #17: Cold Call Radio Show | Webdesigntuts+ | inLine Media RSS Blog

  • T

    It looks like you copied the redbarradio.net layout almost to the smallest detail. I think you should at least acknowledge redbarradio.net for their original design somewhere on the home page.

  • http://coldcallradio.com Chad Gregory

    I don’t get why all you people says its a copy of red bar. OMG! it has a sidebar next to the content area, a horizontal navigation and a live box!!!!!! oh my goodness lol

    As far as colors go I have tried other color schemes and they just don’t work.

    I know that on that there bring back group you all are a part of, told you to come here and spam this comment thread with your useless chatter.

    Like I have said before to another “critic” a guy who makes a chair doesn’t go after another person who has made a chair, they all have a seat, legs, and a back and there is only so many ways to do it.

    Get over yourselves. All your trying to do is get people mad and im sorry but its not workin’ on me. All you people do is make me laugh or “chuckle” since apparently saying it makes me laugh is copying Rob from boston lol(what a joke).

    I submitted the site to get other professionals opinions on MY WORK(lol) and I can guess that none of you are professionals in this field.

    Thanks for all the laughs guys

    • http://designersof.com mariess

      actually i am professional web designer and it’s just a blatant poor rip off of the Red Bar site…

      • http://coldcallradio.com Chad Gregory

        Sure, but your the only one that has said its a little red bar-y, this comment was not directed towards you

  • Peter

    **Header + logo**
    I think the dropshadow are a bit too much, and the wrapped banner has been used too many times in other designs.

    **the posts**
    WHY IS EVERYTHING IN CAPS? IT DOESN’T MAKE IT EASIER TO READ, AND IT IS THE EQUIVALENT OF SCREAMING ALL THE TIME!
    Caps are okay for titles, and menu options, not for text.

    I think the dark star is a bit to much (and also used too many times in other designs), the important part of the post is not when it’s been posted. Yet this is where you seem to focus on.

    There a 4 lines of icons and a lot of whitespace. I’d put the share-buttons on the bottom right, the same line as “EPISODES & COMMENTS”.

    as far as typography goes, don’t be afraid to use some more typefaces. Don’t overdo it, but just this one isn’t enough.

  • Sam

    I’d focus on three things:

    1. Hierarchy of Information
    2. Grids
    3. Typography

    Hierarchy – My first question to you would be, “What is the first thing you want a user to do when they land on your site”? I’d then go down the line and work on identifying the secondary and tertiary actions you’d like a user to take. I’d assume that you’d like users to click play and listen to the show – There should be a MUCH stronger call to action for this. The first thing someone should notice after your branding is a play button and/or strong call to action. I’d also consider flipping your sidebar over to the right side of the page – many users tend to hug the left side and may overlook primary features or get lost monetarily when scanning the site.

    Grids – Are you using any sort of grid system to design this site? You may be, but if not – check out 960.gs and use one of the Photoshop templates. This should help you align elements like the left hand side of your live stream marquee and your fist blog post (try to maintain consistent margins). Webdesign Tuts has also mentioned a great PS plug-in called Guide Guide many times: http://www.guideguide.me/ Try downloading it and setting up a baseline grid for this site to give it some vertical flow.

    Typography – As other people have mentioned, I’d try to only use your condensed font in Headers. For body copy, you might try something a bit more readable (some of the tried and true standard fonts work great for body). For future reference, body copy should almost never be in all caps. Every once in a while someone gets away with it in an artsy print piece, but for the most part, people have a very difficult time reading paragraphs of all caps text.

    Criticism aside, you have some great pieces that you’ve created. Your illustration skills look good, and with some research and polishing, you’ll have a great site. Make sure you focus on goals and objectives, wireframe your ideas, and design last! Hope that helps…

  • Noah DeFehr

    I’ll just leave this here Chad, I enjoy all of your graphic design work, and frankly the double chin suits you and the logo very well.

    http://s17.postimage.org/8lnqr25lp/RBR.jpg <– link provided by a member of the BBR facebook group

  • lisa

    Web designtuts must at least be scrutinize these contents before they get published.
    This will impact their reputation which i consider is far better than any others.
    please remove this post.

  • Gilbert Palau

    Let me start by saying I am not a listener of TBR nor of CCR. I find both types of Radio Programs, dull, boring and not part of my palate in radio listening. My attention is drawn because Mr. Gregory is being accused of stealing ideas and content from design 1 and implementing them in design 2 as seen here:

    http://i.imgur.com/BVZjf.jpg

    The Red Bar dot net: has a domain that is currently expired:

    http://i.imgur.com/JifA9.jpg

    Secondly I got in contact with Mr. Gregory and I took a look at his site and he sent me a copy of The Red Bar (since the domain is down) and I don’t see anything that tells me its a rip-off.

    In order to help Mr. Gregroy I made a side by side comparison of The Red Bar (1), Cold Call Radio (2) and a mashup of what would have been a real copy of The Red Bar (3). If you look at it closely, you will see that the only thing these two sites share is:

    1. “Cel Shaded” style.
    2. The Layout.
    3. Some of the colors but not to a point that they are blatantly used to COPY design #1.


    Comparison: http://i.imgur.com/BVZjf.jpg

    Design 1: The Red Bar . Net
    Design 2: Cold Call Radio
    Design 3: Ficticious Design based on mashing up design 1 and design 2 together.

    If I look at these two websites and I dont know they are about radio, I wouldnt honestly know what they were about. Both are easily forgettable because the content presentation is pretty bland. Theredbar.net looks like something out of a Howard Stern Show, while Cold Call Radio looks like a saturday morning cartoon show website. I see theredbar.net has the look and feel of one of those old-skool gazettes, whereas Cold Call Radio, looks like a celshaded website for an animation film.

    Neither logo is the same on design 1 and design 2. The presentation of elements like social media is completely different. It seems better readable on Design 2

    The font in The Red Bar dot Net is similar to the one I could find in a printed news paper publication, whereas the one in Cold Call radio is more plain and more forgettable.

    The grey used through out the Red Bar dot net is Hex#2b2b2b while the grey in CCR is #262626 I would say too close for comfort, but not a blatant rip off. The beige in TRB is #dad6cb, while in CCR it’s #d9cfac. The red in TRB is #a21100 and the red in CCR is #b60000. TRB uses a different shade of red that is not found on CCR at all, this is: #b02e20 while CCR uses a yellow tone #f7d403 that TBR doesnt use anywhere.

    So again the colors are a bit similar but they are not the same shades and they are not used the same through out both sites.

    The layout on both sites is pretty much the same… Starts with titling, logo / announcement presentation, menu bar, then media show, then content per date. This is very similar, but also, ANYONE running WordPress as their blogging engine, will suffer of such similarities. WordPress is very modifiable and can be turn to anything the coder wants… This being said, the fault that both site layouts is identical is on the designer. Both designers were lazy and went with the typical layout the rest of the 3,000,000 websites in the world have. If they want to strike different they need to do a departure from this structure into something completely new.

    In the end, and in IMHO, I think these two sites have some similarities but I don’t think the intent is to copy one another. I just think the designers were lazy and didnt take into consideration that the other exists and what they should do is depart from the a-typical layout that wordpress has by default and build something truly unique.

    But accusing Mr. Gregory of stealing design ideas, styles and accuse him of copyright infrigement from elements of TRB is nonesense because the elements used are not copyrighted. You can’t copyright colors, or layouts, you can copyright designs and logos. In this case both are very unique.

    I hope my review is objective enough and motivates both parties to agree to disagree on this one and simply go back to the drawing board and sketch something trully unique.

    Thanks!

    Gilbert

  • Jesse

    Everyone needs to chill. You have a bit to learn about comporting yourselves as professionals before you can begin to critique and refrain from attacking someone. If you recall art history 101, “there’s nothing new under the sun.” It has been my experience that professional web designers and developers embrace the ideas and values of open source work. Creating design & code, sharing it, and improving upon it eventually leads to new ideas and ways of solving design & interaction problems.

    While it’s fair to say Mr. Gregory may have mimicked the character of another design, he clearly did not plagiarize it. Yes there are similarities, but if you make a careful comparison of the Red Bar Radio’s design in question & Mr. Gregory’s there are more differences than similarities.

    Here’s a helpful bit of advice for everyone involved in this back & forth: http://www.ted.com/talks/lang/en/kirby_ferguson_embrace_the_remix.html

  • Jesus Bejarano

    This guy obiusly buried himself , this one of “lady gaga copyed madonna again!” situation. I feel bad for you. And the all caps answers are unprofessional.

  • http://www.dopeartifacts.com Curtis

    Doesn’t look like a rip off to me. Looks like work inspired by the already existent site in question. I suspect that a lot of the commentators are in fact the same person.

    This is a workshop, we all have to start some where. If this is a rip of redbar, then every single “corparate” site is a rip of the dozens on TF and every site with a full photo background is a rip of something.

    To Designer:

    I’d suggest going for more differentiation in your finished design. Def switch the colors up. It sounds shallow, but that’s just bad business to be this similar. If this is a school project or something along those lines, I don’t see the problem. If this is a commercial project, this is just bad etiquette to release something so similar, maybe even grounds for “trademark materials” infringement (which includes visual styles, store fronts, marketing materials, promo materials, etc).

    Logo Style, Color Scheme, and Font selection are too similar. Change at least 1 of them and you’ll be on your way to a more unique design.

    The only thing you really did differently is the layout. Everything else is a clear mimicking.

    Also:

    The bottom right box (The 1 with the white background) is very sloppy when it comes to spacing (Padding, Margins, Leading, so on).

    In the logo, put the face behind the ribbon maybe?

    Not to propagate any trends, but try some texture in your background. That should help with your differentiation problem also (Plus add some style).

  • http://www.customicondesign.com Custom Icon Design

    it’s not my style in the webdesign. too many colors and not very clean.

  • http://www.thepixelgrid.com Tom

    It seems that a large number of posters here are actually blind and/or can’t tell the difference between two varieties of apple.

    The sites ARE similar but to say that the Cold Call Show site is a direct steal from the other is a rather harsh insinuation. The vibe of the design hold some inspiration – obviously – to the Red Bar site but that’s about it. Loads of sites use heavy, block typefaces and bold colour schemes!

    Check yourselves, people.

    @Chad. It’s not a bad go, mate, but I’d look at some of the shapes you’re using. Have you stretched the rounded rectangles at all? There appears to be some harsh pixelation on some of the corners and others don’t seem to hold the same radius from box to box.

  • Crystal

    First I really didn’t see it as a blatant rip-off of the site that others have referenced, but that’s not what I’m here for, I’m going to give my feedback on the site we’ve been asked to critique.

    Now that that’s out of the way…here’s my feedback:

    1. The design seems very flat. Nothing really has much dimension. I know a lot of times we can go a bit overboard on dropshadows and gradients as designers, but I really think this would benefit from some more of those techniques. Make it a bit more visually interesting. I also think the colors are really competing with one another. The red, yellow, and even gray are all really intense, it just seems very over whelming. My eyes never really get a break.

    2. This is more of a content issue, but I’m not sure if all of those items are really “top nav” worthy. Seems like you might be able to chunk the items together to make categories so it’s a little less for the user to digest all at once because there is already so much other stuff going on.

    3. Instead of having a link to sign up for a mailing list, why not just have an input box directly on the page and save the user a step?

    4. What does the “With Chad Gregory and his friends!” section at the very top do? Is that a link?

    5. Are you going to put any other content in the left column? Perhaps you could put a “Most Recent Podcasts” section, a tags sections, maybe a twitter feed, or you could bring down the section for signing up for the mailing list. I feel like that’s unused real estate at this point. Just something to think about.

    6. I agree with what some of the others have said about the font. I think it’s fine having the title being uppercase and bold, but I really feel like you should have a less in your face font for your main content. You really never know how long these posts could be, and a long post with all uppercase is going to be very hard to read and overwhelming (plus it’s the internet version of screaming).

    7. Also, in the post itself you have a line that says “New Website | New Store Items | Update on the show”. Are those links? The reason I ask if because you have the vertical bars between them which you see a lot when separating links. If they are links, you really need to do something to indicate to the user that it’s a link. I would NEVER think to click on those. And if they aren’t links…what’s with the vertical bars?

    8. I assume that “Episodes” at the bottom of a post is a tag, I’d give some kind of visual cue to let the user know that’s what that is. Maybe put episodes in a tag or just title the section “Tags”.

    9. i know this is just a mockup, but I’d think about what other types of posts could look like. Can they embed a video in a post? How do you want that to look? What will the comments look like? Just doesn’t seem fully flushed out yet…but I realize this might be very early in the design.

    I hope you find all of this beneficial, and good luck with the design.

  • http://www.cheapwebdesigncompany.net web development company

    Wow great blog, your styles and concepts are really appreciated….
    Thanks for sharing it.

  • Jeremy

    I think most of the posts that claim this to be a copy are from the same person, or at least the same organization. Most likely it’s Mike David and Cameron Malek commenting in different names. The biggest giveaway is that they also state that redbar is a “better podcast/radioshow”. WTF does that have to do with web design? This fact alone makes me want to build a page specifically for the act of boycotting their childish actions and their website. Someone got pissed that they were passed up for the workshop and is venting and taking it out on you. I wouldn’t sweat it, Chad. I can’t give too much criticism on your site design that hasn’t already been (constructively) said, but it definitely doesn’t look like a “carbon copy” of the redbar site.

    And Kim, you don’t like it because it looks too much like another site that you follow? Are you serious? Do you know how many sites look like other sites? Take a look at almost every single blog out there. No, go ahead and do it. That clearly means that with millions of blogs that could have some awesome information about whatever topic you want to read about, you’re only going to stick to one? Wow. Chad, this is not the type of person you need criticism from. Again, don’t sweat it. Continue designing, even the best of us always have more to learn.