Ten Tips To Choose The Right Color Palette For Your Designs

1. Know the project and the client

You should keep in mind to choose colors that are suitable for your project. In addition to the colors given by your client, you have to make a great palette by adding other shades and tones. Different color combinations have different meanings. For example, green and red for Christmas and blue and red for patriotism.

2. Color theory review

Reviewing color basics is must before choosing and creating a palette. You can find various color schemes on the color wheel such as analogous, monochromatic, triadic, complementary, double-complementary, and split-complementary. Traditional color schemes can help you in determining the right color combination.

3. Try out custom color schemes

You can customize by making your own color palette from the traditional scheme where you needn’t follow the formal rules. Chroma, value, and saturation of colors are important.

4. As basis, use monochromatic color scheme


topdesignmag.com

Color plays an important role for designers. If there is no element of colors, any design will definitely appear dull. Colors are very important for marketing, business, and even in emotions. Since lot of things should be considered, it is difficult to create a color palette because of the infinite variety of colors.

The following ten tips will help you to create color palettes on your own. It is important for designers for design creation and marketing purpose since attractive and unique colors are remembered by people. So, to create a color palette the following are the techniques and approaches… Leer más “Ten Tips To Choose The Right Color Palette For Your Designs”

Preparing Photoshop Files for Web Developers


By Brian Rhinehart

Whether you’re a freelance web designer or part of a team at an agency, handing off Photoshop files to a client, developer, development team or even another designer is part of the process of building websites.

Whereas the development process is generally more structured, by contrast, the design process is quite often spontaneous and full of experimentation. This can lead to a host of unused and unnamed layers that don’t end up as part of the final approved design. For developers, sifting through a quagmire of unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming.
Temp-channel in Preparing Photoshop Files for Web Developers

Designers can help their counterparts or clients before the design hand-off by taking 10 to 15 minutes to prepare files in a consistent and organized manner that can potentially save developers hours of production time. As an added bonus, an organized Photoshop file will save designers time by minimizing development questions after the file has been handed off for coding.

1. Prepping the File

First and foremost, make a copy of the Photoshop file that contains the approved design and add the suffix -prod to the file name. This way you can recognize a production file immediately and know that this file type is for development use only and not for further design refinements.

Guides and layout

Properly align and remove any unnecessary guides in the document. Keep guides to a minimum and only section off the major regions of the layout by outlining blocks of page content such as the masthead, content area, sidebar and footer so that the developer understands what basic structure the page should follow. Keeping the number of guides to a minimum also allows the developer to then add guides where needed to aid them in visually mapping out layout details in the code such as nested divs and navigation menus.

Include a color palette

Create a layer group with its visibility turned off at the top of the Layers panel named “Palette.” Populate this group with layers using Layer > New Fill Layer > Solid Color… which are named to correspond to elements that will be colored using CSS. This allows developers to simply Double+click the layer thumbnail to get the color values they need from the Color Picker while coding.

Ppdwf-palette in Preparing Photoshop Files for Web Developers

The added “Palette” Layer Group.

2. Navigation and Button States

During the design process, it’s easy to overlook that navigation graphics should have at least three states of user interaction that will need to be defined in a stylesheet. Place each state on its own layer and name that layer to correspond to its function. As an example, using the following for the layer names of a top navigation element (topnav, topnav:hover, topnav:active) will help to establish a common naming convention and language that both the designer and developer mutually understand and recognize.

Create sprite groups of navigation or button layers or layer groups to ensure that what you envisioned as a designer will get executed in the code. Position the default state as the topmost layer within the group with the hover and active states below.

When creating sprite groups, it is also recommended that a consistent height be used for all of the states so that it is easier for the developer to calculate the background-position of the elements while coding the CSS.

Ppdwf-sprite-groups in Preparing Photoshop Files for Web  Developers

Sprite groups showing the different navigation states.

3. Flattening Artwork

The purpose of flattening artwork is to preserve the approved design and to combine multiple layered elements into single layers that are more readily digested. Examples of this would be a base layer which is being used as a clipping mask and the secondary layers that are being clipped by that base layer, photomontages or a group of layers that comprise the background of a site.

Merging layers

Merge (Command+E) layers and layer groups that won’t require further editing by the developer. This not only reduces the visual impact of the Layers panel, providing a clearer road map for the developer, but also removes the chance of design elements getting accidentally altered during image slicing.

Fonts

Web safe fonts that are used for headings and copy should be left as editable text. This allows developers to easily check the Character panel to see what values need to be applied to font properties in the stylesheet.

In cases where image substitution is to be used for items such as navigation or stylized text treatments, flatten the type layers just in case the developer doesn’t have a specific font available to them. Another method of preserving the appearance of a font would be to use Layer > Type > Convert to Shape in cases where the developer may need to resize a type treatment.

Smart objects

Smart objects are invaluable during the design process. They allow for resizing and styling with Smart Filters while remaining completely editable. However, once a design is approved these layer types should be rasterized or merged with other layers to reduce the overall file size as smart objects can often contain photos or other artwork that have a higher resolution (e.g. 300dpi) than is required for the final output of 72dpi. Another reason to flatten smart objects is to prevent a “File Not Found” error message should the developer Double+click the smart object layer thumbnail. Leer más “Preparing Photoshop Files for Web Developers”

25 Beautiful Examples of “Coming Soon” Pages


“Coming soon” pages are a great way to tide over your visitors until you finish your new website. They can be used as a teaser for your future website, or places to simply put your information where people can get to it while you are under digital construction. We are going to look at a collection of how websites are successfully using “coming soon” pages.

1. SquidChef

SquidChef

SquidChef has a cute under-the-sea theme and an illustrated squid character to go with their name “SquidChef”. Having a character illustration like this almost ensures that the site is going to have a friendly feel. (Check out some more illustrated character designs). I also like the idea of putting all the information into the talk bubble.

2. Accentuate

Accentuate

I like the color scheme of this “coming soon site”. It’s a simple theme that uses pink to highlight the important areas. The colors go well with the simple layout of the website and the image of the chairs makes the website more interesting than just having text.

3. Flowdock

Flowdock

Having an illustrated look to a website usually gives it more of a fun and laidback feel. It has a bright and welcoming color palette, and I like how the headings in the three sections in the footer are different colors. It makes the color flow throughout. Leer más “25 Beautiful Examples of “Coming Soon” Pages”