This week, I finalized my original graphics, continued HTML and CSS work, wrote some text content for the site, and set up jQuery so that next week I can jump right into JavaScript.
Here are the graphics I worked on this week:
Logo
My original logo did not read very well, so I went for a slightly more straightforward approach. The M and B are presented in a clean, readable font (Source Code Pro) rather than being awkwardly stretched as vector shapes. They are surrounded by two upside-down triangles, referencing the chip design.
Chip Design
I added many thin circuits around the thick circuits to make the chip look more like a real microchip. For the purpose of being used in the website, this chip illustration has a light drop shadow around it so can be seen clearly against the site’s black background.
Diagram
The diagram posed the biggest challenge for me. I’ve never drawn a brain before, let alone made a vector graphic of one. I wasn’t sure how much detail I should add or if I should add visible sections to the brain, using either colors or lines. In the end I didn’t want to make it too complicated and messy-looking, so I limited my use of lines and kept the labels to the sides of the brain. I felt like the most important part of the diagram was showing where in the brain the chip would go, so I made this part stand out by showing an abstraction of the chip in a separate color from the rest of the diagram.
In addition to working on these graphics, I added and cleaned up a lot of HTML and CSS. Here is a review of the biggest changes that I made:
Header
Both the logo and the chip illustration were added to the header to fill it out. I also compressed the words “Memory Bank” in the header into a single h1 element for search engines and screen readers. I rotated the chip illustration so it doesn’t look so static. I changed the value of justify-content to “center” and also added an align-items value of “center”. This made the organization of the header much cleaner. My main issue with it now is that I want the words “Memory Bank” to be exactly centered below the logo, and if possible I would like the tagline to be more in the center on the vertical axis.
Main Formatting
A lot of the changes I made to the main formatting were concerned with readability. First, I increased the size of the header font. Then I increased the line height of paragraphs, so the text isn’t so closely clumped together. I shortened the width of the paragraphs so they don’t stretch so far across the screen, keeping each line length around 60 characters. I did the same with the form on the scheduling page.
I changed the styling of the button on the homepage so it doesn’t look so dated. I had tried to do this last week but couldn’t figure out how, since I thought “text-decoration: none” would do the trick; it turned out I needed “border: none” instead. I also changed the submit button on the location form to an actual button element, so it interacts easier with the JavaScript I plan to implement (hide/show).
Footer
After reviewing feedback, I decided to remove the social media icons from the footer. I’m used to adding these to site designs so I added them by default, but they didn’t work for this particular project. I also gave the footer a background color so it is set apart from the other elements. Changing the display to flex also allowed me to create a much cleaner footer layout.
These were the biggest changes I made, but of course there were also miscellaneous elements I added/removed/cleaned up along the way. My plan for this upcoming week is to implement jQuery functions on the User Stories page and the appointment scheduling page. The User Stories page will have user headshots and pull quotes, and when the headshot is clicked on, the hidden user story is shown. On the appointment scheduling page, when the “submit” button is clicked, a hidden list of clinic locations will be shown.
My files so far: