The HTMLs and the CSSs

Building a website with Webflow

By now I have completed the following areas of my design process:

  • Research
  • Discovery
  • Planning (sketches)
  • Content audit
  • Mock-ups

Now I have to focus on building a good and responsive website using Webflow.

Responsive Web design

This ensures your website will work in every device.

Book: Ethan Marcotte – Responsive web design.

Every website is made using HTML using an Editor like brackets or atom. When writing HTML it should all be in lowercase. HTML just basically wraps up your content in tabs to tell your browser how to display the information. There is always an opening and a closing tag.

Example <title> My website </title>

The only things that are seen in a website are the things within a body tag <body>

What to include under <head>

  • page title
  • CSS links
  • Other abstract things

What to include under <body>

  • Headings
  • Paragraphs
  • other things you can view

Having a good heading is vey important and useful as they help you structure your content and give the website a nice flow. Users skim the websites by headings so guide them to what you want the to see.

HTML links are very important <a href=” URL here  ” >This is a link</a>

HTML images    <img src= “name of image”   alt=””   This is a screen reader that will read the content for hearing impaired people.

HTML buttons: by only using HTML it would look very ugly but once you add CSS and add the proper code it will look more aesthetically pleasing.

Always add comments to your code to help other designers and coders. Be a team player.

Images are pulled into the website whereas links take you to a different place.

Link targets: this decides if once you click the link if you are taken to a new browser window or if the link opens in the current window being used. use target=’_blank’   to open in a different window.

Naming conventions; HTML spaces are bad. Do not use spaces for page names; its ok to do so for titles though.

Image format

Do not use a JPG file for your logo as if they are meant to have a clear background they will replace it for a white background. Use a PNG for images that need a transparent background.  PNGs keep the image quality better than JPG – these are all pixel based so once screeched they will lose their quality. SVG images however are vector based so they will not loose quality

Image dimensions: Consider image sizing very carefully as a very large image can make the website heavy and slow. Be considerate. If you need to resize an image, do so in Photoshop – it will make your life easier. They should not be over 600MG.

Always provide a text alternative to your images – Think accessibility.

Never style your content with HTML, always use CSS for this. HTML does not have the terminology to make the kind of design decisions CSS makes. For the HTML and CSS files to ‘talk’ to one another you must link them; that is why the CSS file is normally called “stylesheet” for easy access and linking.

CSS allows you to set up multiple properties within an element. It also allows you to select the sizes of your headings. Units of measurements used are PX (pixel), EM (this tells the text to scale and in what ratio to do so) This makes things easier to manage.  The EM tells the text to be that much bigger than the base size which will be shown in PX.

When writing your font family, make it so it applies to all your text at once so if you ever need to change it later on it will be easier.

