Google Visual Assets Guidelines - Part 1 - Behance
Google’s brand is shaped in many ways; one of which is through maintaining the visual coherence of our visual assets. In January 2012, expanding on the new iconography style started by Creative Lab, we began creating this solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity.
Making accessible icon buttons - Human Who Codes
Posted at April 1, 2013 by Nicholas C. Zakas Tags: Accessibility, ARIA, HTML, Screen Readers Last week, Pamela Fox tweeted a question to me: @slicknet Do you know the best way to make a that just has an icon accessible? title, aria-label, hidden text? — Pamela Fox (@pamelafox) March 26, 2013 As tends to happen on Twitter, we fruitlessly exchanged 140 character messages trying to get some resolutio
Thumbnail Grid with Expanding Preview | Codrops
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images. If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a
Sara Soueidan - How to Create Windows-8-like Animations with CSS3 and jQuery
How to Create Windows-8-like 3D animations with CSS3 and jQuery By SARA SOUEIDAN on February 11th, 2013 The Markup The CSS The Javascript I have recently realized that it's been such a long time since CSS3 animations were introduced into the web, and yet I haven't really experimented or made any demos with them before. I've also been using Windows 8 for a while now (and loving it), and the first
Almost Flat Design – Matthew Moore Design
Flat design is both hot and controversial in world of user interface. Microsoft led the charge to introduce it to the masses and many others have followed suit: LayerVault, The Next Web, and more. Many designers have been calling it a fad since early on, thanks in large part to the UX problems it presents in interfaces that reach a certain level of complexity. Flat design is beautiful and refreshi
404ページに何を書く？ - やっぱりWebが好き - Writing Mode
Webサイトを作っていて、いつも迷うのが404ページのデザインと文言。 普通に考えて、もっとも制作の優先順位の低いページが「404 Not Found」なわけで、本来は表示されてはならないページです。なので、制作が終わりに近づく頃になって「あ、404作らなきゃ」って感じで作ることが多いんですが、いつも適当に有名ポータルサイトや大手企業のコーポレートサイトを参考に、その場しのぎで文言を見繕ってしまう。 そこで今回のエントリーは、今後の自分の制作に活かせるよう、404ページのデザインと文言を「あるべき姿」という観点でまとめてみます。 新年明けましておめでとうございます。HiGash.Net からリニューアルして初めての年越し。個人的にはまだWriting Modeは完成形ではないんだけど、今年から少しずつ世に存在をPRしていきたいと思っています。今年もよろしくお願いします。 さて、新年1発目の
Interactive Guide to Blog Typography
Have a blog? With small adjustments, you can noticeably improve its typography. Your readers will thank you for it. This guide will help you understand the typographic foundations that will improve the readability of your articles. Made by Tommi Kaikkonen. Check out my blog. Contents Layout Measure Line Height Visual Hierarchy Title Paragraph Fonts Hinting Font Size Color Small Caps The End Click
A Discussion on the Flat Design Aesthetic — Speckyboy
A growing trend in web and UI design lately has been the use of “flat design,” and it’s clearly a hot topic at the moment – full of lively discussion and plenty to learn about. I’ve always been drawn to minimalism, so the flat design is an aesthetic that has inspired me, especially while working on the recent redesign of QuoteRobot, the proposal writing app I co-founded back in 2010. In this artic
Hamburgers & Basements: Why Not to Use Left Nav Flyouts
Hamburgers & Basements: Why Not to Use Left Nav Flyouts “Good design makes a product understandable” – Dieter Rams Good navigation should do at least three things well: (1) it should allow the user to navigate; (2) it should serve as wayfinding, letting the user know where they are; and (3) it should help the user understand what the product is capable of. If your navigation is not doing these thr
Style Manual
Introduction I will always stick to British (Australian) spelling, but the rules of punctuation vary more subtly between British- and American-English; I’d like to pluck the most common sense rules from both. This is an absolutely incomplete, personal reference. When something is in question, I plan to document the opinions of multiple books, drawing my own conclusions and setting my own rules for
CSS ボタンのグラデーションとボーダーをグレースケールの RGBA で
CSS でボタンを作るとき、背景のグラデーションとボーダーをグレースケールの RGBA にしたものをもとにすると、背景色やフォントを変えるだけでバリエーションが作れるので便利です。 button { background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); background-origin: border-box; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.25em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.1); cursor: pointer; display: inline-block; line-he
How to recreate the new e-bay site scrolling effect
In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css. Step 1 – Prerequisities We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px. Step 2 – Html The markup is simple.
LukeW | Off Canvas Multi-Device Layouts
Off Canvas Multi-Device Layouts by Luke Wroblewski June 21, 2012 Most multi-device layout patterns for the Web are designed to rearrange page elements within a visible browser window. Off canvas multi-device layouts, on the other hand, use the space outside a browser’s viewport to hide secondary elements until people need them. Jason Weaver and I put together demonstrations of several new off canv
Tim Brown: Molten leading (or, fluid line-height)
Fri, 3 Feb 2012 This is not a demo. I’m only explaining a need as I see it. I don’t have the JS chops to make it real. Maybe you do? Updates Mat Marquis made Molten Leading and this nifty demo Jim Jeffers made jQuery-minLineHeight Original post When a responsive composition meets a viewport, there are different ways to fill space. What interests me most here is a fundamental triadic relationship i
5 Really Useful Responsive Web Design Patterns
Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. The art of layout was already complex enough for the centuries that it was defined by fixed elements, now things are becoming exponentially more complicated as layouts become increasingly adaptive. To help reprogram your brain to consider layouts in new ways, we’re going to take a lo
ColorHexa
カラーパレットの簡単なジェネレーターとしてColor Scheme Designer 3を使うことが多かったけど、最近はColorHexaも併用している。パレットの生成ツールとしてはColor Scheme Designer 3のが見やすく使いやすく高機能なので、ちゃんとしたい場合はそっちを使っているけど、Webセーフカラーへの丸めやShadesとかHSLへの変換などが必要になった場合にColorHexaを使うようになった。 ColorHexaでは調べた色のpermalinkが作られるので再利用しやすい。このWebサイトのテーマカラーである#558899を例にすると、ドメインにRGBを付けたURLになる。CSSのコメントとしてColorHexaのpermalinkを埋め込んでおいたりすると後で楽になるし、世の中RGBを見て色がすぐ分かる人は少ないので説明しやすい。 画像から色を抽出するウェ
LukeW | Multi-Device Layout Patterns
Multi-Device Layout Patterns by Luke Wroblewski March 14, 2012 Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoodUI
http://handywebdesign.net/2013/01/how-to-make-girly-site/
What is Web Hosting and How Does It Work? | Complete Guide [2020]![What is Web Hosting and How Does It Work? | Complete Guide [2020]](https://cdn-ak-scissors.b.st-hatena.com/image/square/23e24a9fcc02839b52c336530b552aa0128ebddf/height=288;version=1;width=512/https%3A%2F%2Fcreateaprowebsite.com%2Fwp-content%2Fuploads%2F2018%2F06%2Fwhat-is-web-hosting-how-does-web-hosting-work.jpg)
