Rectangle Element 2.0

We’ve added a new option to the rectangle element in SiteBuilder. Here’s Sam, a Homestead Product Designer, to tell you all about it. - Rochelle

Web designers are always looking for ways to give the websites they build a clean, modern look. A simple technique they use a lot these days is rounding off the corners of page elements like buttons, backgrounds and borders. Rounded corners can give elements a smoother, more natural feel.

You might think a web designer would choose to use rounded corners merely to improve a website’s aesthetic look, but there’s something more to this subtle design technique. We’ve found that smoothing out corners of individual elements actually makes the information that they present easier to read. Rounding your corners is a simple step, but it can do much to clarify your message. It communicates subtly to readers how your information fits together, and how each element is differentiated from other information on the page.

You can see how others have used rounded corners by checking out these websites: A16, Links to Your Heart and PromoCOASTERS.

So how can you add rounded corners to your site? Well, we’ve just added that capability to our most recent SiteBuilder software update! Specifically, we’ve added the ability to round the corners of rectangle elements; check out the new “Corner Shape” box in this screenshot:

Rectangle Element with Rounded Corners

You can play with the choices of a small, medium or large rounded corner to see which you prefer for your site. One thing to keep in mind is that when you view the corners in SiteBuilder, they might look a bit jaggedy (yes, I know that’s not a real word but you know what I mean). But once you publish the page, they will turn out as smooth as glass.

pub.jpg

Personally I love the look of rounded rectangles, so I hope you’ll enjoy this new tool in SiteBuilder and take full advantage of it on your own sites. Have fun with it!

