The first step, of course, is to go over the contest rules and requirements. From there it gets a little more complex.

Go Over the Project Brief

First and foremost, whether you’re participating in a contest on Designhill or deviantART, go over the project brief. The host o the contest is obligated to provide all participants with as much detail as possible with regard to what they want to see, so if you haven’t received a detailed brief don’t hesitate to contact the client or host and ask a few questions.

According to Method & Class, a website design brief should contain the following information:

• Introduction: this includes information about the company, including industry, products, size and reach.
• Previous versions: if the client already has a website, they should provide a link or a screencap of the site with details on what they like and don’t like about it. This should include color and styling, as well as details on when the site was built and who is responsible for current upkeep.
• Browser compatibility requirements: this only applies if the design is also a matter of development, which is often the case when it comes to contests. Clients should provide a maximum of five web browsers they want the site to display properly on, including version and operating system.
• The aims of the new website: from traffic to sales leads, you need know what the new site has to do in order to make the client happy. If it’s part of a rebranding effort, this section should also include what about the previous branding style needs to change.
• Preferences: asking a client to link to some competitors’ websites might seem a bit strange to some, but this is the best way to know what kind of design style they prefer that’s compatible with their industry.
• Look and feel: including color, major design elements and even typefaces, the brief should provide detailed information on what elements the new website should integrate that the old one is lacking.
• Budget: while this may seem like the most important aspect of a design brief from your end, it should always come second to understanding the client’s needs. However, if the final prize for the contest barely scrapes your going rate for a basic website, with the client requesting full flash intros and splash pages, it may be best to seek out another competition.
• Continuation requirements: more common in contracted work than design contests, the brief should also include whether you’ll be expected to continue maintenance of the site over time, and the budget allocated for this work if applicable. If the brief doesn’t mention this at all, ask the client who they intend to have upkeep the new site—you may just land some steady residual work in the process.

Mockups First

Whether it’s a website design contest at Designhill or a web development competition hosted by Apple themselves, never move forward with complex design before submitting a mockup. Make sure that you’re capable of the design and development as needed, of course; a beautiful mockup might win you the contest, but you’ll end up defaulting if you can’t make it reality after the competition comes to a close.

Even the simplest design mockup should never be a plain static image, however. As shown in Hubspot’s fantastic design manager user’s guide, planning a site design requires some additional material to be truly professional and cohesive. Always assemble a color key, including hex codes, to present with the main page mockup. List out your typefaces, with proper example sentences; using “the quick brown fox jumped over the lazy dog” is preferred, but “grumpy wizards make toxic brew for the evil queen and Jack” is another clever example. Avoid so-called “lipsum” text in this section.

Be sure that your mockup shows the difference between an inactive, active and hovered link, navigation and search features, and any animated or pop-out elements you intend to use. Don’t let your mockup drop down menus cover up any important design elements; instead, include multiple mockup panes, showing content at different stages of use.

May the Best Design Win

As a designer, you’ve already heard your fair share of design tips, but that doesn’t mean you should just tune them out as you get started on your most recent contest entry. Creative Bloq in particular offers some excellent tips for web designers, from using garish outlines in development to locate and change specific CSS rules to naming your layers wisely in your mockup in order to more easily make modifications as the client requests. Never outright flatten your design, avoid image compression when submitting mockups, and try to be as concise as possible in detailing your color, typeface and other design choices.

Now get out there and get started—may the best design win!

To get some design inspiration you can download this flat ui design kit.

Most Gripping and Valuable Content First

A number of sites choose to organize content based on the date it was either posted or in alphabetical order. While neither of these organization methods are necessarily bad, they aren’t likely to keep your customers coming back to read more. You will want to put together new content at the front, but from there, you should organize it based on the most gripping and valuable. Articles reporting on the general state of the business or press releases should be farther down in the order.

Blog Pages Make Bad Home Pages

For an eCommerce store, a blog as the home page is a bad idea. Linking to the blog on the home page, on the other hand, is a great idea. It makes it easy for your customers to find the content, but it also keeps the front page a clear eCommerce store design. The problem with using a blog as the front page is the fact that it is dynamic and loses that sense of professionalism, among other things. Remember that your content does need to be upfront, but at the same time, you’re running an eCommerce store. Just as you would expect an artist who uses art website templates to keep his art at the front of the website, your customers expect your general storefront to be at the front of the website. Instead, just put a window with a link or a snippet from the blog, making it a tantalizing option for curious readers.

