A case study showing how we replaced wirefaming with a framework led prototype to better deliver a responsive web design. by Ben Scammels, Designer at http://www.makemedia.com
Building information modelling (BIM) is a process involving the generation and management of digital representations of physical and functional characteristics of places. Building information models (BIMs) are files (often but not always in proprietary formats and containing proprietary data) which can be extracted, exchanged or networked to support decision-making regarding a building or other built asset.
Building information modelling (BIM) is a process involving the generation and management of digital representations of physical and functional characteristics of places. Building information models (BIMs) are files (often but not always in proprietary formats and containing proprietary data) which can be extracted, exchanged or networked to support decision-making regarding a building or other built asset.
Watch to learn how to:
- Read and understand YOUR Level of Information Needs
- Define the most efficient submittal and checking workflow
- Keep QA records of task reviews and approvals
- Use structured Plannerly data with Dynamo, Revit, Archicad, Power BI and more!
FULL WEBINAR RECORDINGS HERE: https://www.plannerly.com/iso-19650-webinar
Summary:
1. Understand ISO 19650 Requirements for Information Model Delivery
2. Define a Submittal Workflow
3. Check Your Work Before Submitting
4. Define a Checking Workflow
5. Use Structured Data
6. Allocate Time For Checking
7. Know What To Check Against
8. Document QA Records Properly
9. Combine Tools And Process
Web Hosting, Web Design & Development Technical ProposalAnthony Waweru
This is sample technical proposal document created by nichewebcreation.co.ke as guide to help web design beginners get their footing in the world of web design and development as well as writing good proposal to get clients.
Watch to learn how to:
- Read and understand YOUR Level of Information Needs
- Define the most efficient submittal and checking workflow
- Keep QA records of task reviews and approvals
- Use structured Plannerly data with Dynamo, Revit, Archicad, Power BI and more!
FULL WEBINAR RECORDINGS HERE: https://www.plannerly.com/iso-19650-webinar
Summary:
1. Understand ISO 19650 Requirements for Information Model Delivery
2. Define a Submittal Workflow
3. Check Your Work Before Submitting
4. Define a Checking Workflow
5. Use Structured Data
6. Allocate Time For Checking
7. Know What To Check Against
8. Document QA Records Properly
9. Combine Tools And Process
Web Hosting, Web Design & Development Technical ProposalAnthony Waweru
This is sample technical proposal document created by nichewebcreation.co.ke as guide to help web design beginners get their footing in the world of web design and development as well as writing good proposal to get clients.
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit
Full version of the 2012 Tapit presentation at the Cannes Festival of Creativity presented by Andrew Davis & Jamie Conyngham.
For more Tapit feel free to visit us at http://www.tapit.com.au or follow us @tapitnfc
Any questions can be emailed to contact@tapit.com.au
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVPascal Dasseux
cette key note a été faite en introduction de la 1ère journée de la Mobile Marketing Association organisée à Paris sur le thème complémentarité TV et Mobile - Tablettes
With an impressive 70% viewing mobile ads as a personal invitation from brands rather than an invasion, it opens up new opportunities for brand advertisers to engage with their consumers.
The web you were used to is gone. Architecture and strategy for your content.Alberta Soranzo
Information architecture and content strategy are the foundation of any website but, when it comes to mobile, they can literally mean the life or death of a product. The truth is that even the best-designed and well-engineered mobile products can still fail if their IA is not sound, and that’s because mobile information architecture doesn’t only define the structure of content, but also determines how users will interact with it. And speaking of content, do you know what content should go on your mobile sites and apps? Are your users finding what they came for?In this talk we will take a look at the thought process that drives mobile content strategy, the specific challenges and opportunities of the mobile space and how information architecture and content strategy contribute to the creation of outstanding cross-channel experiences.
75 Tutorial presented at UX Scotland 2014
A guide to hiring a great developer to build your first app (redacted version)Oursky
Hiring the right developer for your startup can be wearying. In this bitesized Garage Academy session, Ben Cheng, CEO of Oursky will provide you with all the tips for hiring your first developer -- from app development team structure to recruitment to management.
About the speaker:
Ben Cheng is the CEO of Oursky, a Hong Kong-based app dev studio that helps entrepreneurs and startups turn their ideas into reality. He has driven the company’s vision, strategy, and growth since its inception in 2008, and grown the technology-driven team from 3 to over 40 in Hong Kong and Taipei.
ABOUT OURSKY:
Founded in 2008, Oursky has developed web & mobile apps for startups and enterprises such as ASOS and Thomson Reuters. In 2015, 60% of Oursky's published iOS apps were featured in Apple's App Store and one was selected as a Best of 2013 App.
Bridging the gap between UX and development - A Storybook by Marko Letic at F...DevClub_lv
The main topic of this talk is a short introduction to Storybook.js, JavaScript library that allows us to create independent and interactive UX components from already existing ones, developed in frameworks such as Angular, React or Vue. Reusing the components, we create an isolated environment that can be shared within the organization and enable a collaboration between designers and developers on a whole new level. Different use-cases will be described using Angular as a framework of choice with practical examples.
Bridging the gap between UX and development – A StorybookMarko Letic
Slides from a talk presented at FrontCon 2019 conference in Riga, Latvia.
Note: This is a keynote presentation converted to PDF. Originally it has videos that are not included here.
Talk description:
The main topic of this talk is a short introduction to Storybook.js, JavaScript library that allows us to create independent and interactive UX components from already existing ones, developed in frameworks such as Angular, React or Vue. Reusing the components, we create an isolated environment that can be shared within the organization and enable a collaboration between designers and developers on a whole new level. Different use-cases will be described using Angular as a framework of choice with practical examples.
Video: https://www.youtube.com/watch?v=QNYSCkLn4Oo
In this session, we will explore the how the recent explosion of devices has disrupted the process of designing a website that we've crafted over the past decade.
When designers only have one instance of website (i.e., desktop) to design, the layout is uniform. The header, content area, sidebar, and footer all remain static. Furthermore, the elements are relatively uniform as well. Buttons, navigation, typography, and images are all basically the same across across the various pages. But if you are designing a responsive website – one whose look and feel adapts depending whether you're using a phone, laptop, or tablet – then these elements and especially the layout begin to diverge.
After this session, you should leave with the confidence to argue the importance of responsive design to your client or boss – and that the with the proper strategy, the extra effort and costs can be justified (and hopefully minimized).
Lecture on Interaction Design Prototyping and Evaluation taught by Mark Billinghurst as part of the COMP 4026 Advanced HCI class at the University of South Australia. Taught on August 11th 2016.
Jumpstart Your Web App
Presented by Ari Rizzitano on
July 11th, 2012
Just about everyone has an idea for a web app, whether you want to implement a business tool, found a startup, or just host a fun project. Learn how to tackle design and technical challenges, take advantage of best practices, power through obstacles, and grow your idea into a successful application.
Single Page Applications - Desert Code Camp 2012Adam Mokan
Slides from my presentation on Single-Page Applications at Desert Code Camp 2012.
The event was held on November 17th, 2012 at Chandler-Gilbert Community College.
http://nov2012.desertcodecamp.com/session/565
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperOfer Zelig
We are all flooded with information: blogs, videos, millions of open source projects. In this presentation I share my insights: what are the must-know and must-have tools, frameworks and techniques you can use today (or at least know about) in order to be up-to-date.
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
Presented with Christian Ståhl
Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”.
In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
1. Design processes, prototypes
& responsive web design
(AKA: Designing For the Internet in 2012 and
sharing our experiences)
Ben Scammels - Graphic & Web Designer
2. Design Processes, Prototypes & RWD
MY BACKGROUND:
Graphic and web designer who works across UX, design and front end.
I’ve worked with many design processes over the years
THE CHALLENGE:
As we make websites responsive, old design processes become
unsuitable and inefficient
WHAT DO I WANT YOU TO GET OUT OF THIS:
To see how to replace wireframing with prototypes (using others
research/techniques) and why its a better process for responsive design
4. Responsive Web Design (Ethan Marcotte, 2010)
• RWD allows you to tailor a site’s layout and
interfaces to suit various devices
• SIngle codebase (unlike app/m.sites)
• futureproofs site
8. When the wireframe process goes responsive
KEY PROBLEMS WITH WIREFRAMES:
• RWD could increase wireframing x 3
• Wireframes struggle to show interaction
• They’re not usable - one must imagine a user journey
CONCLUSION: We need a better design process to
approach a responsive project - A PROTOTYPE
9. Our thoughts on Prototypes
• Functionality & interaction can be discussed/defined in a more
‘realistic’ way.
• Layouts work responsively
• quick/easy to produce and amend
• Minimally styled
• It’s a place to propose a solution.
Not for perfect coding.
10. A new project requires a new approach
• Small budget required an efficient process
• Client wanted to improve the mobile experience
• We got the contract based on it being RWD
• Great opportunity to test run a new process
11. Steps to making a Prototype
1. UI sketching, mobile first
2. Research ‘Accelerators’ for building prototype
3. Build the prototype based on appropriate frameworks
4. Usability test & iterate
5. Apply style layer
12. Steps to making a Prototype: UI sketching
• Helps client understand RWD
• Sketching allows discussion and
instant iteration
• ‘Mobile-first’ layouts helped the
client focus on the essential
content
“smaller screens force designers to
focus on what’s truly necessary to
a service/product” - Luke W
13. Steps to making a Prototype: research tools for UI sketches
http://sneakpeekit.com/
14. Steps to making a Prototype: research tools for UI sketches
http://sneakpeekit.com/
15. Steps to making a Prototype: Responsive UI sketching
• Sense check & Improve workshop
sketches
• Mobile then desktop versions
sketched out and discussed between
teams = iteration
• Desktop versions very light on content
NB.Tablet layouts handled in the browser
18. Steps to making a Prototype: Research accelerators (Frameworks & Tools)
FRONT-END FRAMEWORKS:
• Are a set of commonly used start-up code that can help you quickly
build a site
• They contain ‘best-practice’ coding from leading developers
(MIT, Twitter, etc...)
• Documentation = better collaboration
• HTML/CSS/JS - easy for developers
19. Steps to making a Prototype: Research accelerators (Frameworks & Tools)
FRONT-END FRAMEWORKS:
They contain MODULAR pre-coded
elements to drop in:
• User interfaces
(navigation, buttons, forms, tabs...)
• Essential styles
(fonts, colour systems, icons...
helps indicate usability)
• Page structures
(grids, layouts, templates)
20. Steps to making a Prototype: Research accelerators (Frameworks & Tools)
CONS:
• you need to learn their system (couple of days)
• the codebase is HEAVY. potentially not wise for production
• Hard to customise some elements so...
• ...can lead to ‘homogenisation’ of designs/layouts unless tailored
22. Reviewing Frameworks & Prototyping tools
• Aimed at the UX market
• WYSIWYG tool for making
prototypes
• Outputs html/css/js so can be
integrated into other prototypes
• Quirky to learn (a bit like flash)
• Expensive
• Isn’t responsive
• Not ideal for all team members but great for UX
http://www.axure.com/
23. Reviewing Frameworks & Prototyping tools
• similar to bootstrap
• Responsive
• More UI elements & common
layouts included
• ‘dumbed down’ - easier for
designers with code knowledge
• ‘Stencils’ for Illustrator/omnigraffle
(if you have to do wireframes)
http://foundation.zurb.com/
24. Reviewing Frameworks & Prototyping tools
PROS
• Resource of current
responsive layout, navigation
& UI patterns
• Provides analysis
• lighter code =
easier to customise
• could be used for production
http://bradfrost.github.com/this-is-responsive/patterns.html
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle
25. Reviewing Frameworks & Prototyping tools
CONS - Not intended for reuse so:
• No documentation
• not styled so extra work required
• not as ‘modular’ as framework
(requires coding knowledge to be
able to drop elements in)
http://bradfrost.github.com/this-is-responsive/patterns.html
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle
26. The Prototype
• existing content = understandable
• Usability test (‘early and often’)
way before production code is
available
• character counts for copywriters
• helps spot missed functionality
early in timeline
27. Conclusion
• Responsive web design is a pragmatic and economical approach to modern
web design.
• Traditional design methods become unmanageable when going responsive.
• Mobile first helps us refocus on users and what they really need and want.
• ‘The pen is faster than the mouse’ - sketching is a quick way to iterate layout
and design decisions (and facilitate conversation)
• Prototyping (using frameworks) quickly brings a design closer to its final form
and helps assess interactions, functionality and responsive layout.
• Prototyping helped raise flaws, issues and unconsidered aspects early on in
the project timeline
28. Thank you for your time.
Any Questions?
FURTHER READING:
http://coding.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-
device-with-foundation/
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-
foundation/
29. Responsive Design Layer
• Avoids the same issues
of multiplying design
documents
• Can be part of a handover
doc to front end devs
