Search Results for: cmyk

Design Focus: RGB to CMYK

April 5, 2013 By Sophia Lucero

We’re still looking at color schemes this week, but instead of a single hue it’s several, and actually the foundations at that.

Designs of the Week

Ready to go out and design your next website? Try building with the Catalyst Framework.

Cool spiral and dots pattern on the background that re-renders when you load or resize the page—it’s just a side-effect of using canvas, but the way it animates is a welcome touch. The large top left logo switches to a small one and move to the right when the viewport gets smaller, along with the navigation becoming affixed to the top. I like the play between the bright colors and the elegant serifs, swashes, and blacks.

It’s nice how the faces get less detailed and more muted as you go farther from the center of the page. Pretty much everything else is a flat interface, and stays in neutral shades with bright accents for headings and icons.

I’m enjoying the concept of seeing multiple pages of a site stacked on top of the other, sliding the previous content away when you click on the next one. It gives you a feeling that you’re browsing horizontally and vertically, like flipping through real paper, but there’s really no sideways scrolling involved.

A sprinkling of parallax, plus irregular four-sided shapes as both decor, charts, and photo frames. The shape of the buttons is also quite interesting. Clicking on Contact when you’re viewing a project doesn’t seem to work though—you have to go back to the home to let it scroll down to that area.

I think I get where the red, green, and blue choices come from: when you combine it with a horizontal line pattern you know it has to mean the scan lines and projections from film and television screens. This one operates completely on the horizontal plane. Like the other RGB sites here the color usage comes off a bit strong but the look definitely stands out and the concept is enjoyable.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

CSS, Responsive Web Design – Media Queries are a Hack
“I want write-once, use-anywhere—that’s what modular code is. Media queries are not that. They’re write-everywhere.”

Design, Programming – Lessons in Learning: Creating a Functional Prototype
“All of these things let us make decisions by actually using the product. Usage is oxygen for product design.”

Typography – Setting Type for User Interfaces
“An isolated word that is comprised of fewer than 20 characters will be read more slowly than a word that forms part of a longer sentence.”

Web Design – An Event Apart: 10 Commandments of Web Design
“Love thy user as thyself: treat people well. Do things that you would like to have done to you.”

Design Focus: New Age Editors

March 1, 2014 By Sophia Lucero

Check out these modern tools that will help you build websites faster and better than ever before, and the design patterns they employed for their landing pages—from animations to familiar color schemes.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Web Standards – Code Guide by @mdo
“Standards for developing flexible, durable, and sustainable HTML and CSS.”

Design – The Troublesome Misconception of Parallax in Web Design.
“The sites above are either using different scroll effects to simulate movement of objects not naturally expected by the user, or simply sliding two planes over one another at different scroll speeds.”

User Experience – How we work
“We always start by trying to understand the problem: the users of the website or product, the organisation on their customer strategy, the goals and needs of the project, who’s in charge and who isn’t.”

Design Focus: Job Hunting Grounds

November 15, 2013 By Sophia Lucero

This week’s featured designs will give you access to new opportunities not found on your typical job sites. Made for designers, by designers, let’s see how these sites address your needs.

Designs of the Week

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Very light in terms of color scheme and content, and it’s interesting to see the use very bright shades of red, green, and blue as the accent colors.

This one’s also bright but more stark, more Swiss, offset with equally bright colors to mark each category of occupation.

This one’s polished and makes use of interesting characters for mascots (are those robots or aliens?) although if you’ve been enough design trends you’ll find this look dated by a smidgen. Still done pretty well though.

There’s a subtle left-side orientation to the layouts of the different pages. Meanwhile the aesthetic it has—a combination of the font choice (Avenir), cheery colors, flat UI, and simple shapes—is probably a poster child for what’s “hip” right now.

Another popular design pattern making the rounds: screenshots in a 3D perspective. One thing I noticed though is the heading fonts on the homepage are thin and tall while the rest are thicker. It shouldn’t be a big deal, but I felt a disconnect there.

The design looks a little more traditional like a couple of other designs featured earlier in that the listings are right on the homepage, but there are some good decisions to avoid looking boring. Large imagery on the listing page helps, not to mention a quick, tag-like summary of what they have to offer right below the large job title.

This shouldn’t detract from the design and content but I really like the pulsating pin on the map in the footer. The aqua style sphere kind of sticks out if you really think about it, but it’s a nice touch.

