DDSN 360: Critical Analysis 3

Critical Analysis 3

You must be the change you wish to see in the world.

Mahatma Gandhi

User Interface Design – Fall 2019

Critical Analysis 3

Write ONE short summary (300-400 words) of the Web Design Process discussed in the lectures and in the three articles from this week.

Demystifying the Creative Process

UI Development Flow – 8-Step Process

A Model of The Creative Process

At the minimum address these THREE POINTS in your Critical Analysis:

  1. Describe the professional design process (Be sure to mention all major stages, as well as the roles involved).
  2. Why is having a process essential?
  3. Where do you feel you might best fit into the process, ie., which roles you’re best suited for now, or would like to know more about and grow into? (Here’s the list from Web Style Guide.)

The professional design process may vary between designers, and industries, but there are several fundamental similarities. My understanding of the professional design process at this point in my life and career include the following phases. The initial phase is inspiration/incubation wherein a designer has an idea forming in their minds, or a problem has presented itself that needs solving. Then brainstorming wherein, the designer now can put ideas, all the ideas, down on paper, or chalk or white board, and begin to organize those ideas. Then research should be done based on the ideas that have been formulated so far – this may include researching the need for this idea in real life, or if other versions of this idea already out there, etc. Then concept development or prototyping, can begin based on the brainstorming and research done so far. Then more testing and user research can happen with the prototype. Then redesigning the prototype as needed informed by your testing and user research. Then retesting and redesigning until satisfaction is achieved. Then finalizing and implementing the design.

Having a process when designing is essential in order to monitor where one is in the process, to have methods and techniques to rely on, and to successfully plan and accomplish the creation of a design. A design process enables you to be as efficient as possible, successful in achieving your goals and transparent in your process.

The aspect of Web Development that is ringing loud and clear to me – and might be giving me some anxiety because of how detail oriented and involved it sounds – is the research and user testing component of Web Design. The amount of research and prototyping and testing that is obviously so important to User Interface Design is a little daunting to me. Perhaps this is because I’ve never done it before, and my normal working environment rarely provides enough time for such focused tasks, so the idea of it is stressing me out. And because I also can understand why clients would want to avoid the time and critical thinking it takes to do user research and testing. But I firmly agree with the statement that “Design without user research only helps you design the wrong website faster.” I look forward to shedding light on this aspect of User Interface Design, and hopefully reduce the amount of stress I’m having over it.

The roles I feel most comfortable with at this point in my young designer history, is the Art Direction, and Site editor roles. These are aspects of my current job responsibilities and I feel very comfortable with those responsibilities. I think I would be interested in Web Project Management as well. I am very good at scheduling projects and motivating folks to accomplish tasks. I would have more confidence as a Web Project Manager I think if I had more coding and development skills, in order to better understand what the steps are to accomplish that aspect of the overall project.

DDSN 360: Glossary 3

Glossary 3

User Interface Design – Fall 2019

