Articles tagged: Design

Found 64 documents

• Archive/Apps/Design The items under this section apply generally to Web app design.
• Archive/Apps/Design/Design_guidelines Design guidelines to help create intuitive apps that work across platforms.
• Archive/Apps/Design/Design_patterns_and_assets Design pattern information, along with building blocks and assets to help with rapid prototyping ...
• Archive/Apps/Design/Planning
• Archive/Apps/Design/Planning/General_design_principles Be consistent in your language. Refer to an action or an item with the same term in your app, ...
• Archive/Apps/Design/UI_layout_basics
• Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design Both responsive and adaptive design attempt to optimize the user experience across different ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks The code for the Firefox OS Building Blocks can be found in the Gaia Github repo under ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/2.3
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Action_menu Place the most commonly used or important items at the top of the Action Menu. Negative actions ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Banners Status 2.0 implementation
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Buttons
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Context_menu The Context Menu contains one or more items. The menu can expand in height to accommodate ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Dialog
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Drawer Drawers can also be used to access user-generated content such as browser tabs, accounts in an ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Header This article describes the implementation and possible interactions with the header.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Input_area This article describes the implementation and possible interactions with the input-area.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Layout You can find this structure in most apps in Firefox OS: Fixed header and footer with scrollable ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/List_items This article describes the implementation of list items.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Picker None as yet.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Progress_and_activity This article describes the use of progress bars and activity toolboxes.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Scrolling This article describes the implementation and possible interactions with the scroll bar.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Search None as yet.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Slider This article describes the implementation and possible interactions with the slider.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Subheader None as yet.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Switches This article describes switches and their various types along with their respective ...
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Tab_Filter This article describes filters and their implementation.
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Toolbars
• Archive/Firefox_OS/Firefox_OS_apps/Building_blocks/Value_selector
• Archive/Firefox_OS/Firefox_OS_apps/Copy_styleguide
• Archive/Firefox_OS/Firefox_OS_apps/Icon_font The Firefox OS Icon font can be downloaded from the Gaia icons store on Github, or you could use ...
• Glossary/Block/CSS A block on a webpage is an HTML element that appears on a new line, i.e. underneath the ...
• Glossary/bounding_box The bounding box of an element is the smallest possible rectangle (aligned with the axes of that ...
• Glossary/Card_sorting Card sorting is a simple technique used in Information architecture whereby people involved in ...
• Glossary/Information_architecture Information architecture, as applied to web design and development, is the practice of ...
• Glossary/Ligature A ligature is a joining of two characters into one shape. For example, in French "œ" is a ...
• Glossary/Mobile_First Mobile first, a development of progressive enhancement, is a design philosophy that values ...
• Glossary/Pixel A pixel is the smallest building block of a graphical display like a computer screen.
• Glossary/Progressive_Enhancement Progressive enhancement is a design philosophy that delivers a first-class experience in ...
• Glossary/Responsive_web_design Responsive Web Design (RWD) is a Web development concept focusing on making sites look and ...
• Glossary/RGB Red Green Blue (RGB) is a color model that represents colors as mixtures of three underlying ...
• Glossary/UI User Interface (UI) is anything that facilitates the interaction between a user and a machine. ...
• Glossary/UX UX is an acronym that stands for User eXperience. It is the study of the interaction between ...
• Learn/Common_questions/Common_web_layouts There's a reason we talk about web design. You start out with a blank page, and you can take it ...
• Learn/Common_questions/Design_for_all_types_of_users When you're building a website, one top issue to consider is Universal Design : accommodating ...
• Learn/Getting_started_with_the_web It's a lot of work to create a professional website, so if you're new to web development we ...
• Learn/Getting_started_with_the_web/What_will_your_website_look_like Before you do anything, you need some ideas. What should your website actually do? A website can ...
• Learn/HTML/Multimedia_and_embedding/Responsive_images That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As ...
• Mozilla/Firefox_OS_for_TV/User_interface_animation_design The approach to design Firefox OS for Television is fundamentally different from phones or ...
• Mozilla/Firefox_OS_for_TV/UX_overview/Icon_design This article explains how to create app icons for Firefox OS Smart TVs using the relevant subset ...
• Tools/Responsive_Design_Mode Responsive designs adapt to different screen sizes to provide a presentation that is suitable ...
• Web/Apps/app_layout Creating an effective layout for a modern web site or app is a challenge. In some ways, your job ...
• Web/Apps/Fundamentals/Quickstart There are many different ways to build an open web application. With so many frameworks, ...
• Web/Apps/Fundamentals/Quickstart/Application_setup Though we are deferring a decent amount of responsibility to Ember CLI, it is still important to ...
• Web/Apps/Fundamentals/Quickstart/Building_simple_functionality In the previous two sections we learned how to generate a basic app skeleton, view it in the ...
• Web/Apps/Fundamentals/Quickstart/Design Quickstart information on designing open web apps.
• Web/Apps/Fundamentals/Quickstart/Testing_and_debugging If you don't currently have your Ember CLI application running locally, use your command line or ...
• Web/Apps/Rec_Room_-Animation_and_Graphics TODO This section needs more work
• Web/Apps/Rec_Room_-_Data_Management_and_Offline When developing for mobile devices, we face some unique challenges around storing and ...
• Web/Apps/Rec_Room_-_Networking In order to communicate with a web service, we can specify a `systemXHR` permission in our ...
• Web/Apps/Rec_Room_-_Web_APIs WebAPIs are simply JavaScript APIs that allow applications to interact with mobile device ...
• Web/Apps/Rec_Room__-_User_Interface_and_Layout_ FirefoxOS leverages HTML and CSS for user interfaces. The website Building FirefoxOS, produced ...
• Web/CSS Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a ...
• Web/Demos_of_open_web_technologies Mozilla supports a wide variety of exciting open web technologies, and we encourage their use.  ...