Another use of bold colors, and another bold choice to forego images until a few screenfuls below.

There’s a split meets centered logos theme going on here, followed by lots of icons to describe their service benefits.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

Typography – Type Scale
“Preview and choose the right type scale for your project.”

User Interface Design, HTML – Don’t cut corners when coding UI
“Here’s a list of common mistakes that can be easily fixed with 3 lines of CSS or JavaScript code.”

Responsive Web Design – Responsive images – end of year report
“It’s nearly two years since I suggested a <picture> element as a strawman proposal as a way to solve the problem of responsive images, so let’s have a look at how we’re doing.”

CSS – Tetris & The Power Of CSS
“To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I’ve become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS.”

Never Make These Mistakes in Corporate Website Design

February 7, 2012 By Devlounge

All of us made mistakes. It is natural and inevitable. However, it would be best if we take note of our mistakes, learn from them and never do them again. On the other hand, we can minimize committing a mistake if we are just pro-active enough to know how we can avoid them.

In creating a corporate website design, novice and experienced alike make mistakes. Listed below are few of the dos and don’ts for corporate website design. [Read more…]

Friday Focus 01/27/12: Solid Color Coded

January 27, 2012 By Sophia Lucero

Welcome to the last Friday Focus of the month! This week we’re featuring sites employing blocks of color as a dominant part of their designs. Who says we need to use gradients in everything we do? See how it’s done.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Medis Kök & Bar website — Medis Kök & Bar

Always a good idea to grab inspiration from your logo and and translate it directly into your design. Here you have a sumptuous photo slideshow on the homepage, but inside it’s all color blocking, with each page title in its own column, and the body copy to the left. It’s only unfortunate that background images had to be used instead of real text, and again, too much all caps.

It looks like color coding and icon-based navigation go hand in hand in this trend. Lots of boxed in elements here, but still looks very light and breezy. I particularly like the background pattern made up of the icons you find in the navigation, but arranged in a way that’s both luxe and cozy at the same time.

Favolla Comunicação website — Favolla Comunicação

I like the paper-based forest in the background and the icon designs that mesh so well with the logo. What puts me off a little, however, is the uneven alignment of the boxes and the justified text.

Orestis Webdevelopment website — Orestis Webdevelopment

Once again, another icon-focused design, but in this case they’re quite abstract and futuristic looking. The use of very colorful hues is just right and not overwhelming at all.

Maria Helena Cunha's website — Maria Helena Cunha

Two more familiar trends here: triangles and the use of CMYK as the color palette. I find the text to the left a little too cramped and dark, and considering each block is pretty lengthy there should have been at least some hover effect that lit them up similar to the one you see to the portfolio on the other half of the page.

I like how each section literally uses one bold color in its background. The visualizations and and other hover effects are also lovely. Some blocks are cut off though, as if the height isn’t calculated properly, and the typesetting is a little rough.

Another CMYK (plus green) color scheme here. One good idea I noticed is the hover on each image puts on a slight tint based on the section it’s in. It’s a little confusing, though, that the four colors are used for both locations and the top navigation as seen in the circles above.

Social Media Weekly

Copywriting, User Experience – Not Lorem Ipsum
“We want clients and designers alike to think about their design and how it will work with the web copy, we want you think about how numbers, symbols and bullet points will look.”

Typography – Our Favorite Typefaces of 2011
“The idea is simple: I invite a group of writers, educators, type makers and type users to look back at 2011 and pick the release that excited them most.”

Business – Why I don’t do “mates rates” projects
“It’s almost a certainty that at some point in your career, you’ll be asked by a friend or member of your family to work on a project and feel you should only take a nominal “mates rates” fee. Try not to.”

Typography, Accessibility, Semantics – A better way to use icon fonts
“What do you think about this issue? Is speak:none the Holy Grail of icon fonts? Or could we use SVGs to archive similar things?”

Get solid WordPress themes, plugins, and web design training from iThemes.

Design Focus: RGB to CMYK

Designs of the Week

Social Media Weekly

Design Focus: New Age Editors

Designs of the Week

Social Media Weekly

Design Focus: Job Hunting Grounds

Designs of the Week

Social Media Weekly

Never Make These Mistakes in Corporate Website Design

Friday Focus 01/27/12: Solid Color Coded

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Vectr: a free graphics editor on your desktop and in the browser

Search