Glossary 3

  • Information Architecture: The structure in which content is organized in a digital space. A website’s IA, when designed well, should not be felt, or seen. When it is designed poorly, the user is forced to be aware of how the content is created, and how unhelpful the architecture is. You could say that Craigslist.org, though it’s not the prettiest website, has very clear user experience because of the way it’s content is grouped, categorized and navigable.
  • Wireframe: A wireframe is a simple layout format of a website or app meant to clearly illustrate the structure, feature placement, and navigation. Wireframes are used to best configure a website or app architecture, in order to achieve efficiency in a design. I’ve never seen a wireframe, that I am aware of, but this makes me think of the class I took on Digital Layout – there was a section where before we ever had content, we created thumbnails and a layout on a grid of how our magazine spread would look. This is what I imagine wireframing to be like.
  • Site Map: Or Sitemap – is a list of pages of a website. There are three kinds used in the world. 1.) For the designing phase of a website; 2.) for the use, as a publicly posted list of the hierarchy of a webpage; and, 3.) for the use of search engines to find relevant information on a site. Though often found at the bottom footer of a website, it is not a requirement. Here is PG&E’s sitemap as an example: https://www.pge.com/en_US/sitemap.page
  • Web Page Header: A Web Page Header sits at the top of every page of a website, unless I doesn’t. It may be featured on every page of a website, or just on the homepage. It often contains a company logo and possibly a tagline or statement. In the illustration here you can see clearly a Web Page Header is something that is familiar to you, as it is often found on every page of a site above a navigation bar.
  • Web Page Footer: Just the opposite of a Web Page Header, the Footer is found at the bottom of each page. In a way the header and footer frame each webpage, while the content in between the two will change. The footer, we have been accustomed to, is often where a user can find more details about a particular website. Most likely many more details than in the navigation bar or menu. A user may also find the company’s address, contact info., and copyright of the website in the footer. It was in the PG&E website footer that I found their link to the sitemap.
  • Webfonts: Web fonts are not the same as Web Safe Fonts. Web Safe Fonts are fonts that a website designer would choose because they would be a safe bet that most users have that font already pre-installed on their computer or device. Web Fonts are actual fonts that are downloaded to a users device as they are rendering your website. The downside to this it could slow load times for your website, but you would ensure every user could see your website just as you intended. In searching for a web font enabled website example, I came across a website that gives awards for web font design use! Check it out there are so many awesome examples of specific design choices using typography, which a designer would want to be true and universal for every user that finds his or her or their website: https://www.awwwards.com/websites/web-fonts/
  • Creative Commons: A Creative Commons license is one of many types of copyright licenses that enable the free distribution of copyrighted work. This is the kind of license an author would use to enable others to use, share or build upon their work. Creative Commons, the non profit organization issues the licenses to ensure that certain work is accessible by the public. For example, Flickr helps you find photographers who have identified which of their work is free to use under a Creative Commons license: https://www.flickr.com/creativecommons/
  • Skeuomorphism: A design concept often used for user interface design wherein the visual aspects, symbols and design elements are made to mimic their real-world inspirations. Like a blog site whose background looks like paper, or a website for an aquarium that looks like it’s underwater. This is meant to create an emotional reaction and sense of familiarity for the user.This blog entry by Jessica Moon has some wonderful examples of this design concept in action:https://www.dtelepathy.com/blog/inspiration/50-skeuomorphic-designs
  • Web-Safe Color: These were colors used when computers were limited to just 256 colors. Many attempts were made to create a “standard” color palette. A color table was created which contained 216 variations. This was to avoid dithering, or color altering in graphics which had colors that another users computer did not have. As of 2011 web safe colors have practically fallen into disuse due to the fact that computers now typically have 24-bit (TrueColor).
  • UI Design Patterns: These are recurring solutions to common User Interface Design problems. These patters are a way of working through a problem with a set series of steps, in order to improve your user interface design. I imagine this is like a map or flow chart of common answers to common problems in user design. They have been time tested and kid/mom/dog approved.

DDSN 360: Critical Analysis 1

Critical Analysis 1

For me, becoming a man had a lot to do with learning communication, and I learned about that by acting.

— Adam Driver

User Interface Design – Fall 2019

Critical Analysis 1

“Technical knowledge aside, what makes for a good Web designer?”

Based on these three articles we were assigned to read with this assignment:

Design Isn’t Just About Pixels by Creative Bloq Staff

Why You Need to Ask More Creative Questions by Aaron Morton

Jump from Graphic to Web Design in Seven Easy Steps by Ceative Bloq Staff

…I would say a good web designer needs to continue to find new perspectives, to find new ways of using questions as tools to finding solutions, to remember that a designer does not work in, or for, a vacuum – in other words, to be a good listener in a team, and to always consider the user in one’s work, and to stop being scared of coding and just learn it, dammit.

Before having read this article, my instinct would be to say “A good web designer has a strong understanding of design principles…” or “A good web designer has an active awareness of current styles of design…” or “A good web designer does a lot of user research to make the user experience of their design pleasing…” Although these things are important, these articles argue not to get so caught up in things like “what’s the hottest style trend”, or in designing with a sense of one’s ego (talent/persona as a designer) as the central feature.

