Posted by Mehul Harry (Developer Express) on Nov 10, 2009 in
ASP.Net,
Dotnet |
View Original Article Santiago Barro and his development team have created a powerful WinForms ERP application called BinaryActiva. Btw, that’s Santiago on the upper left:
The WinForms ERP application is the main client which supports business activities like: Purchasing, Sales, Stocks, Production, CRM, HR, and more. They’ve also built an ASP.NET website that integrates with their CRM module to send SMS updates!
So why did they build both the WinForms and ASP.NET applications using their DevExpress Suite? Santiago points out:
DevExpress controls are always evolving. Using their controls in applications will always give a consistent and professional interface similar to that of any application developed by the major software development companies.
DevExpress makes the cool tools and teams like Binary Menorca use them to produce award winning applications. Sounds like a fair deal to me. Check out this photo of the guys winning the "Young Enterprise Award" in their native country of Spain. I think the guy on the right is holding a copy of DXPerience behind his back. I'm just kidding, of course, their good work earned them the awards. We're just happy that they chose DevExpress tools to help them succeed.
Read the full Binary Menorca S.L. case study and learn how Santiago and his team leveraged DevExpress tools into a powerful ERP application.
DXperience? What's That?
DXperience is a royalty-free tool suite for rapid business application development for WinForms and ASP.NET apps.
Instantly enhance your WinForms and ASP.NET apps by dropping in new feature sets encapsulated in components. DXperience contains:
- IDE Productivity Tools - Make Visual Studio easier and more effective with IDE enhancements
- DXCore - IDE tools extensible engine
- CodeRush - Extensible swiss army knife of tools to make source code editing faster and easier, including code editing templates, code editing utilities (selection, navigation, clipboard), inline code visualizations and the upcoming unit test runner.
- Refactor Pro - Code editing tools specifically geared for refactoring source code.
- XAF - Business app framework for WinForms and ASP.NET
- XPO – Object-relational mapping for .NET
- Reporting - Reporting "platform" for WinForms and ASP.NET
- UI Components for WinForms, ASP.NET, WPF and Silverlight
Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/
Tags: Case Study
Posted by Silverlight Team on Nov 10, 2009 in
Miscelleneous |
View Original Article Earlier today at TechEd Europe in Berlin, Germany we announced the launch of the Bing Maps Silverlight Control, the newest addition to the Bing Maps Platform. The Bing Maps Silverlight Control uses the power of Silverlight to provide a powerful and rich platform for building mapping and location-based applications. The control provides a new level of performance in terms of interactive visual experience with Silverlight Deep Zoom when panning and zooming and rendering large amounts of data on the map. The control makes it even easier to develop mapping applications using Silverlight’s development environment with Expression Blend, Visual Studio, and managed code. We want to thank you, the community, for all the great feedback from the Silverlight map control CTP release last March. We were able to incorporate a lot of your feedback into the control, and today it is production ready!
Here is a list of some of the features in the Bing Maps Silverlight Control:
· Silverlight 3 including support for Out of Browser
· Road and Aerial (with/without Labels) Map Modes featuring Deep Zoom with the Silverlight MultiScaleImage control
· Position Silverlight UIElements on the Map including images, video, pushpins, polylines, and polygons with a few lines of XAML
· Data Binding with the MapItemsControl
· Use Bing Maps Web Services with the control for advanced Search, Geocoding, and Routing functionality
· Design-time integration with Expression Blend
· Scripting interface for coding with JavaScript
· Embed Silverlight Maps with a single URL in a web page
· Online Interactive SDK with demos and sample code showing how to use the control
Along with the Bing Maps Silverlight Control we are also launching enhanced performance across the Bing Maps Platform with improvements to our distributed data center infrastructure. We also have made it easier than ever before to get started with the Bing Maps platform where you can sign up for an account at the Bing Maps Account Center (https://www.bingmapsportal.com/) and get a Bing Maps Key and try out the control and services for free! All users get a free trial for the control and services and it remains free for non-profit, education, and small websites.
For more details, see the Bing Maps Platform website at: http://www.microsoft.com/maps or visit the Bing Maps Community Blog at: http://www.bing.com/community/blogs/maps/.
Try out the Bing Maps Silverlight Control today!
Tags: Announcement
Posted by vitaly on Nov 10, 2009 in
Design & Graphics |
View Original Article 
Grid-based layouts are generally more aesthetically pleasing and balanced than those not based on grids. While there are definitely great designs out there that don’t use a grid-based layout, they are more difficult to create and often end up falling into some sort of loose grid structure anyway. So why not just design based on a grid in the first place?
This post offers up a complete guide to designing with grids. There’s plenty of basic information here, as well as tons of links to more in-depth information on specific aspects of grid-based design from other sites. And to top it all off, we’ve compiled a showcase of excellent grid-based designs for inspiration.
The Basics of Grid Design
Virtually any website you design should be based on a grid. Grids lend a sense of structure to your site and improved usability for your visitors. And designing to a grid can simplify your design process and make you a more efficient designer. In a grid-based design, since the guides are already in place for you, your options are reduced, making it easier to decide on the width and height of different elements on your pages.
Basic Principles and Ideas
Most grid systems are split up into either 9, 12, 16, or 20 columns. Custom grids might use more or fewer columns than this. Some grids also break up the design into horizontal rows, which are generally the same width in pixels as the columns.
Many designers feel that grids are only appropriate for fixed-width layouts, but grids are versatile enough to be used in fluid layouts, too. There are already some grid frameworks that make provisions for fluid layouts.
Best Practices in Grid Design
There are a number of things to keep in mind when designing with a grid. While many of the tips below are flexible, it’s helpful to know what they are before you embark on a grid-based design project. There’s nothing wrong with breaking the rules as long as it’s a conscious decision and not an accident.
Use only enough columns as you need for your design. What’s the point of using a grid with 20 columns if you’re only going to use four of those? While combining columns is expected for individual elements, if you only need 12 columns, then pick a grid system (or design your own) that only uses 12 columns. Anything beyond that only creates visual clutter in your design workspace.
Pay attention to both horizontal and vertical spacing. While some grid frameworks don’t have provisions for designing along a horizontal baseline, others do. If you work with one that doesn’t, consider creating your own horizontal rows to help with the spacing of elements vertically. Generally, rows should be the same number of pixels high as columns are wide.
Don’t be afraid to step outside the grid. Sometimes you need to break free of your grid for certain elements. This is fine, as long as it’s a conscious decision and you know why it’s necessary. This is especially prevalent in header and footer design with complex backgrounds (like with an illustrated header). It’s okay to get away from the grid if you feel it’s integral to the design.
Use a pre-designed grid if possible. You don’t have to reinvent the wheel. There are more than a dozen good, grid-based layouts available. One of them will most likely fit your needs, even if you have to tweak it a bit.
Additional Resources
Grid-Based Design 101
Grid-Based Design: Six Creative Column Techniques which covers six techniques for working within grid columns.
Grid Design Tutorials and Resources
There are numerous tutorials and resources available for grid-based design. While many rehash what’s been said over and over again, there are some real gems out there that provide valuable insights into grid-based design. And while tutorials are more sparse than articles, there are some great ones available, some of which are included below.
Tips and Tutorials
Five Simple Steps to Designing Grid Systems—Part 1
This tutorial series on designing with grids comes in five parts. It covers all aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the series.
Seven Smooth Steps to Superb Grids
This article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way.
O Rule + Golden Proportion for Calculating the Gutter in a Grid
As the title suggests, this article explains how to use the Golden Proportion (also called the Golden Mean or the Golden Rectangle) and the “O Rule” to establish the gutter widths in your grid design.
Gridlasticness
A short post on elastic grid design based on em sizes. Includes some helpful tips based on a real-world site redesign.
Fluid Grids
This post from A List Apart offers a comprehensive tutorial on creating fluid grids. It covers everything from font sizing to the markup used for the example site.
Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework
This tutorial from Nettuts+ goes through the entire process of creating a magazine-style grid-based website design using the Blueprint framework (more information on that below). This is a very thorough tutorial with a demo and downloadable source materials.
960 CSS Framework—Learn the Basics
This article offers a great introduction to work with the 960.gs system. If you’re new to working with 960.gs or grids in general, this is a great place to start.
General Resources
Grid-Based Layout
This is an excellent introductory article for grid-based design that provides a good overview of what grids are and how they’re used.
Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 Tutorial
This post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs.
Setting Web Type to a Baseline Grid
This is a great post from Dev Opera about baseline grids and vertical flow in grid-based designs. It covers not only why you should use a baseline grid, but also how to go about it.
Thinking Outside the Grid
An early article on grid-based design from A List Apart. It covers how to break out of the traditional table-based grid, while still showing designs in the context of their looser grid-based structure.
Grid Style in Modern Web Design: Showcase and Resources
This article gives a great overview of grid-based design, and includes an introduction to what it is and how it works. It also has a great showcase of grid-based designs.
Oh Yeeaahh!
This is a now somewhat famous article on redesigning a well-known website to conform to a grid layout. It details the entire process (in the article and in a downloadable presentation), including the challenges the redesign presented.
The Grid System
This site offers up tons of categorized resources on grid design, compiling articles from all over the web. It also includes tools, books, templates, a blog, and inspiration — all in one place.
Adobe Web Tech Curriculum: Page Layout Grids
This lesson from Adobe gives a great introduction to grid design and includes guidelines for creating and using your own grids. The factors and guidelines are provided in an easy-to-reference bulleted list.
Quiet Structure
This post offers a great critique and evaluation of the CNN.com grid-based redesign. It discusses what elements changed, how the site is structured, and how the grid provides structure to the content in an understated way.
The Complex Grid
This post is typography-specific, though many of the principles it discusses in relation to grid-based design could be applied to other design elements.
Developing the Grid that Supports Your Design
A great overview of creating a grid to fit your proposed design, with some great grid examples based on common layouts.
Designing with Grids
This is a very thorough article from .net magazine about designing grid-based layouts. It covers why grids work along with grid-based design theory and includes some practical suggestions for working with grids.
Design By Grid
Design By Grid offers up tons of grid design resources, including a showcase, articles, and tutorials. They also have a resources section with even more information from around the web.
65 Resources for Grid-Based Design
This is an excellent roundup of resources compiled by Vandelay Design. The listings are categorized by articles, galleries, tools, framework resources, and WordPress themes.
Grid Based Design Toolbox
Fuel Your Creativity has compiled a huge list of grid-based design resources, broken down by category. There are tools, galleries, tutorials, WordPress themes, and articles to get you going with grid-based design.
The Funniest Grid You Ever Saw
This article from Subtraction talks about the redesign of The Onion and how it now fits into a grid-based framework. It’s a very thorough article that offers great insights into how to design a complex grid-based theme so common on news and magazine websites.
45+ CSS Grid Systems, Layout Generators and Tutorials that Every Designer Should Know
Tripwire Magazine has compiled this excellent resource list for grid design. Some basic information is provided for each link, as well as some general grid-design info.
Grid (page layout)
This is Wikipedia’s page explaining grid-based design. It offers some great explanations of why grids work and includes a bit of history and further resources.
Grid Tools, Frameworks and Templates
While sometimes a particular design project calls for a custom grid solution, there are plenty of frameworks that can be customized to work for just about any design. And even if you opt for a custom solution, there are tools available that can help you decide on the basics of your grid’s layout.
1KB CSS Grid
Just as the name suggests, the 1KB Grid System is a grid system based on a CSS file that is under 1 kilobyte. You can customize the grid before downloading, with the number of columns (9, 10, 12, 14, or 16), their width (40, 60, or 80 pixels), and how wide you want the gutters to be (10 or 20 pixels) to create grids from 450px wide up to 1600px (not recommended, obviously). The resulting file is not only super-tiny, but also super-easy to understand and work with. If you’re new to grid-based design, this might be one of the best framework options available.
960 Grid System
960.gs is a grid system based on a 960-pixel-wide page layout. It supports designs based on 12 or 16 columns. The download includes a printable sketch sheet for hand-drawing mockups.
Baseline
Baseline is a framework built with both grid-based design and good typography in mind. It works with HTML 5 and CSS 3 (requiring a modern browser for all of their functionality to display properly). Baseline serves as a great framework for creating grid-based sites that feature visually pleasing typography (beyond just nice fonts and styles).
Blueprint CSS
Blueprint is one of the better-known grid frameworks out there. In addition to the grid-design tools, Blueprint also includes support for typography, print styles, sprites, and more.
Boks
Boks is a cross-platform-compatible Adobe AIR application for working with the Blueprint CSS framework. It lets you configure your grid, baseline rhythm, CSS, and exports a .png file to use in your design mockups.
Fluid 960 Grid System
The Fluid 960 Grid System is based on the 960.gs framework but with a fluid width and incorporates MooTools and jQuery effects. The demo page itself is impressive, and the fluid nature makes it a preferrable choice for many designers.
Grid Calculator
The Grid Calculator is a simple tool that uses sliders to adjust the base font size, number of columns and their width, and the gutter width of your grid. It automatically calculates the total grid width and shows the grid layout below the calculator.
Grid Designer
Grid Designer is a simple grid layout tool for creating grids with any number of columns, of any width, with any size gutters and margins. It’s simple to use and even includes tools for developing your site’s typography at the same time.
GridFox
GridFox is a Firefox plugin that lets you overlay a grid on any website design. You can change the width, the number of columns, and the alignment of the grid, though the gutter width seems to be fixed. It’s a great tool if you’re trying to figure out how an existing grid-based website was set up, or even for double-checking your own work.
Gridinator
The Gridinator is an online tool for creating custom grids that match your needs. You can specify how many columns you want, how wide they should be, the margins, and the body font size, and then download the CSS, HTML, and the image file for creating mockups.
Gridmaker
Gridmaker is a fairly robust online grid creator that includes tools for formatting your vertical columns and baseline properties. You can then export a .png file for creating your design mockups. Gridmaker is also available as a Photohsop CS4 plugin.
Gridr Buildrrr
Gridr Buildrrr is another online grid design tool that lets you create custom grids to meet your design needs. You can specify the number of columns, their width and margins, and the container margin. It also allows you to add draggable boxes to your grid (including leaderboards and resizable width boxes).
Gridstarter—The Web Design Starter Grid
Gridstarter is a free grid template for Photoshop that’s based on a 960px layout. It’s based on a 60×60 grid for 16 columns (which also means you can easily do 2, 4, 6, 8, or 12 columns by combining grid columns). The site also includes screencasts for getting started with Gridstarter.
Grid System Generator
The Grid System Generator makes it easy to set up grid templates for 960.gs, The Golden Grid, the 1KB Grid, and Simple Grid. You can choose the width, number of columns, and margins to create a customized template file for your own needs. The site also offers articles on CSS and grid-based design, plus additional resources from around the web.
Layout Grids for Axure and Pencil
If you use Axure for prototyping and wireframing or the Pencil extension for Firefox, then these Layout Grids are for you. The files included here overlay a grid to your workspace (either in Axure RP Pro 5 or Pencil), making the creation of grid-based wireframes and prototypes much easier.
Slammer
Slammer is a program for Mac OS X Leopard that lets you overlay a grid on any window. It includes rulers to help you position elements precisely and also allows you to save your customized overlays for future use.
The Golden Grid
The Golden Grid is a slightly different grid system based on the number 3. It uses a 6/12 grid system instead of the more common 14 or 16 column format. The grid takes into account the Rule of Thirds (Golden Rule, hence the name) to create more aesthetically pleasing designs.
Web Page Layout Grid
The Web Page Layout Grid is a simple, downloadable (just right click and then click on “view background image”) image for laying out your designs on a grid. Just put the image behind your design work and you have a ready-made grid with pixel markings on both vertical and horizontal axes.
YUI Grids CSS
YUI Grids CSS is a grid framework that supports both fixed- and fluid-width grids. It’s a 4kb file that claims to support over 1000 page layouts. Examples and tools are included, too.
Gallery of Excellent Grid Designs
What would a post on grid design be without a selection of awesome grid-based designs to inspire you? Below are 30 excellent designs based on grids. Some have more complex grids than others, and some do an excellent job of breaking outside of the grid when necessary.
About the author
Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.
(ll)
Tags: design, grid, Tools
Posted by Cameron Chapman on Nov 10, 2009 in
Design & Graphics |
View Original Article 
Deciding what to do once you’ve purchased a domain but haven’t yet launched the website is always a bit of a conundrum. Leaving up your domain registrar or Web host’s generic page seems unprofessional, especially if you’re trying to drum up advance press for your new project. At the same time, you don’t want to spend too much time on a temporary page when you really should be working on the website itself.
The best thing to do is create a simple “Coming soon” page to notify visitors of what will eventually be there. Good “Coming soon” pages come in two basic varieties: the informational design, which simply tells visitors what will be there after launch; and the page that invites early visitors to sign up for updates or even to request a beta (or alpha) invitation. Below are some great examples of each, followed by some best practices for creating your own “Coming soon” page. You definitely won’t see among these the generic “Under construction” page (with the cute construction graphic) that used to litter the Web.
1. Tips On Designing A Good “Coming Soon” Page
Here are some best practices and tips to keep in mind when designing your own “Coming soon” pages, as well as examples.
Tell Us What to Expect
When someone lands on your “Coming soon” page, they should get an idea of what your website will be about and why it might be useful to them. This is especially important if you’re asking visitors to sign up for updates or to check back regularly. If we can’t tell what the website is for, why would we bother coming back?
Give us at least some indication of the website’s purpose. This doesn’t mean you have to spell out everything the website will offer; rather, hint that it’s something we might be interested in. For example, if you will be offering a time management app specifically for Web designers, you might say that the website will help streamline the workflow of Web designers. It gives a taste of what the website will do, while maintaining some mystery.
KISSmetrics
KISSmetrics provides a ton of information on its “Coming soon” page, including a form to sign up for updates and a blog to keep abreast of new developments. It’s a great example of a “Coming soon” page that keeps visitors informed and gets them excited about the pending launch.
Birdboxx
Birdboxx gives a basic explanation of the services it will provide when the website launches.
Anipals
Anipals gives plenty of information on the website’s features without giving away too much.
Should You Provide Updates?
Letting visitors sign up by email to be notified on the website’s launch can be a useful marketing tool. If you don’t offer this feature, by the time your website does launch, those visitors may have forgotten about you. Of course, how often you send out an update is entirely up to you. Some websites send out an announcement only when the website has actually launched. Others send out regular updates on the progress of website’s development.
If you’re trying to build advance buzz around your website’s launch (which, in all likelihood, you are), then sending updates on a semi-regular basis could go a long way to building your website’s credibility and name recognition. If you send an update every week or two, your prospects likely won’t forget about you. Just indicate on the sign-up page that updates will be sent that often, to avoid being labeled a spammer.
You have a couple of alternatives to the standard email sign-up form, though. One is to run a blog that keeps visitors updated on your progress. This is most commonly done for Web apps, with the blog offering regular updates on development. Another common method is to use a Twitter account to keep prospective users updated. Just make sure that the link on your page to your Twitter account is prominent.
MyNiteLife
MyNiteLife lets visitors sign up for updates via email.
DesignSvn
DesignSvn gives visitors the option to sign up for updates via email or to follow it on Twitter.
Remindness
Remindness lets visitors sign up for email updates.
Brand Your “Coming Soon” Page
If you already have a logo, a basic design or color scheme and font picked out, include them on your landing page to start building the brand in your visitors’ minds. Advance branding sets your website apart from your competitors and generally doesn’t cost any more to implement or take additional time. Even something as simple as using your website’s eventual font or color scheme can make you much more recognizable to future visitors. When your website finally does launch, it will have an air of familiarity to your visitors.
Fontdeck
Fontdeck includes its logo and what will presumably be the website’s color scheme on its “Coming soon” page.
Silverback
Silverback used the gorilla cartoon and basic design theme of its website on this “Coming soon” page.
Foundation Six
Foundation Six uses what will presumably end up as its logo and color scheme.
Create Some Intrigue
The point of your “Coming soon” page is to get people to talk about, and come back to, your website. Even if you want to give some information on what the website will be about, creating some mystery around the launch is helpful. Curiosity is a great motivator and may get more people to sign up for updates. It also gets people talking, because visitors will ask their friends if they have any new information about the pending launch. Advance buzz can bolster your launch traffic and even attract media attention.
Better Blogger
Better Blogger gives us a basic idea of what its web site will be about without giving away too much.
Good Morning
Good Morning gives away virtually no information about what the app might do, but the name suggests that it might be related to time management or productivity.
uoOo
uoOo seems to be somehow related to video, but it doesn’t give us any more information than that.
Remember SEO
While a “Coming soon” page won’t likely make a big difference in your search engine ranking, that’s no reason not to optimize it for search engines. Use keywords and proper meta tags, and encourage those linking to your website to use good anchor text. And if you use good SEO practices to begin with, you won’t be penalized by search engines (and might even gain some decent credibility among search engines), meaning that when your website does launch, its search engine ranking will climb that much faster.
2. Informational Designs
Informational designs do what you would expect: inform early visitors about the current and future status of your domain. This design can be very simple, with just a name and text like “Coming soon,” or it might go more in depth. In either case, it is usually a single page, sometimes with an additional information page. In some cases, it also includes the owner’s contact information.
After Some Words
A unique “Coming soon” page that links to the website’s MySpace page.
Boagworld
A great design with basic information about the return of a well-known podcast.
FiveSecondProjects
This website takes a slightly different approach, providing a link to a video with more information.
Zombie Corp
Another very simple “Coming soon” page, with contact info of the owners.
Moses Mehraban
A simple page that gives information about the website owner’s current business activities.
Leaf Ordinary
A minimalist page with a link to more information.
I heart spaceships
A fun page that includes contact information for the website’s developers.
Smart Pixel
A very minimalist page design, but with a fun twist.
Human Binary
Another really fun page design that gives plenty of information on what the website will eventually hold.
fcukstar
A more advanced page that includes a link to a website preview and pricing information.
Zenbou
Another very minimalist design that includes plenty of hints on what the upcoming website will include, as well as a link to the Twitter feed.
Shabith Ishan
A very well-designed page, with links to various social media feeds.
3. Page To Receive Updates Or Request Invitation
These pages allow visitors to sign up for updates or receive an invitation to a beta or alpha test. They’re especially popular for online apps, but other websites use them as well. Sign-up forms are generally short, with a field for an email address and maybe one for a name. The page often includes some information about the website, too, though emphasis is kept on signing up for updates.
FavMovie
The title gives sufficient information on what the website will feature, and the sign-up form is simple.
Statnip
A simple page with a single-line sign-up form for receiving updates.
ClockMeIn
A basic page that includes a single-line form for requesting an invite.
investobiz
This page gives some basic information as well as a single-line form to sign up for the newsletter.
PackageTrail
A unique page design that includes a single-line form to request a beta invitation.
Addressful
A “Coming soon” page that includes both informational and beta invitation request elements.
Hello Human Icons Icon Collection One
This website offers information on the upcoming launch and invites visitors to sign up for updates with just their email address.
The Upstate Design Collective
Another page that incorporates both informational and sign-up elements, plus a link to the group’s Twitter feed.
MealNation
A slightly longer update sign-up form.
Hosteeo
A basic sign-up form that includes a teaser to generate more interest.
Gigdom
An informational page that includes a beta test registration link.
ClassOwl
A simple two-field sign-up form to get updates.
ChkChkBoom
A “Coming soon” page that lets visitors choose between updates via RSS and email.
SCIPLEX
A very simple page, with a couple of lines on what’s coming and a one-field sign-up form.
Inhouse Grind
A simple page with basic information and a one-field sign-up form.
Zipliner
Another very simple form that lets you sign up for a beta invitation.
Designatr
A graphically bold page with a simple sign-up form and basic information about the website’s purpose.
Further Resources
(al)
© Cameron Chapman for Smashing Magazine, 2009. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: coming soon, launch, launch page, showcases
Tags: coming soon, Design Showcase, launch, launch page, showcases
