Statistics
We looked inside some of the posts by deepwebart-blog and here's what we found interesting.
Average Info
Notes Per Post
1
Likes Per Post
0
Reblog Per Post
1
Reply Per Post
0
Time Between Posts
2 days
Number of Posts By Type
Text
12
Link
4
Photo
1
Last Seen Tumblr Blogs
Fun Fact
Forty percent of Tumblr users are between the ages of 18 to 25.
Text
Presentation Comments
1. Good job integrating classmates’ experiences into building out a useful application.
2. Still not necessarily fully feasible, may have technical challenges that need solving.
3. Languages currently include English and Chinese (Mandarin). May require more or making it more easy to toggle between them.
4. Make sure the last part, “Settling,” does not drag into the Penn experience too much, if the objective is to stay focused.
Additional Thoughts on my end
1. How does this connect with the various online interactions Penn forces you to go through? Should integrate better with CampusExpress and PennInTouch.
2. Considering removing menu page, and automate pushing user through 3 steps.
3. In addition to measuring usage as a success metric, consider adding # of issues/questions raised to the ISSS year over year, to see if this app improves the experience and reduces students’ friction.
0 notes
Text
Project Notes
WInitial Iteration (Paper Test)
1. Focus on connecting the three main parts better, i.e. what can be asked in the "Planning” which can then be connected to “Arriving” in a helpful manner? Consider integrating these with each other to make sure a. there is no conflicting information in the app experience, and b. it is better suited to user’s needs over the time period of use.
2. Does this need to be useful post arrival and settling? What about helping people find places to eat etc.? Initial thoughts are to avoid that and focus on just this stage of the Penn experience - keep the app focused on specific use case.
3. Don’t be limited by feasibility - test out idea of AR for in-airport navigation system to help users reach taxi pick up area.
4. Checklist needs to be more interactive, and information present about each item needs to be better connected with other resources available.
5. Very important to focus on making sure this app gets in the hands of the students who need to use it.
6. How does this help with people looking to find housing? Integrate options like Craigslist, apartments.com, airbnb, to help students learn how to navigate that aspect of moving to Philly.
7. Change visual appeal to suite that of the audience and what they are used to seeing.
Main changes for second version
1. Items to be included in the checklist have been “tightened,” and are better linked to requirements/suggestions in the arriving and settling aspects, i.e. type of phone to buy based on GSM vs. CDMA, or specifying $250 to be carried in cash in case of emergency, paying for a cab, etc.
2. Style guide redone, switching from prioritizing Penn’s style to focusing more on heavily used chinese websites and apps, i.e., QQ and WeChat. Old style guide focused on black, blue, and red/yellow. New style guide has a preference for black/white, blues, and greens.
3. Integrate AR, and add step of connecting to free WiFi in PHL to make it more feasible.
4. Add in dorms and apartments recommendations section, including instructions on how to choose one and which resources to use.
5. Make this a part of the acceptance package for students in China, and add in feedback session in Fall to improve for the next year’s users.
0 notes
Text
Grid Based Design
Designing a Responsive Grid in 2016
Takeaways:
1. 12 columns, looks good at most ratios
2. Wireframing should be lo-fi, saves time and helps designers get to the next stage faster
3. Focus on the smallest screen size the design will cater to, make sure it works on it
4. Reduce resolution to make work more effective
5. Nested grids can be leveraged to create extra spaces
6. Test 3-5 key layouts at various screen sizes to find potential pitfalls early
Grid-Based Web Design, Simplified
1. Getting Started: stick to graphics programs at the start, since it is easier to manipulate visuals and move things around, then doing things on the web (html/css)
2. Choosing a base unit: larger interval consisting of multiple pixels to make aligning easier
3. Creating file and setting up the baseline grid
4. Coding: focus on the structural makeup and find the simplest ways to implement the design from a more basic layout and build up to the details
All About Grid Systems
Grid System: structure comprising a series of horizontal and vertical lines, used to arrange content
Advantages of using Grid Systems:
1. Design in proportions, and balancing out different elements
2. Sense of uniformity and familiarity
3. Easier to implement and code
Disadvantages:
1. May restrict creativity
2. Not easy to work with, and require practice to use effectively
Using Grid Systems in Designs:
1. Set an overall of the grid onto the design
2. Create some guides
3. Work with constraints and restrictions
4. Pay attention to spacing
Designing with a Grid Based Approach and Design By Grid
Provide a great overview of this design approach, providing several references and links to helpful explanations, guides and tutorials for specific sub-topics.
Topics covered include things you don’t know about grid-based design, articles on specific aspects of this approach, tutorials, and recommended tools to pull off good grid-based design.
0 notes
Text
Responsive Web Design
Responsive Web Design
“Responsive architecture”: how can physical spaces respond to the presence of people passing through them?
Responsive Web Design: Designers need to design for an ever-increasing number of web-enabled devices, and create an optimal viewing experience. By using standards-based technologies, designs can be more flexible, and made adaptive to the media that renders them.
CSS has multiple ways in which making websites more responsive, ranging from media queries to implanting a fluid design (float positioning), and selectively indicating what features show up based on which page.
The way forward – fluid grids, flexible images, media queries.
.
Understanding Responsive Web Design
Three main techniques:
1. Fluid Images: Using %’s to define the dimensions of an image relative to its container
2. Fluid Grids: Using a grid layout to determine the various content containers in a way that is adaptive to the users device
3. Media Queries: Applying different CSS rules to order different layouts based on the width of the display window given for the content
Another key point: cross-browser compatibility – can be addressed through JavaScript solutions (Respond.js, Modernizr, and adaptive.960.js)
What The Heck is Responsive Web Design?
Scrolldeck.js presentation
Webflow: platform for building responsive websites
Things to bear in mind when designing: time & money, older browsers and backwards compatibility, performance, content, websites vs. apps, and the actual designing process.
How Fluid Grids Work in Responsive Web Design
Responsive design: the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size
Fluid Grid Layout:
Fluid grid: designs that adapt to the user environment, based on the device or the screen size (designed agnostically)
Rows of 12 “columns” creating a grid based layout. Need to be wary about the widths of these columns, especially when adjust to less wide screens.
“Fluid grids allow you to create responsive designs which suit dynamic screen sizes. The complexity of developing a fluid grid can be minimized by using an existing CSS framework. You cannot depend only on fluid grids to provide the perfect responsive design for you.”
0 notes
Text
Visual Hierarchy
Understanding Visual Hierarchy in Web Design
1. Design = Communication
People tend to be visual thinkers, not data processors
We try to find differences between things as we perceive them, and try to classify them, processing information in the form of visual relationships
These classifications range from color, shape, size, and can also be much more complex
It is critical for web designers to understand that people “perceive” information in this manner, and need to learn how to break down information in visually relevant and appealing way.
2. The Hierarchist’s Toolbox
Size: should be correlated with importance
Color: used as a personality tool
Contrast: relative importance
Alignment: order between elements
Repetition: relative meaning to elements, helping link elements and draw attention
Proximity: creating sub-hierarchies
Density and Whitespace: this is more about spacing on the page, and helping people classify information
Style and Texture: very open-ended, more about the “feel” of the page
Principle of Hierarchy
Order of importance –
1. Where does the eye look First
2. .. Second
3. .. Third
Elements and principles that create visual hierarchy:
- Contrast, scale, proportion, textures, etc
- Elements within a composition can be ordered according to their importance
- Hierarchy may be determined by the scale, color, or placements of elements
Hierarchy by Placement – objects placed in the center will be perceived as the focal point
Hierarchy by Isolation – an object that stands out on its own when others are grouped together
Hierarchy by Contrast – emphasis created by contrast
Guide to Visual Hierarchy
1. Use size to enhance or reduce visibility: changing visibility impacts the perception of importance
2. Color and Contrast: use temperature, value (lightness), saturation, to direct someone’s attention
3. Typographic Hierarchy: create 3 levels to organize a design (most important, sections, and main text)
4. Fonts: pay attention to the personality of the font, and making sure different types don’t clash
5. Spacing: balance, flow, and focus
6. Composition: rule of thirds, odds, implied movement
Testing the effectiveness of visual hierarchy – Squint test: blur designs and see what stands out, is it aligned with what you want viewers to interact with and in the right order?
1 note
·
View note
Text
Brand Identity
How to build a Brand Identity
Elements of a brand persona:
Brand Pillars – key words that embody what the brand is about.
Brand promise – Promise statement to customers that outlines the distinctive benefits that customers can expect in interactions with the brand.
Brand essence – core characteristics that define a brand, typically stated in two or three words.
Mission statement – statement of the purpose of your brand, should include key market, contribution, and distinction.
Once the persona has been identified, marketing materials and graphic assets can be developed (a lot more easily), and include everything from the logo, to the color palette, and the naming strategy.
After these have been defined, they lay the groundwork for building out all customer facing, visual elements.
0 notes
Link
0 notes
Link
Pretty interesting visualization of how design is prioritized in upcoming companies!
0 notes
Text
Brand Essence
Main points:
Easy to use - clear
Simple, not unnecessary
Focused
Accessible
Attempt 1:
inPhilly is a focused simplified resource to help Penn students from China move to Philadelphia. It is accessible – whether or not you have the right type of connection, it is there where you need it, in the way that will serve you best, and it is helpful – providing the right resources at the right time to ease the user’s struggles with a major move in their lives.
0 notes
Text
Moodboards
Purpose:
Help you gather ideas and inspirations before getting started on the design.
Can help clients get on the same page with the trajectory you are going on, and give them a feel for what the final product may look like.
Steps to make a moodboard:
- DIY: focus on inspirational material that you’ve seen and has actually impacted you
- Match brand qualities to content
- Make multiple
- Go to the source, i.e., temporally and in the right “era” for material that inspires
- Don’t be limited to stuff directly related to the project
- Get organized
- Cover your bases for everything: fonts, menus, icons, colors, style
- Apply your ideas
- Experiment, be flexible
- Add explanations when necessary
- Pick a style, theme, and make sure to consider content. Stay focused.
0 notes
Text
Notes on Etsy Podcast
Research focused on how you find stuff online. Interviewer and a video camera, not obtrusive, recording for other researchers / designers observing.
Looking at body language, emotion, facial expressions
Also looking at more objective things / like work flow issues
Interview:
“How would you describe the type of shopper you are?”
“What brands do you associate yourself with” – Etsy vs. Amazon. Etsy feels good.
“What’s the most important function?” Search box.
Observations and feedback on visual demo:
New Etsy page, fewer pictures, not as much distraction.
Cleaner and simpler / less overwhelming, lower heart rate
This is more beautiful, but didn’t solve her problems.
0 notes
Link
0 notes
Text
Project Goals and Key Points
Goals
1. Help students get to campus easily
2. Help students get around Philadelphia easily
3. Ease their transition into Philadelphia / showing them the resources that are available to help them get situated
4. Provide access to online and offline tools they can use to navigate – list of travel options and static maps of PHL
5. Easily updateable repository of useful links and information
6. Go-to place to solve issues in the first few weeks of arrival
7. But only link to things that are necessary, to minimize options and less useful information
8. Integrate into the various Penn experiences pre-arrival / beginning of the start of the academic year
9. Open to suggestions and changes based on what is most useful for students
10. Good IA
Some points
- All information held within the platform (excluding the link repo aspect) needs to accessible offline
- Might be best to implement as a mobile app
- Links to online resources need to be minimal but encompassing of common issues, and actually be useful / actionable for students. If not, FAQ would be better
- Language comfort and barriers need to be addressed, app may have to have multiple options for Mandarin displays (need to confirm that one script should be fine for everyone, since writing is consistent even though speaking may differ across China)
- How are people going to know about this? Why should they bother installing it?
Key concepts
- Mobile app with combination of offline resources and online links
- Offline resources must include navigation to campus and around Philly, to help when students first arrive
- Online resources must cover primary questions students have (setting up phone accounts, bank accounts, SSN, on campus communities and organizations, etc.)
- Must be easily updateable and flexible, developers and guides should be open to suggestions
Strategy
- Understand what information is classified as crucial
- What of that is online or offline?
- Develop an IA that is suitable for the needs of the app
- Test with classmates, and iterate
0 notes
Text
Project Problem Statement
Problem statements can be divided into 2 parts, the first of which identifies the problem and states the solution, and the second of which focuses on the metrics to evaluate the success of the solution.
Here are a few versions of the first have that I am considering:
For Penn students arriving in the US for the first time, it isn’t easy to navigate to campus and get around Philly. Penn’s new inPhilly tool will help them with the right resources to find their way around Philadelphia.
International students arriving in Philadelphia need a better resource to understand how to get themselves to campus and around the city, which will be solved through Penn’s inPhilly tool.
International students arriving in Philadelphia and the US for the first time struggle to get to campus from the Airport. Penn’s inPhilly tool will help them prepare for their arrival and help them better adjust to getting around the city of Philadelphia.
Chinese students in the US for the first time don’t have access to enough offline resources to navigate around the city upon around. Penn’s new inPhilly tool will provide both online and offline resources to make this transition easier.
Chinese students arriving in Philadelphia for the first time have an issue with reaching campus and getting around the city, which will be solved by Penn’s new inPhilly tool.
For the second part, I have chosen to go with the following:
Its success will be measured on the % of international students using the tool and periodic interviews with new students to understand their arrival experiences.
Currently, the problem statement for inPhilly is the following:
Chinese students arriving in Philadelphia for the first time have an issue with reaching campus and getting around the city, which will be solved by Penn’s new inPhilly tool. Its success will be measured on the % of international students using the tool and periodic interviews with new students to understand their arrival experiences.
0 notes
Text
Don’t Make Me Think: Chapters 10-12
Chapter 10
- Everyone starts a website with a “reservoir of goodwill” which depletes with each negative experience they have, and depleting it can have consequences in terms of revisiting the site, leaving without getting what they need, or overall brand value reduction. This reservoir depends a lot on the person, and is very specific to that person. It is situational. It can be depleted or refilled, and sometimes either can take place radically based on just one action.
- Avoid: hiding needed info, punishing users for not doing things in a certain way, asking for unnecessary information, lying, or having an unprofessional UI
- Do: inform correctly on needed information, make the website obvious and easy to navigate, save steps when possible, good FAQs, printer-friendly pages and other comforts, easy recovery from errors, and apologies when things go wrong
Chapter 11: Accessibility
- Developers and designers tend to underestimate the importance of accessibility
- Tends to lead to more work, creates a need to compromise on some aspects of design
- Accessibility is typically a lot easier to find things that would make a site less accessible, rather than the other way around. Testing for accessibility also tends to result in a long list of potential actions and recommendations, rather than a few definitive fixes.
Here are 5 things that one should do right now
- Fix any usability problems that confuse everyone
- Read “Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers”
- Read a book about web accessibility; there’s a few good ones that are worth reading
- Use CSS, and be smart about what is being done with it since it will lend a lot of flexibility
- Go for the low hanging fruit at any stage, to generate quick and easy improvements that provide longer mileage
Chapter 12: Bad Design
People often have to deal with issues rising from having to design websites that request more information than they need, or needing to add more “pizazz.” Both of these issues are commonly occurring, and should be dealt with in an apt manner so as not to lead to counter productive actions.
0 notes