I particularly liked the quote “Your brain is a goal seeking mechanism…” from You Need to Ask More Creative Questions by Aaron Morton. I thought this was a refreshing and clever reminder that each of us comes equipped with a built-in puzzle solver – our brains! This reminded me that often the creative process can happen effortlessly… or at least it happens in our subconscious. That sometimes ideas and inspiration come to us without putting forth a concentrated effort to make it happen. Sometimes in fact, when we let go a little, and sit quietly in ourselves, does creativity come rushing in on its own.

I appreciate each of these articles because they all ask the reader to be open to something new. It asks the reader to let go of foundations and structures that may be stifling our creativity, to trust in our own sense of direction and inspiration, and to believe we can learn code.

DDSN 360: Critical Analysis 2

Critical Analysis 2

The point is that when I see a sunset or a waterfall or something, for a split second it’s so great, because for a little bit I’m out of my brain, and it’s got nothing to do with me. I’m not trying to figure it out, you know what I mean? And I wonder if I can somehow find a way to maintain that mind stillness.

— Chris Evans

User Interface Design – Fall 2019

Critical Analysis 2

What are some of the Pros and Cons of using a Content Management System (CMS)? 

Which CMS Should I Use?

Critique of WYSWYG editors

WordPress.com vs. WordPress.org

WordPress Vs Joomla Vs Drupal: We Compare ‘The Big 3 Content Management Systems’

Should I use Tumblr or WordPress?

Blogger vs. WordPress

The clear benefit, or Pro, of using a CMS is that the primary design, security, and Web hosting is provided for you. You are given templates which you can edit, all standard security measures are taken care of for you, as well as the basic hosting and domain name ownership are included. For the beginner blogger or small business website manager, this is ideal. One can simply focus on creating their content, the original purpose of their website or blog, and not get bogged down by the details of Web development. The main thing that a beginner blogger or small business owner needs to worry about is the content creation, and updating that content as desired through very user friendly, non-coding, portals.

The major CMSs that are out there, such as WordPress, Joomla, and Drupal are all open-source platforms. According to Katie Horne in WordPress Vs Joomla Vs Drupal: We Compare ‘The Big 3 Content Management Systems’“Together [these three CMSs]…account for over 60% of the Content Management System deployments on the internet.” To some Web designers being open-source platforms may be a plus, because they may have the view that multiple contributors to a single project can only improve its design and functionality. Or another Web designer may see this as a shortcoming, as these platforms may be updated without consideration for the learning curve of its users, or the updates may be viewed by one such designer as flawed.

The clear disadvantage, or Con, of using a CMS is that a Web designer cannot manipulate the code of a template used on their site as a more skilled designer may desire. The alternative to this is to learn code and build one’s own site. The challenge for this choice is either finding a web developer that can build your site from scratch for you, as well as implement it for you, or learning those skills on your own. For most this is a daunting task, but not one that is insurmountable.

Much like the open-source nature of the major CMS platforms out there, the methods, tools and educational resources available to the average non-coding website manager are growing. And I personally am excited to learn all that I can about coding, and this thing called Web development. I have been working with my company’s website for years now as a non-coding content manager, and I’ve simply reached the point that I would like to learn the skills and techniques needed to have full control of the design of the sight.

DDSN 360: Glossary 2

Glossary 2

We must let go of the life we have planned, so as to accept the one that is waiting for us.

— Joseph Campbell

User Interface Design – Fall 2019

