1. <overview>

Duration: 3 months

Role: Developer

Link: https://kaziathardesigns.github.io/Portfolio-Site-Kazi-Athar/

Tools used: Atom, W3C Markup Validation Service, Codepen.io, Github

2. <context and challenge>

<Context>

As a Designer, you get to work with developers all the time and therefore it is important to understand the importance of how to communicate efficiently with the development team. In a project that is fast paced with limited time and budget, communication is key. To be able to present my ideas as a UX/UI Designer confidently, I embarked on this journey of learning Front-End Development. Not only it gave me an understanding of code, but it also instilled a holistic product development approach into my skill set. Evidently, making me a better Designer.

<Challenge>

Obviously it was a difficult situation for me as I had no prior experience of HTML, CSS or JavaScript. However, it didn’t discourage me to pursue my passion and get to know what goes on ‘under the hood’ of the car, so to speak!

<Strategy>

I wanted some inspiration to begin with, so I went to different platforms such as Bootstrap and Foundation to get some ideas. Atom was my go-to text editor for me and I used it in combination with Github to push my code online. Moreover, I was constantly consulting my mentor, W3Schools, YouTube and other platforms for guidance and troubleshooting.

3. <process and insights>

<HTML>

I started out by formulating a basic structure for the website. This was all new to me so I took my time with every step. HTML, or Hyper Text Markup Language is the building block of a website. It instructs the computer on what to include in the structure of the website. I learned a lot about divs and how the overall formation is divided into different divs and containers and why that matters. Following is the HTML for the hero image.

 
    <!--welcome section-->
    <div class="section" id="hero">
      <div class="container">
        <h1><span>Hi there!</span> I'm a <span class="color">UX/UI </span>Designer who knows <span class="color">HTML, CSS,</span> and <span class="color">JavaScript</span>.<span>Based in Helsinki, Finland.</span></h1>
        <a href="#work" class="button-hero">See my work</a>
      </div><!-- ending of section that holds my hero text-->
    </div>
    <!--ending of section that contains all the info-->
    <!--end of the welcome section-->
 

I created 3 pages in total using HTML, the home page, about page, and the project page. Here I basically added all the different sections and containers. The text including the headings and body were also displayed using HTML. However, at this point, nothing could be distinguished as it was just plain HTML text..

<CSS>

CSS or Cascading Style Sheets is a protocol used to instruct the web browser on how to display HTML content. This is where I started putting some flair to my HTML. I determined what the structure of the headings would be, for instance H1, H2, and so on. Moreover, things like paddings, margins, font weight or size, positioning, colors, and animations were done using CSS. Here’s a snippet of how I styled the hero image of the website.

 
#hero {
  background-image: url(../img/dark-triangle.svg);
  margin: 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 75px 0;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}
 

Here we can see how the interactions with the buttons was added. Following is the snippet of the code and how it played out in real time.

 
.button.contact {
  background-color: transparent;
  color: #fff !important;
  border: 2px solid #f67762;
}

.button.contact:hover {
  color: #353535 !important;
  background-color: #f67762;
}
 
 

Following is an animation. We can see how the clouds move and the sun changes color. This was done using CSS.

 
.berlin-illustration {
  width: 100%;
  max-width: 100%;
  height: auto;
}

@keyframes color-change {
  0% {
    fill: #edc655;
  }

  50% {
    fill: #fcffad;
  }

  100% {
    fill: #f76414;
  }
}

.sun {
  animation: 4s color-change infinite alternate linear;
}

@keyframes cloud-move {
  from {
    transform: translate(0, 50px);
  }

  to {
    transform: translate(200px, 50px);
  }
}

.cloud-front {
  animation: 30s cloud-move infinite alternate linear;
}

@keyframes cloud-move-reverse {
  from {
    transform: translate(446px, 48px);
  }

  to {
    transform: translate(100px, 48px);
  }
}

.cloud-back {
  animation: 34s cloud-move-reverse infinite alternate linear;
}
 
 

<JavaScript>

By this time, the website was looking very well structured already. However, a website can’t be complete without JavaScript. Javascript (JS) is a scripting language used primarily on the web browser. Its purpose is to enhance HTML pages and make them more interactive. For this particular project, I didn’t use a lot of it. However, websites nowadays have a lot of moving parts and readily use JS. Here’s a snippet of the code I used to make the mobile menu interactive. I applied an ‘if else’ loop to the HTML. This way when user tap on the menu button for mobile. It opens it up.

 
function menuToggle () {
  var x = document.getElementById('myNavtoggle')

  if (x.className === 'navtoggle') {
    x.className += ' responsive'
  } else {
    x.className = 'navtoggle'
  }
}
 
 

<User Testing>

Once the website was complete, I took it through some usability testing with 5 different people. This was a pivotal step in the process as it notified me of any biases that I may have had since the beginning as I had nothing but my own pair of eyes and it never hurts to try a fresh perspective. Or in this case, 5 different ones.

Here’s how I defined the success criteria.

 

<Good, Bad and the Errors>

To cut to the chase, there weren’t any major usability problems experienced. The usability tests went well and gave me enough confidence to move forward with my design choices. It was a bit sigh of relief. The feedback was based on Jakob Nielsen’s Severity Rankings for Usability Problems.

4. <the final product>

The link for the website: https://kaziathardesigns.github.io/Portfolio-Site-Kazi-Athar/. It’s still a live project and changes will be made as time goes on.

<retrospect>

So let’s look back at the project and see how it played in hindsight.

<what went well?>

Considering I had no prior experience of web development, I am satisfied with how it played out. The execution went well . With the help of my mentor, I was able to deal with the errors and problems that occurred. The layout looks modern and the mobile version provides full functionality as well.

<what didn't go well?>

I would have to say that pushing my commits to the live branch on Github was a bit of a problem. It would update on the master branch, however, merging the two branches was a bit of a problem. So I had to manually edit the live branch.

<what could be better?>

Obviously with time, I plan on optimizing the website and making it a fully functional primary website. I’d like to apply advanced CSS methodologies to it. I’d want to add more projects and present my skills on a higher level.