In CSS   a {   means links.

Sectioning elements. These are defined in HTML (<nav>   <section>   <body>   <article>   <aside>) Aside is a sidebar. These are the primary links. When using the <nav> tag never use the actual word in the label as it will show up as “navigation navigation”.

The <main> element is were the content goes.

CSS Box model: this applies things like padding, boxes, boarders and margin. Padding is an essential element and if not well defined it will add padding to all the elements of the website. If you want to change it you would then have to specify with ‘top’ or ‘bottom’. Border, these can be added to a section. Margins are defined in the same way as padding. Margins are transparent and are not included in the click are of an element; paddings behave in the opposite manner. Explicit dimensions must be given at times to avoid an element taking up all the available space.

CSS selectors allow you to define an aspect of the content while keeping the rest normal. One does this by using class selectors. Using class styles allows you to  create different styles and apply it to many different sections.


A nice and simple HTML file is invaluable as it will not break. As a designer the temptation to be super visual can be overpowering; a solution for this is CSS. When saving the files for the website it must always be well organized.

Preparing for placement – 1

I will be honest I AM STRESSED!

So I have to find placement and so the first thing I need to do is research and brainstorm. Here are some of my initial thoughts and ideas after hearing some of the tips Kyle had for us in class.

Things I should do to improve my chances

  • Side projects – Reference the logo design you did for the ice cream shop during the summer.
  • Check out the job opportunities in Slack, Handshake, LinkedIn, etc…
  • Check out communities like UX NI, ladies that UX as these can be great learning tools.
  • increase online presence – slack, LinkedIn, Instagram, etc…
  • Apply to the study abroad opportunities.
  • Apply to all placement opportunities, what will you loose? The worst they can say is no.
  • Take up side projects related to your interests in the field of design as these make for great learning opportunities. Also consider attending fayres.
  • Bigger organizations tend to offer placement opportunities first – eg Rapid7.
  • IBM look up – they have UX jobs.
  • Specify that you are looking for a year long placement/internship in your portfolio. Narrow it down. What can I do? Can I do it? How can they contact me? As a designer the portfolio is a must, it is way more important than a CV, it acts as a meet and greet. Show what you are really good at, what IXD activities you like to do? What makes you different from other designers?, On which projects did you bring the most values? What interesting stories can you tell about the work you did? Show that you can do the hard work that comes before the pretty pictures – SHOW YOUR WORKING, think Math GCSE.
  • Case studies will get you a job.

 Interview questions

  • What do you find interesting about the industry?
  • How do you keep up with such a fast paced industry – My answer: By being a curious octopus and a forever student.
  • What tools do you use on a daily basis?
  • What is your process when creating illustrations/websites/wireframes, etc… ?

Impressing employers

  • Preparedness – it will come across poorly if you attend an interview unprepared.
  • Identify the key skills being asked for that role and try to guide your cv towards presenting you as the ideal candidate.
  • Ask about timing – how long will you have to wait until you hear back from them?

Designing with Content


“Well-structured content is the backbone and starting point of all successful web designs and user interactions.” – Karen McGrane content strategist.


What is content?

Content is not restricted to words. It can be understood as a way of showing what users need. Content helps to highlight what the users needs compared to what they want.

“As someone who writes for the web I want to learn what content design is, and how to start doing it so that I can communicate in the most user-centric and efficient way for my audience” – Sarah Richards

The content designed and created should be focused on the understanding of the user. As Sarah Richards (now Winters) explained it in her book; content design is simply data and evidence that the audience needs, at the time they need it, in a way they need it.

Richards then explains the content design process; Richards breaks it down into 7 points:

  1. Research: this is were it all begins. It can be desk research, usability research, expert research but there has to be data and evidence of what the audience wants and needs.
  2. User needs: User and job stories are key as they allow us to define what the audience wants from us. Do users have a problem? what is it? Can I solve it? As Sarah Winters put it in this article “When we write content based on well researched user needs it’s automatically answering specific tasks the user has at that point in their journey. This kind of content helps them move on to the next stage and, ultimately, reach their goal.” By conducting the research we can then understand the user’s journey (the offline and online steps the user must take to complete their task). What are the motivations of the user when they reach your content? How much effort did it take for the user to reach the information they needed and how much of it did they get?
  3. Channel and journey mapping: Consider which channels are the right ones to offer the information to the user throughout their journey. These channels could be a website, social media, advertising or even events; that’s why it is important to have all these things in mind when designing content as it offers us (the designer) the language, priorities and flow to work with. Understanding when and how to offer the information to the user can mean the difference between successful or failed content design.
  4. Language and emotion: The way people communicate, especially per section or even country can vary due to colloquialism  – An example that comes to my head from personal experience is how in my home country – Venezuela – some words that we would use with friends like ‘chama’ in Spain it would not be considered appropriate. Differences in terms, need to be considered when designing content. The language used for a product MUST reflect the intended audiences vocabulary, otherwise it will make the user-content interaction extremely difficult and rocky. Whilst language is a very important part of content design, considering emotion can be just as important; Am I connecting with the audience? What is my tone? Richards follows the following set of steps: What will the audience see (and where are they seeing it)? What are they hearing and who from? Which channel? ,How they are feeling, What will our audience be doing? What decisions do they feel they have to make?
  5. Creation: This process should ideally be very collaborative in order to find the best solution for the user.
  6. Sharing: This is an essential part of any designers creative process. Peer reviews whilst scary can offer valuable insight.
  7. Iteration: Learn – Apply – Move on

In Sarah Richards’s book (content design) she highlights the importance of certain content design components such as:

  • Push content: Look at this! Buy it ! This can be described as the content the designer wants to impose unto their audience. It’s content the user did not necessarily or directly asked for but still receives, like a notification.

  • Pull content: It is the description of a product or an eye catching fact, eg good price. This is the time of content that is specifically tailored to the viewer.

  • Ease of use:  fastest way to a happy audience is an easy to understand and interact with website. Knowing your audience can inform you what you need and how you need to execute it. Users will pay more if the interaction is easier; a great example of this was illustrated during Dr Boyd’s lecture where he remarked how users would knowingly pay more for the UK driving test by using other providers over the official government website as it was a very difficult website to navigate. They will especially remember a bad experience.
  • Trust: A trustworthy website will not only promote consumer trust but also loyalty. How does the website present itself? does it look like it could be a scam? Is it littered with spelling errors? if so this will most certainly not instill a sense of ease with the user. Ideally the website should be consistent throughout with its tone of voice, branding and identity.

Here is a marketing article I found written by Céillie Clark-Keane (Head of Marketing for Building Ventures) which I found very helpful. In this article the author highlights the importance of the next 7 marketing strategies:

  1. Building content communities: Building communities specifically around content sharing and creation allows marketing teams to continue to expand their reach, even with fewer resources.The image above illustrates how Slack communities have grown 2.5 times since 2016 and have over a million members. This highlights how communities like these offer benefits beyond networking. Tools like Slack, Twitter, LinkedIn allow you to tap into massive audiences by utilising a modern version of digital ‘word-of-mouth’ marketing, along with increasing brand awareness. As stated by  Masooma Memon (a SaaS content marketer) “Whether it’s content for social, your blog, or a webinar, it’s going to continue focusing on making your audience feel like a community,” she says. “Folks love this sense of community belonging. It makes them feel valued, so this trend should continue picking up pace.” which in turn will positively affect audience engagement.
  2. Going live with video and webinars: Covid-19 has resulted in video and webinar content becoming vital, something that will not soon go away. “My guess is video marketing including the boom in live video will continue to grow in 2021,” Masooma predicts. But it’s not only because of in-person restrictions; there’s a reason why live video was trending well before the pandemic. “The reason? Video is a quick and effective medium to communicate your message and educate your audience. Consumers want to quickly get information and video marketing is the most effective way of doing this.”
  3. Improving content experience: sometimes how you’re interacting with content is just as important as what content you’re interacting with.  Content marketing trends are now focused on content experience, be it, interactive content or better UX.
  4. Focusing on products and services
  5. Repurposing content

(I did not go into detail in the last two as they are self explanatory).

What is content wireframing?

  • A content inventory (audit) is a great way of looking at the content or even the layout of other more skilled designers and see if you can apply or take as inspiration to produce your own ideas. Bellow is the example Kyle gave us.

I found a great article showcasing how to conduct a great content audit – The Step-by-Step Guide to Conducting a Content Audit in 2021.

  • Site-mapping your site is a great way to create a layout for your website on paper before actually bringing it to life.

Here is the example Kyle gave us:

And here is my version – It is still very rough, I will need to continue revising this and improving it.

  • Content wireframing can be considered as the skeleton of the website. Think of the outline of a building and how everything is placed around (the blueprints). Once this is established then you can start making a more detailed wireframe. Design small first then big but only in reference to designing for mobile and then onto desktop view. This should not be as detailed as an actual digital wireframe. These are to be done in great quantities and quickly; they are just a way of quickly noting down your thoughts and ideas.

Think (scale wise) mobile then Tablet then Desktop and then Desktop HD. This is the best way to accurately figure out where the content should go.

Learning from others

Bellow are some great designers with great portfolios I would like to further research.

  • Jack Mcdade
  • John hicks design
  • Xavious Cusso
  • Vandana Pai: Her use of typography is awesome. It takes a real skill to reduce a site down.


This week was very informative, in all honesty I had no idea how much work I had yet to do. It however encouraged me to start my research and to develop not only my website, portfolio and CV but also my personal brand.

I also discovered the importance of content designing and how the users should always be the centre of my focus when designing. The user is key and I should aim to design with them in mind.

Tasks for 30/09/21

  • Write the content for your portfolio – in plain text or in html. Focus on the content. Using your inventory and content wireframes
  • Research and discovery – google trends/job specs/look at language. Look at some portfolios, really study it at a granular level
  • Content audit
  • Sitemap your site
  • Write site content – 3 case studies, home page, about page, contact page
  • Sign up for Webflow.