Glossary 2

  • Browser: An internet browser is an application that allows a user to search and view websites. Examples of browsers are Google Chrome, Safari, Firefox, Silk, Opera, and Internet Explorer, to name a few. Google Chrome is by far the most popular browser as of 2019. Well over half of users access the internet via Chrome.
  • Hyperlink: Text, image or icon that is a link to another location or file that is activated when clicked on. Here is an example: google.com.  
  • Mobile First Design: This is a design process which focusses on the smallest possible screen first, then grows to larger desktop screen designs. Essentially designing for mobile phones first and figuring out the rest after. Since about half of websites are viewed via mobile device (and that number is growing), it is wise to consider the mobile user experience first.
  • User-Centered Design: UCD is the design process which constantly considers the user experience and interaction first. Alongside all steps of the design process, designers will make use of user feedback to improve their design, and essentially achieve the goal of creating a user experience that is the most pleasing.
  • Responsive Design: When creating a responsive website or app design, you are creating a user interface that adapts to the current screen the user is interacting with. A mobile phone screen is much smaller than a desktop screen, and the design of a site or app needs to adapt to make sure the user experience remains clear and pleasing.
  • UI/UX: UI stands for “user interface” and UX stands for “user experience”. These acronyms are now ubiquitous with the concept of software, web design, game design, application design, and more. A user interface is the way a user interacts with a website or application. User experience refers to the journey a user has when interacting with that website or app.
  • Breadcrumb Navigation: Making use of the concept of leaving a trail of breadcrumbs to remember one’s location, in website design, this is making sure that your user can still understand where they are when moving between pages within your website or app. It is a handy way to find your way around an app or website.
  • WYSIWYG (pronounced “wizzywig”): WYSIWYG is an acronym for “What You See Is What Your Get” in regards to a website editor. A WYSIWYG editor lets you see the finished product as you are editing it. Ideally this is meant to reduce the amount of time a designer has to switch between editing mode and preview mode.
  • Blog: Blog is short for “web log”, which is an online written entry of some kind. Originally blogs were more like personal journals, which many still are, but there are now multiple kinds of blogs out there, covering all subjects, and innumerable followers – some have larger readerships than some major periodicals. I had a LiveJournal back in the day, which is one type of blog program that has existed. WordPress really began as a bloggers website developing program, but has evolved into all kinds of websites.
  • Open Source: Open Source Software, or OSS, is a kind of computer software wherein the source code of the software is released to its users freely to alter, edit, and distribute as they wish. Mozilla’s Firefox Web Browser is open source, as well as the programming language called Python. Chromium, the precursor to Google Chrome, was open source as well.

DDSN 360: Glossary 1

Glossary 1

The journey of a thousand miles begins with one step.

— Lao Tzu

User Interface Design – Fall 2019

Glossary 1

  • ISP: Internet Service Provider – These are companies that provide software to users to access the internet. Examples would be Comcast, Verizon, or AT&T.
  • HTTP: Hypertext Transfer Protocol – This is essentially the language that the internet uses to communicate information. Information is transferred across platforms by following commands defined by Hypertext Transfer Protocol.
  • DNS: Domain Name System – These are “names” or addresses of websites such as google.com. This essentially is the phonebook of the internet. No two websites can have the same address.
  • URL: Uniform Resource Locator – This is the larger “address” or location of a website, which includes the protocol used to access a resource on the internet, plus the location of the server (which could be the IP address or domain name.)
  • GUI: Graphical User Interface – This is the mode in which a user can interact with a device through the use of images, icons and visual indicators. This could be a screen on a phone which displays an icon of a phone as the active button to press to open the phone app on your device. Or the use of the Microsoft Windows icon as the “start” button on your desktop.
  • FTP: File Transfer Protocol – Much like the Hypertext Transfer Protocol, the File Transfer Protocol is the manner in which files are transferred on a network between servers and computers. It is built on a client-server architecture model.
  • CMS: Content Management System – This is computer software or an application that has access to and uses a database. WordPress is an example, and the most widely used version of a CMS.
  • W3C: World Wide Web Consortium – This is the international community that manages the standards and overall organization for the World Wide Web. Led by Web inventor and Director Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential.
  • HTML: Hypertext Markup Language – This is the language, or code, used to create web pages and websites. It was the first language, or code, that gave life to the internet, and is now assisted by other languages like CSS and JavaScript to make websites more dynamic and interactive. In 2019 HTML5 is the most evolved version of the basic website language.
  • CSS: Cascading Style Sheets – CSS is one of the main languages used in the creation and development of the World Wide Web. Others are HTML and Java Script. While HTML provides the content for websites, CSS can provide larger structures and design. It is also responsive to the various screen sized and orientations that people use daily.
%d bloggers like this: