[1/9] Become a Full Stack .NET Developer: Moving Towards a Beautiful Design

In this module we learnt about the more artistic and creative side of web development. On many real world projects, a team won't have a dedicated web designer so in those cases the web developer will have to know at least the basics about what constitutes a pleasing and welcoming design, which is why it is important to cover this now.

View fullsize

We ultimately choose a warm inviting colour for our Gighub app. Red was picked as it symbolizes warmth and passion which are good qualities to invoke in a social networking app.

In terms of our GigHub app, it was noted that the black navigation bar currently in effect was a bit too drab and boring for our tastes. We decided we needed to choice a primary color our app's navigation bar. Colour in design is very subjective as it can provoke different reactions in different people. We examined the differences between various shades of warm, cool and neutral colours and what kind of web apps are they most appropriately used with. We ultimately picked red to be our primary colour for Gighub as it symbolizes warmth and passion which our good qualities to invoke in a social networking app.

In order to change the colour of our app's navigation bar, we opened up Chrome Developer Tools in our browser and used it to identity the proper CSS rule to change the black navigation bar to a bright vibrant red (along with changing some of the linking colours). We then proceeded to go the Site.CSS file in the content folder of our app project, which is were the default CSS code for our app is stored. At the end of this file we appended a new section (Bootstrap-Overrides). We overrided the Site.CSS file instead of the Bootstrap.CSS file because if there is ever an update to Bootstrap any changes we make to that file would be lost.

/* Bootstrap Overrides */
.navbar-inverse {
  background-color: #ff4342;
  border-color: #ff4342;
}

.navbar-inverse .navbar-nav > li > a {
  color: #fff;
}
  
  .navbar-inverse .navbar-brand {
    color: #999999;
  }

After changing the look of our navigation bar, we turned to consider the issue of fonts. Our app's font currently was just the basic standard Times New Roman. We desired to give our app a more appealing and unique font to help text stand out more. We investigated Google Fonts and weather it had a suitable font we could use.

Looking through the font samples on the Google Fonts website, we decided upon a grouping of three different fonts (all of which were in a more modern and sleeker visual style). The Google Fonts website generated link reference which we proceeded to add to the header of Layout.CSHTML file.

From here we began tweaking the look of our Add a Gig form, by doing on the fly changes in Google Developer Tools and then adding them to our BootStrap-Overrides CSS file.

I will gloss over some of the description of what we did here, but suffice to say we improved the look of our form, navigation bar and added a dropdown list (using Bootstrap) to our navbar (that contained logged in user details and a way to log out if needed.

Now satisfied with the way our app now looked we committed the changes to the repository and moved on tot he next module.

View fullsize

How our app looked at the beginning of this module.

View fullsize

How our app looked at the end of this module.