運が良いことに、自分はこれまで1冊の単著と2冊の共著を書かせて頂くという機会に恵まれました。もともと文章を書くのは好きでしたが、本を書いて出すという経験によって、ブログ記事とはまた違った知見を得ることができました。 昨年とあるイベントで「デザインツール系の書籍を書く時に知っておくといいこと」というLTをしたところ、一部の人にウケがよかったみたいなので少し内容を補足してご紹介します。デザインツールのみならず、文章を書くうえで自分が気をつけていることも折り混ぜていますので、執筆予定ないよ！な方でも何かしら参考になるのではと思います。 本を書く前に なぜ出版するのか？ 技術系の本の場合、紙の本で出すということには様々な制約が付きます。まずはアップデートの問題。校了直後に対象ソフトがメジャーアップデート、という悲劇は多くの著者さんが経験あると思います。電子書籍であれば継続的なアップデートも可能です
先日リリースした、スマホアプリのペーパープロトタイピング用ノート。 商品として販売した以上、お客様のフォローアップは必須。ということで、ペーパープロトタイピング講座をはじめようかと。 全体構成は以下のような感じで、5回ほどにわけて解説していければと思います。 第1回、どうして紙でプロトを作るのか？ 紙で行うプロトタイピングの利点や特徴。ワイヤーフレームとの違いについて。 第2回、ペーパープロトタイピングに使う道具 自分でやってみるのに最低限必要な道具や、あると便利な小物などを紹介。 第3回、ペーパープロトタイピングの仕方 実際に紙をつかって、アプリケーションのプロトタイピングを行ってみる。 第4回、見やすいペーパープロトの描き方 チーム共有やプレゼン用に、見栄えのいいペーパープロトを手早く描く方法。 第5回、ペーパープロトから動作モックアップを作る POPなどのアプリを使って、紙のプロトタ
この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く
One way to gauge mobile experience is to look at the tools at our disposal. Prototyping tools enable us to build wireframes and click-dummies. We seem to be in a better position than ever to design great experiences in virtually no time. However, these tools come with a hidden cost: they tempt us to skip the key step necessary to creating a well-designed product — which is to take the time to unde
Some rights reserved by Rosenfeld Media ウェブサイトやアプリを設計する際に多くの方は紙とペンを使い、スケッチをしながら画面繊維などを考えるといいます。これは「ペーパー・プロトタイピング」とよばれる開発手法。プロトタイプを作ることで、どのようにユーザーに使ってもらうのかをイメージしながら開発が行なっていくことができるというもの。 僕がエディターとして関わっているStartup Datingでは、以前こんなワークショップも開催しています。興味のある方は以下のレポートをご覧ください。 ユーザが使いやすいインターフェースをペーパープロトタイピングを通して考える「画面遷移ワークショップ」レポート | Startup Dating [スタートアップ・デイティング] このペーパープロトタイピングの手法をさらに簡単なもの、イメージしやすいものにするためのアプリが「
9 Comments Cool examples, but I find it so hard to sit and sketch when I can do this work in half the time(and in more detail) using my desktop. However some pitches I do try include hand rendered ideas if I think it can win a deal. Yes, I agree, cool stuff and so, but to much time lost, I can do this on my desktop with premade elements, so I can save a lot of time and paper 🙂 Actually, you lose
ワイヤーフレーム？ 企画やサイトの方向が決まったら、どこにどういう内容を入れるかで結構悩みますよね。 PhotoshopやFireworksでやっている方もいらっしゃると思いますが、 個人的にはソフトを使用する前に、手書きのワイヤーフレームを作るのをオススメします。 メリット ・修正が早い、作業時間が早い ・細かい要素なども描けるため、よりサイトの全体像が分かる ・チームメンバーやクライアントにより直感的に伝えることができる デメリット ・具体的な数値やサイズがないため、またソフトで作業しなければならない」 ・絵が下手だと逆効果(涙目) 単純なボックスや配置の仕方よりも スケッチで細かいところまで表現することによってより理解が深まると思います。 手書きワイヤーフレームの例 iPad app sketch 結構細かいところまで描いています。 マガジンやカタログのサイトの時は撮影の時点から使え
私は、職業柄（？）プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。 そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。 たった1度やって頂くだけでも、明らかにデザインに対する見る目が変わるのでお勧めです。 なぜスケッチが必要か？ 多くのPCスクールやWebスクールでは、Photoshop などの「ソフトの使い方」を中心に教えているようですが、それだけだとWebサイトをデザインするのは難しいと思います。 なぜなら、Photoshop などのソフトは「頭の中にあるもの」を制作することはできますが、「頭の中にないもの」を制作することは難しいからです。 デザインは、ソフトが自動的にやってくれるものではありません。 自分の力で1から作る必要があるのです。 そのために、「良いデザイン」とされてい
Start working out your responsive layouts through sketches using our super awesome responsive sketchsheets! What's this for? We're embracing design for a multi-device world. So we need to start thinking about how our sites will look on smaller devices early on in the design process. Your code shouldn't dictate how your layouts will respond to different screen sizes. Work through those problems usi
Inspiration Inspiring UI Wireframe Sketches Gisele MullerOctober 4, 201210 Comments07.9k Wireframes are the skeleton of an idea, and it is really interesting to observe how other people do their wireframes because we can get several ideas and insights for our own projects. There are many different approaches to wireframes, from detailing kinds of information you will display, to showing a range of
SmashingApps.com digital world, life skills, point of views & lifestyle Sketching is not a new technique and now it has been widely used in the web designing process as well. By using the sketching technique in your web design, you can create a feeling of personal touch, and in this way you can give your website a personal touch. Sketching is the basic and most important phase of any design work.
Responsive Web Design Summit Aug 2012 August 29, 2012 #161 words Sketchnotable sketchnotes hand lettering collection I had the fantastic opportunity to participate in a wonderful virtual conference on Responsive Web Design by Environments for Humans. Sadly, I came in at the tail end of the first session, but I was able to catch all the others.I have played with responsive design a bit and just fin
Inspiration 23 Beautiful Sketches from Dribbble Gisele MullerJuly 12, 20127 Comments14.2k Dribbble is definitely a great place to go for inspiration and references. From textures to high quality psds, from icons to illustrations and much more, you can find almost anything there. It’s always inspiring to browse their gallery to see a lot of different approaches from talented designers. Today we gat
Every designer has their own workflow when starting a new project, even if it’s only loosely defined in their head. A typical Web project goes through a variety of steps from inception to launch, with a lot of moving parts throughout the cycle. Photoshop, Illustrator, Fireworks and even Web browsers themselves are available to aid us in our work. But with so many choices, how do we determine the r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く