Categories Matter

When you have a lot of high quality content, the organization of the content should be such that people can find the information they’re looking for. Use categories to your full advantage. You don’t have to put all of the categories on the main tabs or even in their own menu. Just make sure that you have a link that connects readers to those categories so that they can quickly browse what items or services you have. You should also make the category titles active. This way they can also click on the links.

When organizing content, your primary goal is to make sure that your customers can find everything that they need. You can make this easier by putting your most gripping and valuable content first. You should avoid setting up the blog pages as your home page. Instead, just include a link or window. And finally, make sure that you provide good categories so that readers can find the information they need as they need it.

Why a Mobile Website?

While many potential customers might research new restaurants at home, there are an increasing number of people who use mobile devices when they are at home as opposed to using their laptop or desktop computers. When people are hanging out in their living rooms or drinking their morning coffee, many of them use smartphones or tablets to surf the web, even when they are within reach of their home computers. Even more people use mobile devices to search the internet when they are away from home and, if you want your restaurant to be on the radar for as many people as possible, you need to make your website accessible from mobile devices. If someone is visiting your city, or just out and about after work or shopping, he or she may use a mobile device to search for a place to have dinner. If you have a mobile website, your restaurant page will be available to all your potential customers, whether they are at their homes or not.

What Content Should Your Mobile Website Include?

If you are planning to create only one website for your restaurant, a mobile website has the potential to reach more people than a regular website might. If you already have a regular website, think of your mobile website as an extension of your original page. The number one thing your site should include is the information about your restaurant’s days and hours of operation. Make that information visible on the homepage. Then make sure you include the best phone number to call for questions or reservations and, if you are linked to an online reservation service, the link for that service. The other big thing that customers will want to see on your mobile website is your restaurant’s menu. New customers will likely make a decision about whether or not to eat at your restaurant based on the menu, so make it easy to read and keep it updated. If you change the menu regularly, make sure your website is updated each time your menu changes.

A mobile website is a great way to attract new customers to your restaurant. People who are on the go will be able to quickly see your restaurant as an option when they are looking for places to eat and visitors to your city will be able to access your hours and menu if they are searching from hotel rooms on mobile devices. Don’t forget to include any specials or events on the site, as well, giving potential customers even more reason to try your restaurant.

In our roundup posts, we feature news, articles, resources and tutorials written by designers and developers just like you! We hope you’ll find our roudnup useful – all articles featured on the post have been hand-picked to ensure the highest quality and usefulness!

The State Of Responsive Web Design

Pure CSS Based Multi Level Responsive Navigation Menu: BootM

Simple JS Library for Creating Guided Tours: Tourist.js

 A JavaScript Library for Building User Interfaces: React

Movie Lorem Ipsum Text Generator Alternative: Picksum Ipsum

Turn a Single Div Into a Lovely Color Palette: Color Swatches

A Lovely Set of Thin Free Stroke Icons: Thin Stroke Icons (PSD)

Pure CSS3 Lightsaber Checkboxes

Tool for Removing Backgrounds and Clipping Images: Clipping Magic

A Free Design Blog Template HTML/CSS: Infinite

The Playground Vector Animation Process

JavaScript GIF Encoder That Runs in Your Browser: gif.js

Collection of Free Sketch Files: SketchMine

Reactive CSS Transitions

Historically the main problem with using CSS/JavaScript has been lack of browser support and here comes the hacks.

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.

I came across an interesting infographic showing the lifestyle priorities for those men and women who have an internet addiction.

Via: broadbandexpert

1. jQuery Basics: A gentle introduction to what jQuery is, and what it can do.
2. Selectors: Search & walk through the DOM with selectors and traversing.
3. Manipulating the DOM: Add & remove from the DOM, more traversing, and user events.
4. Events: Listen for events, handle them, and change the default event behavior of web browsers.
5. Styling: Before landing, tame CSS with jQuery and animate elements on the page.

All of the tutorials on Html5CanvasTutorials are organized by chapters and sections and are accompanied by live demos and working code. You can use this site to learn about HTML5 Canvas for the first time, as an HTML5 Canvas reference, or as inspiration for your HTML5 Canvas projects.

The Tutorials tab contains basic and advanced HTML5 Canvas tutorials for the 2d context and Three.js tutorials for WebGL (3d context). The Labs tab contains cool HTML5 Canvas experiments and the Showcase tab contains HTML5 applications and demos from the community.

CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.