タグ

関連タグで絞り込む (25)

タグの絞り込みを解除

UIとiPhoneに関するsippo_desのブックマーク (9)

  • iPad ProでUIスケッチできるアプリBluprint をリリースしました


    UXデザイナーのiPad Proレビュー記事で、UIのスケッチにいいと。僕自身もスケッチが大好きなので、ものすごく欲しくなって。この記事に挙げられているのが﹃純正メモ﹄と﹃Adobe Comp﹄なんですけれども、Compは機能が中途半端で、僕はこれを使うならSketchでいいんじゃないか？と感じたので、純正メモでスケッチをしてみました。カメラでいちいち撮影したり消しカスに悩まされることがなくなり、確かに圧倒的に紙より捗るものの、幾つか問題がありました。 Notesアプリで描いたスケッチ毎回画面のスクウェアを描くのが面倒スクウェアは勘で描くので、サイズがiPhoneと同じにならないもちろん解像度もiPhoneと全く異なるアイコンなどを何回も描かなくてはならないMacに転送した場合、画像をトリミングしてからでないとInVisionなどのプロトタイピングサービスに配置できない1画面に2〜3個しか
    iPad ProでUIスケッチできるアプリBluprint をリリースしました

  • Adobe PreviewでiPhoneアプリのデザイン確認


    Photoshopを使ってスマートフォンアプリのUIをデザインするコツを学ぶ連載。前回までで作例となる﹁お天気投稿アプリ﹂のデザインがひととおり完成しました。連載最終回は、前回仕上げたデザインをエンジニアに渡すまでの手順を追って紹介します。 お天気投稿アプリのUIデザインチュートリアル ▼第2回 1.アプリの配色を考えよう 2.ドキュメントを新規作成する 3.基本的な要素をレイアウトする ▼第3回 4.レイヤー効果を使って質感のあるボタンを作る 5.Illustratorで作ったアイコンを配置する 6.写真を配置してデザインを調整する 7.SNS連携ボタンを配置する ▼第4回 8.実機で見た目を確認しよう 9.パーツ画像を書き出そう 10.ガイドラインの作成 8.実機で見た目を確認しよう Photoshopでアプリのデザインを仕上げたら、iPhone実機に表示しましょう。第1回で紹介したア
    Adobe PreviewでiPhoneアプリのデザイン確認

  • iPhone 6 & 6 plusのデザイン対応について【随時更新】 - デザインメモ


    iPhone6とiPhone 6 plusが発表されましたが、アプリのデザインを担当している私がもっとも気になるのが﹁今のアプリのデザインをどう変える必要があるのか？﹂。 実際、Appleは謎の解像度にしてしまったため、単純に拡大すれば良いってわけじゃなさそうなので、私なりに調べたこと・わかったことを随時更新していこうと思います！ 最終的には、こうしたら上手くいった！リデザインはこうしたら良い！までもっていけたらと思ってます。 目次1、画面解像度について2、画像サイズやデザイン作業について その他1、画面解像度について 解像度などを比較するインフォグラフィックス ↓ 2014/09/16 up 海外でこんなサイトが公開されていました！ iPhone 6 Screens Demystified – PaintCode 解像度がわかりやすく紹介されています。 iPhone6 plusは
    iPhone 6 & 6 plusのデザイン対応について【随時更新】 - デザインメモ

  • PhotoshopでiPhoneアプリのUIを作るための準備と設定


    WebデザイナーがWebサイトだけでなく、スマートフォンアプリをデザインする機会が増えています。 ところが、Photoshopを使いこなしているデザイナーでも、UIのデザインとなると勝手が違い、試行錯誤している方が少なくないようです。本連載では、Photoshopを使ってアプリのUIをデザインするコツを、デザイナーのハマダナヲミさんが解説します。︵編集部︶ Photoshopはもともと写真編集のためのソフトでしたが、印刷物やWebのデザインツールとしても使われるようになり、いまではデザインツールとしてPhotoshopを使っている方が多いのではないでしょうか。最近ではアプリのUIデザインにも便利な機能がどんどん追加されています。この連載ではWebデザイナーを対象に、iPhoneアプリを題材として、PhotoshopでUIをデザインする方法を紹介します。 第1回は、アプリ開発の大まかな流れを
    PhotoshopでiPhoneアプリのUIを作るための準備と設定

  • スマホUI考3 ～ ジェスチャ入力について | fladdict

    スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ

  • アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita


    業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UIが混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
    アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita

  • Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ


    Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の﹁作業のパフォーマンスを向上させる設定﹂はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UIDesign 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定R

  • cmmntr.com

    This domain may be for sale!

  • Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice

    アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ

    Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.