23 Responses to “Rectangle Element 2.0”

  1. Roberto Says:

    Thank you very much for so much needed option for rectangle elements!

    In my case I had a combination of rectangles one in top of the other with two similar colors with different intensity to give the new popular bright/shine/polish look everybody is using now! From the new Microsoft’s Windows Vista to…you name it! Since SiteBuilder does not have a color combination to be used on the same element this was the only way I could come up for this look. It is not the same but pretty much close.

    Now, rounding my combination of two rectangles together one in top of the other was a problem and changed the general formatting for these two objects so even if I wanted I couldn’t use the rounding feature. And I would like to!

    Any idea on how to resolve this issue in my case?
    Any comment is must appreciated! Thank you!

    Best regards,

    Roberto
    Miami, FL

  2. Rich Says:

    THANK YOU!!!! Great addition! Been waiting a while for this!

  3. Norman Derocher Says:

    I really like this Blog section. There are so many questions about designing and building many of which could be answered on the Blog.

  4. Jacqueline Says:

    I’m so happy to see this new look of rounded rectangles.

    Wouldn’t it be great if someone could find a way to make the image elements look raised and shadowed on one border, in the way that Front Page does it?

    I also like the way a photograph, or article looks like it’s been torn from a page somewhere and then a blur is added to the ragged edges when it’s put on the website.

    With all the great improvements Homestead is making, it’s possible they could do that someday.

  5. mark Says:

    I too appreciate the rounded corners. Looking at the PromoCOASTERS example above, my question is similar to that of Roberto. Can the gradient color text box they have for their welcome text be done in Homestead? Or is it created in another application and imported as a graphic?

  6. Mal Jenkins Says:

    The rounded corners look is a most welcome addition. And, like Roberto I would like the ability to use the bright/shine/polish look with my website rather than the “pastel” colours we have now. Any possibility ?

    Keep up the great work.

  7. Mike Says:

    Thanks so much for adding this! I’ve been waiting for it for years. Until this time I edited a graphic in photoshop to create rounded corners, exported it, then uploaded it to Homestead. This will save gobs of time!

    Now just add shadows!

  8. Karen Challender Says:

    Good job Homestead!! The rounded corners for the rectangle element works great… I’ve just finished a subdomain “Sweet Pea Girls” and had added layers of rectangle elements, which I’ve never tried before but wanted a new look. When I received the blog notice yesterday about the new option of rounding the corners, I immediately tried it on this subdomain and I’m so pleased with it, I’ll be adding it to many of the pages on my original website.. It just adds a very subtle change that looks very “finished”…
    I’ve been a customer for over 4 years and I’m very happy to see that Homestead is giving their customers a chance to voice our opinions, and that you really are hearing us!! I’m starting to fall in love with you all over again :o)
    I have a couple of suggestions about the rectangle element.. I’d like the option to add a background design to them rather than just colors and also, a oval element would also be very nice…
    I may not be understanding what Roberto is saying in his comment above about layering the rectangles, but it sounds like he’s saying it doesn’t work to layer them with the rounded corners… I have up to three layers of rectangles on my site, all with rounded corners and it’s working fine..
    The centering of new pages by default is also an excellent idea… Especially with the way our sites look on the new Window’s Vista..the pages really do need to be centered and even though I try very hard to catch pages that aren’t centered, I still find ones that aren’t.. It’s just one of those things that get forgotten, so it’s great that it will be done automatically from now on..
    Another suggestion that I keep suggesting, but haven’t heard anything back on this.. We need more space added to our sites.. Homestead allows a lot less space than other company’s are offering now… We don’t want to have to pay you more for this space…We could use other website company’s, pay them less and receive more space.. I like Homestead and what I can do with my website, but this is something that really is going to create problems for a lot of your customers.. Please consider raising the amount a space allowed for each site, at no extra cost!! This really is a needed feature..
    Have a great day,
    Karen
    http://sweetpeagirls.homestead.com/index.html
    http://www.karenskottage.org/
    http://www.karenskids.net/
    http://www.karenskats.com/

  9. Sam, Product Designer Says:

    I’m glad to hear that people are taking advantage of this new enhancement!

    In response to Roberto, you can overlay a square cornered rectangle over two rounded cornered ones, and achieve the dual tone that you are looking for.

    Unfortunately, SiteBuilder does not allow for gradient fills at this time. Here are some other ways to use the rectangle element, including layering them on top of on another to create a shadow effect:

    http://roundedrectangles.homestead.com/

  10. Anne Mendelson Says:

    I, too, like the rounded corners…. but you’ve got a couple of problems, on my site anyway!

    1. In Preview, only the Index page displays rounded corners. The other pages have a square shape cut out instead of the rounded corner. I can live with that!
    2. But NOT with this….. I like my pages non-centred, eg. with the gap down the right hand side of my screen using Homestead defaults. This is not my criticism! The rounded corners look great on opening up my website. However, in the UK there is a great deal of emphasis on Accessibility for everyone, so my screen image can be easily enlarged by:
    a. pressing the control button on the keyboard, and
    b. rolling the mouse wheel.
    This will result in the part of the square, which has been removed to create the rounded corner, being filled in with black colouring, thereby creating a black, 90 degree corner. This appears on all of the corners and on all of the rectangles. It appears whether small, medium or large corners are used, and whether rolling up or down, but is always correct for the default screen size. Look at these pages, where I’ve put rounded corners on my website:
    http://www.mywaytoo.com/index.html
    http://www.mywaytoo.com/Pages/introduction.html
    http://www.mywaytoo.com/Pages/dicecards.html.

    Anne

    PS. I can’t believe that you can’t copy and paste onto the message area….

  11. Maureen Says:

    Love these. Makes the site look even more professional. People are always impressed that I ‘made my own site.’ I never fail to tell them about you and your WYSIWYG — already two people have signed up! Looking forward to a slide-show upgrade.

  12. Laura Monroe Says:

    Hi Guys! Great move! As websites get more 2.0 looking these types of things will keep me adding sites. I would love to see us be able to use PNG images on the site builder as well. Any hopes for that soon???

    Keep up the great work!

  13. Richard Tong Says:

    Could the Rectangle Element have a border thickness and color option as well? If not, could the Border Element be enabled with a rounding off option?

  14. Richard Tong Says:

    Or better still, enable rounded corners for the Padding on the Text Element.

  15. Debbie Oliver Says:

    This is marvelous! I’d love to see the same option for text boxes.

    Thanks!

  16. Roger Says:

    Maureen Says:

    September 17th, 2007 at 1:16 pm
    Love these. Makes the site look even more professional. People are always impressed that I ‘made my own site.’ I never fail to tell them about you and your WYSIWYG — already two people have signed up! Looking forward to a slide-show upgrade.

    Maureeen,

    Don’t wait for a slide show up grade… look no futher, I have one embedded on my sites already. It’s easy to do with the right programs.
    Example: http://rogerphilpot.com/slideshow.html If interested contact me at my site.

  17. Karina Says:

    I have yet to use the new rounded corners element but I would like to add a request for something and here was as good a place as any!

    I would like to see the ability to add a copyright symbol and other useful symbols via the text element (ie add the font that includes those symbols). At present we have to add a HTML element if we need a copyright symbol. This can be messy when it is being included in paragraphs of text. Especially when repositioning the text etc.

    Our text choices currently include Symbol, Wingdings and Webdings - and personally I use only a few of those available symbols and have yet to see many websites where many of them are used. Whereas the registered and copyright symbols are more like to be used everywhere if they were easily available.

  18. Carla Says:

    Karina:

    If you are looking for an easier way to add the copyright or registered trademark symbol, simply copy them from a MS Word document and paste into your textbox. It’s quick and easy.

    http://www.jdadvancedremodeling.com

  19. Karina Says:

    Seriously Carla ? Here I have been trying to insert them manually all this time - it never occured to me to just try pasting ! Thanks so much for the tip.

  20. Sergio's World Beers Says:

    GOOD

  21. Sergio's World Beers Says:

    great FOR OUR CUSTOMERS~

  22. sergiosworldbeers Says:

    I should be a featured site

  23. Sergio's World Beers Says:

    Great!

    Regards,
    CMS,
    Sergio’s World Beers

    Email : generalmailbox@sergiosworldbeers.com
    http://sergiosworldbeers.com

Leave a Reply