At the heart of all designs and websites are words, and these featured ones for the week take extra care to make the most pertinent words on the page the stars. They’re broken down and transformed into graphic elements of their own.
Designs of the Week
Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!
This layout reminds me of the eye chart at the ophthalmologist, except prepare to be blown away by the zooming in effect that occurs when you scroll down—making it look like inverted version of Star Wars scrolling narration. Each line contains 5 letters, sometimes abbreviated, as project label, and hovering over it shows a grainy, grayscale icon. On the project page, sites are framed with Chrome browser windows (designers usually favor in OS X Safari) and scattered around. Clicking on one image draws up a larger version, but not before blanking out the other images and putting x marks over them.
Except for the blog and some accent images, this design is done in yellow, black, and white—a yellow background that is, which is a very strong look. The homepage and manifesto is an example of non-linear scrolling, and you can see their logo’s letters also distributed in a much larger scale in the background. The sentence by sentence message is also overlaid on live, clickable snippets of the other pages. The blog page is an equally interesting study: there’s a drop-down menu for the category list set in very large, uppercase, yellow type. Search also appears in a similar way. Post images occupy majority of the width on the left, but are also arranged dynamically.
There are astrology and alchemy motifs to this design, with the parallax starfield interacting with your mouse movement and the map design in the background, as well as the labels for the different sections and the chemical elements-style naming for their team members. The loading bar at the bottom of the page, a pattern YouTube also does, is a nice feature.
This zine uses varying pastel colors as backgrounds, stark black text and spaced out lettering, a bordered homepage / table of contents with various symbols, and playful headlines.
This is like the third site in this list that has taken to arranging images outside of a grid and more like a collage.
Clever effect with the title. The navigation has even tinier text than the last, reaching uncomfortable to read levels. I would also have preferred a smooth scrolling for those anchor links to fit the parallaxed background.
Social Media Weekly
Get solid WordPress themes, plugins, and even design training from iThemes.
Business – Job Titles in the Web Industry
“Since they are out there and we use them, there should be some consistency to their definition. Perhaps we can get closer to nailing that down.”
User Interface Design – 3 Parts of Good Visual Interface Design
“If all are satisfied, we arrive at work of the best degree. If only one or two are satisfied then the work will be mediocre.”
Typography – Here’s another roundup that’s not only inspiring but useful for web designers: websites showcasing the elegant and exciting qualities of typefaces you can purchase. Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today. Like a photowalk, replace the “photo” with “font” and “walk” with “scroll”. One of the highlights of this interactively scrolling one-pager is seeing different fonts of the same family morph from one into the other in the same context, as well as their varying ligatures. There are even cool transition effects for it, like a diagonal transparent gradient gliding over the screen, mimicking uncovering a page, and fun examples like slot machines, medals, and badges. An insanely in-depth page with multiple layouts showing the typeface specimen—articles, headlines, signs, letters, book spines—all in live HTML and CSS. So you can see some cool effects like stroked text, shadows, and gradient fills. But the best part is, everything is editable! Now that’s true interactivity for people who want to try before they buy. This site takes a glyph by glyph approach and off-canvas transitions to display the families: clicking on the edges of the page slides to that adjacent page. On the bottom you can pick the letter or number that’s displayed. A darker yellow signifies a heavier font weight. Strong elements all around—on top of all the capital letters, even the striped background isn’t one to shy away. The googly eyes in “look” are animated left and right. Layout and text sizing is responsive. I wish all of the form elements were done with live HTML, and for even more brownie points, the animated stripes. Simpler compared to the other designs featured on this list, but still quite pleasant. Good call to add accolades on the page and photographic evidence of the typeface usage in real life. Dark look brightened up by a couple of greens and a spirnkle of red. Several kinds of textures are in use here, somewhat echoing the use of various typefaces as well. Cheerful illustrations coupled with tongue-in-cheek examples of the font in action. I just wish that the complete glyph listing were in a more creative presentation than a lightbox. There’s a more educational and informative slant for the design and content of this page, and the speciment is relegated to the PDF like most other fonts are, but it’s still an appealing site. Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out! Web Standards – DiagnostiCSS CSS – Sizing (Web) components Javascript – Which JavaScript Library Should I Pick? A short list of websites where the & symbol is the star. Grab some inspiration from everyone’s favorite typographic mark. Get solid WordPress themes, plugins, and web design training from iThemes. If you’re wondering why the color scheme looks familiar to you, that’s because it’s actually from the ubiquitous Google. Aside from being section markers on the side, even the icons carry the trademark four colors as accents. The interactions combine both vertical and horizontal uncovering effects—the former for scrolling and the latter for page-hopping. This design speaks in black, white, and red, on top of bold slab fonts and icons in circular frames. I see design elements that look familiar and made new again: gradients, repeating backgrounds, ribbons, translucent layers. All with a responsive touch. This one’s more of the homey, personal, crafty style—highlighted by lighter text colors and elegant patterns and swashes. The ampersand on each post heading falls right into place. Make Headway, make intuitive layouts, make it your WordPress theme of choice! User Interface Design, User Experience – How to radically simplify your user interface Design – Web Colour Data Grids are an absolute must when building any design, but this week’s featured sites apply the rhythm of an even grid to lay out their portfolios, becoming the first and pretty much only thing you see when you come visit them. The result is a very neat look—or perhaps stark to other pairs of eyes—but very honest. Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out! I like the little detail of the fixed header and footer on a layer above the scrolling content. The portfolio items all look similar but they don’t have the same form factor, so there’s an interesting play between uniformity (in the look) and diversity (in the shapes), but still not chaotic. Only question I have is if the white text is readable enough on that shade of gray. I find extremely interesting and delightful that animations and icons are used in the portfolio grid instead of the usual thumbnails. Makes you curious enough to see what they are a part of while standing alone as ideas of their own. Fixed elements at the four corners of the screen are at play here, too. Beautifully responsive and AJAXy, with a little animation applied to the background pattern of the info box in the bottom. GIFs are making a comeback with designy sites. Also expectedly loses the circles and the layout in the inner pages. Create unique, extraordinary websites with Squarespace. No experience necessary! Responsive Web Design – Viewport Resizer Responsive Web Design – Responsive Menu Concepts CSS, Debugging – 20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know JavaScript, Debugging – You Really Should Log Client-Side Errors Interaction Design, User Experience – Hover States Typography, CSS, User Experience – Please Stop “Fixing” Font Smoothing It’s that time again for a roundup of smartly-designed sites you should look to for inspiration. And this week it’s all about sites dedicated to typefaces you can buy and download. See how they peddle these digital goodies to customers. Get solid WordPress themes, plugins, and even design training from iThemes. It’s easy to make the connection between the name of the font and the design concept at work here: aside from the compartmentalized/bento arrangement, it’s also the colorful scheme and the chalkboard signs that remind you of those cozy cafes with handwritten menus. Practically every box has a simple animation looping back and forth, but nothing too distracting and adds to the kitsch. Another cafe/restaurant-themed design that’s all warm and welcoming. I like the subtle icons on both sidebars and the embossed treatment on it and the text. The plaid background pattern also reinforces the look, not to mention the choice of fonts and colors. There’s a nice little exploding effect as you scroll down, which is a great idea for font sites if you ask me. Even smarter is how texts appear once you arrive at that section of the page, making sure you’re on the right track about what you should be looking at. Simple, solid, effective. Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest. Programming – You Have To Get Good Before You Get Better CSS – SASS vs. LESS Mobile Web Design – Your local mobile device lab Web Standards – Cutting the mustardDesign Focus: Type Specimen
Designs of the Week
Social Media Weekly
“Visually detect any potentially invalid or inaccessible HTML markup”
“So how can we make it easier? Well, by sneaking aTrojan horse into your components and use it to control all the size related CSS properties.”
“Since a JS library is often used when developing a user-facing product, I think of the strategy as satisfying two audiences: the developers that must code and maintain the use of the library, and the users that will interact with it.”Design Focus: Ampersands
Designs of the Week
Social Media Weekly
“Cutting too many UI elements may complicate the problem and not be the right solution, but designing the most minimal solution will show you new methods you wouldn’t have thought possible before.”
“With a crowd-sourced data-set, the ultimate goal is to answer questions like: What is the most common colour/s or hue/s on the web? Do certain industries prefer certain colours over others? What colours are generally found together?”Design Focus: Tidy Grid Portfolios
Designs of the Week
Social Media Weekly
“The smartest way to share your defined environment of devices and breakpoints directly with your team and client.”
“Three of them are made with pure CSS and one uses a single line of JavaScript.”
“This article is recommended for ADVANCED developers.”
“Too few websites log JavaScript errors. Let’s build a simple system to track client-side errors.”
“New & interesting examples of movement in interaction design, curated by Chambers Judd.”
“The antialiasing mode is not a “fix” for subpixel rendering — in most cases it’s a handicap.”Design Focus: Type Sites
Designs of the Week
Social Media Weekly
“There are three things to bear in mind when you look at the process of acquiring skill: how you think your rate of progress will look at the beginning, how your rate of progress actually is day-to-day and how you think your rate of progress is day-to-day. Let’s look at some charts to get a better picture of what I’m talking about.”
“Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that’s cool, at least you are doing yourself a favor by preprocessing.”
“This is great! Just by opening up the testing suite to everyone, it has now expanded beyond what I had been able to gather together by myself.”
“One of the immediate challenges we discovered when we first started the responsive news prototype was the large range of devices that we would have to support. It terrified us. This article is about a solution we use to alleviate this problem.”
