Web Design Discussion – Fall 2019
These are the comments and questions you submitted based on the the reading assignment from class 1A – The Ultimate Guide To Getting Started In Web Design. I’ve categorized them and posted my remarks below. Click on the grey box (question/comment) to reveal my feedback. I hope to address all of these with you over the course of this term.
v 1 . 0 . 0 | 10/6/19
Best Practices
DISCUSSED: 3A
I'm looking forward to learning how to create website the most efficient and useful way using the correct methods.
We will touch on some UX ideas and design best practices. However, until you actually make a site with code, it may be hard to fully comprehend how it all comes together.
Browsers
DISCUSSED: 3A
How do you accommodate for all the variations of screen use without making something look clunky or awkward for one screen?
You must use code to designate what we refer to as "break points". Once a design starts looking bad, you tell the code to reference a seperate set of instructions for that break point to make it look correctly for a particular screen size.
I didn't realize so much thought and process went into making a website, nor did I realize that you need content before you can pretty much do anything. I wanted to know, what would be the best browser to build your website in? example: cargo.site
I would test your designs on Chrome, Safari and Firefox on desktop. Then test on iOS and Android for mobile. There are more platforms out there, but this covers the majority.
I see this article was uploaded in 2015, do browsers today still have different appearances on some websites or do they all show the same appearance of a website? Also, do you still have to design for specific browsers or is that work done for you?
Thankfully, many of the old developer brower hacks/tricks are not necessary to gets sites to look the same across platforms. However, new errors are discovered with each browser update especially the more complex your code base is. Bugs are part of working with software (web browsers are software).
It's a bit overwhelming to read and recognize all of the steps and time it takes to create a working website. A main rule that stuck with me while reading is the need to be testing your website on multiple browsers, the more the better, as you are creating the webpage.
Testing how a website functions and looks across a range of devices is critical for quality assurance. It is sometimes difficult to do this all yourself. There are some online services that can be used for these things.
Code
DISCUSSED: 3A
The article talked quite a bit about coding, specifically about using HTML and CSS. In this program we take an HTML class, which only dips its toes into CSS. (And a few of us probably took that class a LONG time ago as it is.) I'm wondering if we'll need to brush up on these programming languages for this class?
No. You do not need to brush up on coding skills for this class. Knowing how HTML and CSS work gives you some insight and understanding for the media of the web. This knowledge helps inform the way you design screen layouts.
Is it possible to work in some level of web design without being proficient in coding?
Yes. You don't necessarily have to be a savvy coder to design for the web. Knowing some code will help you understand the possibilities and limitations of the media. But knowing too much about how to code things can also limit your ability to bring fresh ideas and design directions to your work. You sometimes end up inadvertently boxing in your imagination based on your the limits of what you know how to code.
Costs
DISCUSSED: 4A
Everything seemed pretty straight forward. So my question is how much does it cost to maintain a website in general? How would developing a website integrate with advertising? Does advertising alone keep websites running?
Advertising is only one way of paying for websites. This is used mostly on news or entertainment based sites. Product sites are their own ads.
Current Trends
DISCUSSED: 4A
I think I'd love to know more about current trends in web design
You are only a Google search away... Here's a few places to start:
10 Exciting Web Design Trends You Can't Hide From In 2019
Exploring the Latest Web Design Trends
20 Web Design Trends for 2019
IA – Information Architecture
What’s the difference between wire framing and content architecture?
Not much. I suppose you could say wire framing is the bare skeleton of site organization and content architure tries to define the nature of the information populating each page. But they are just flavors of the the same type of planning/thinking steps.
My overall understanding of a wireframe is that it is the rough draft of what the website will look like but drawn out on paper, is this correct? Are wire frames necessary for each page connected to the website or just the Home page?
Wireframes aren't always necessary. But they can be very helpful in wrapping your mind around what the visual hierarchy of the page should be. Not all pages need to be wireframed.
Motion Graphics
DISCUSSED: 4A
I'm interested in learning how to work with interactive/motion graphics, but I wasn't sure if that's something that will be covered in this class specifically.
We won't go in depth on interactivity nor motion graphics in this class. We will learn how to make animated GIFs in Photoshop and discuss aspects of SVG animations.
How does learning to create interactive elements in web design compare to learning animation? And what's the best way to show how interactive elements work in a mock-up that doesn't show animation/movement?
I don't have much expertise with regards to true animmation. Some people use After Effects to mock up animation/transitions for sites. I often use Photoshop. Sometimes, I've made animated GIFs via Photoshop to show simple animations.
Photoshop
DISCUSSED: 4A
The steps and process the author listed to create a websites made complete sense to me, so why do people create websites in Photoshop? Do they do complete mock ups in Photoshop before they begin coding?
Some do. Before Responsive Design, Photoshop was the dominent tool for web design. Now, most web designers are using Sketch or XD for designing layouts. The best way is to use actual code (HTML, CSS, Javascirpt) to design a site. You create what you refer to as a prototype site. I use Photoshop to make individual parts and pieces, not the page layout.
So, why do we design in Photoshop rather than Illustrator or InDesign? Also, is designing in Photoshop just to get the visual layout and appearance settled, so it can be sent off to someone who can code it?
See response above… I do use Illustrator for layouts ocassionally. Yes, these are just purely visual explorations. They must be coded which may alter the design some.
Resources
DISCUSSED: 4A
Bruni has a bunch of great sites that I’ve bookmarked for future reading/review, but I was also wondering if you had a couple of good web design books to check out?
All of the A Book Apart series books are excellent. Check out my resources page for more recommends.
Servers
I am a little unclear on what the benefits are of installing a local server. Brackets has a website simulator function that (although a little buggy) works pretty well. Also, can't you just put a robots.txt file in your site to avoid it getting indexed and build it on the web?
As designers, it is not critical to be able to setup a local server. Yes, you can use a robots.txt to avoid indexing by web crawler bots... but I wouldn't put 100% faith in the bots.
I enjoyed the reading. Very informative. Having your own local server really peaked my interest. I don't think I understand that concept. Would love to learn more about it.
You need to make friend with a developer that can show you the ropes. I'm personally not great at it. I often just open my HTML files directly in a browser without actually hosting them somewhere else.
Tools
Do you think Adobe XD is a good wireframe tool? I like the idea of staying in the Adobe ecosystem, but it looks like Bruni uses the google drawing app. This site recommends a few others: https://thedigitalprojectmanager.com/wireframe-tools/ and I was curious if any of them are worth checking out.
From my perspective, wireframing should be done with simple tools. Pencil & paper, a spreadsheet, or whatever you can efficiently more words and boxes around in efficiently. I've used Adobe Illustrator for many wireframes. There are some programs like OmniGraffle that work well for this task.
In addition to hand coding I was wondering if you recommend any of the website authoring programs like Dreamweaver?
Dreamweaver can help you get familiar with code. Adobe XD might be worthwile too... I haven't had to time to check out the latest version.
Typography
Something that stood out to me from the reading was that typography is the most important aesthetic design discipline to master. I never thought about that but it makes sense as most webpages are filled with lots of text. As he put it, "Typography basically is web design."
Yes! Type is the most important design element (web or print). Period. Good oberservation. We will discuss aspects of web fonts in this class.
UI – User Interface
I also liked what Bruni had to say about sticking to higher contrast with web design to accommodate dimmer viewing environments and screens. That seems to make sense. Damien in my Illustration class mentioned printing color layouts in B & W as a trick to check for sufficient value contrast; which I hadn’t thought to do in the past, but also seems like a good idea.
That sounds like an check in the process of creating illustrations. Color constrast is one aspect of accessibility for web layouts. Unfortunately, accessibility is sometimes not given as much consideration as it should in the design process. It is important to outline the steps/process with a client at the beginning to ensure things don't get overlooked along the way. It is much more difficult to retrofit accessibility into established designs than it is to design with accessibility in mind from the start.
UX – User Experience
He mentioned a couple times in various ways that what makes sense to you may not make sense to your user, which really stuck out to me. When I'm designing something, I can get caught up in just thinking about how it looks to me and not how others may view or receive it.
How a person uses a site is much more important than what it looks like. Look for example at Craigslist.org. Pretty basic, some would say ugly visual design. However, it lets people do the things they want to do and doesn't get in their way. A more elaborate visual interface would likely annoy people at this point. Testing the navigability and functionality of a site should always be considered early in the design process not after a "look" has been established.
What stuck with me was the section about making sure to look at how users browse your website and not just how you browse it. A problem that I have faced in the past with projects is that I get very attached to the look of it or how it flows. During critique or asking a classmate to look the project over is usually the only time that I realize that it can be difficult to follow or it just isn't clear. So this is definitely something that I have been trying to work on and this piece of the article really spoke to me.
I used to learn a lot about my web site designs by showing to people in the accounting department that didn't know anything about the project.
Web Design Process
Something that stuck with me after reading this article was how helpful and valuable it would be to be able to see an abbreviated or accelerated version of the entire web design process from idea to wireframe to completion, just to get a more comprehensive idea of what exactly the process entails and clarify any missing links in the understanding of it.
Yes! I hope to shed light on the process of making websites from the desingers POV this term.
One thing that I'm worried about if I go into the field of web design after graduating is that I'll become too frustrated while testing and fixing websites that I'll want to quit. But I think it just takes patience and a willingness to fix my mistakes without obsessing over what I did wrong to continually improve at creating websites that are efficient and useful!
The extra money in your salary might help smooth things over… There is a particular mindset that helps one enjoy working on websites. For me it is the satifaction of making things function and perform better. You can celebrate small improvements sometimes many times a day. However, there are times when you feel stuck and can't see a way out. That's when you lean on your teammates or fellow freelancers for advice and encouragement. Also the online web design community is the best! It is mostly made up of friendly people that love to help and enjoy geeking out on stuff. If you find yourself at all interested in web design, I encourage you to spend as much time as you can learning more about it.
There are so many different tools used and important steps in the process of designing a website.
It might seem overwhelming when you first get started working on websites. Don't let that stop you. There are increasingly easier ways to make websites than ever before. Web design is a craft like many others. You can start with some basic ways of building sites (HTML, CSS) or use a drag-and-drop editor like Squarespace, Wix, etc. Once you learn more, you will be able to make more complex site (if you desire). It really helps to befriend a "developer" that can shine the light on areas that are too dense to comprehend on your own.
When a web designer creates a website, does he/she do everything by him/herself from planning to launching?
Not usually. A web design project that comes through an agency has many contributors to the process. If you are a freelancer working on a website, you will likely team up with other freelancers (such as a developer, project manager, etc) to work on a site design project.
I found the parallels between designing for print and designing for web to be really interesting. It's cool to see that the steps we take to design, organize, create visual interest as well as good typography, hierarchy, and color, are the same as when you design a website. Something that stuck with me early on was this "The rule to keep in mind is this: content should not be made to fit your design. The design should be made to fit your content." I can see it being easy to design a site for aesthetics and beauty's sake, but without content, it won't say much.
Content is king. Start with defining what is going to go into the website first. Many things will naturally fall into place when you do it this way.
I really think the break down of the process was done well, and I understood the steps needed in order to understand how to create a website. It was done clearly but it was a lot of information and seemed like a lot of work that goes beyond just code.
It takes a lot of thinking and organizing of info to design a website well. The visual design is the easy part. ;-)
Something that stuck with me is how user friendly web design can be, especially when making necessary changes to the design. It can be done easily once the user is familiar enough with the process and can make alterations effectively.
One of the beautiful aspects of working on the web is changes can be made realively easily and expediently. Unlike print design where mistakes can have considerable time and cost ramifications.
Another thing that stuck with me is a relationship between a graphic designer and web designer. I think I get a difference between those but how they are relating one another?
A web designer is just a graphic designer that specializes in working on websites and screen based media.