ericnation.github.io/studiothemes.html at master · ericnation/ericnation.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<section class="section section-diff">
  <div class="container">

    <div class="project-nav">
      <a href="#" class="project-close"><i class="fa fa-times-circle-o"></i></a>
    </div>

    <div class="project-title"><h1>InkSoft Studio Themes</h1></div>

    <div class="project-wrap">
      <div class="browser-window">
        <div class="browser-header">
          <ul class="header-btns">
            <li><span class="browser-header-circle red"></span></li>
            <li><span class="browser-header-circle yellow"></span></li>
            <li><span class="browser-header-circle green"></span></li>
          </ul>
        </div>
        <div class="fit-vid">
          <iframe width="720" height="auto" src="https://www.youtube.com/embed/BZnXyoQclUI" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-sm-4 col-md-3">
        <h5 class="small-header">
          <span>Project info</span>
        </h5>
        <div class="project-info">
          <span><small>Client:</small> InkSoft</span>
          <span><small>Date:</small> December 2014</span>
          <br/>
          <ul class="tags">
            <li><a href="#">UI/UX Design</a></li>
            <li><a href="#">Responsive Design</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">Sass/CSS3</a></li>
            <li><a href="#">JavaScript/jQuery</a></li>
            <li><a href="#">Gulp</a></li>
            <li><a href="#">Content Strategy</a></li>
            <li><a href="#">Dynamic Content</a></li>
          </ul>
          <br/>
          <a href="https://www.inksoft.com/inksoft-studio-gets-5-new-website-themes/" class="btn btn-primary" target="_blank">Launch Website</a>
        </div>
      </div>

      <div class="col-sm-4 col-md-4">
        <h5 class="small-header">
          <span>Background</span>
        </h5>
        <p>My first project when InkSoft hired me was to design and develop 5 new "Studio Themes". "InkSoft Studio" is one of
          InkSoft's product licenses that gives their customer access to a very basic website for their company. It also gives their customer
          access to the Design Studio which is embedded on the theme's Designer page. This product was targeted at potential customers who
          wanted just a basic website with some themeing controls and to have the Design Studio on the website. The only content and pages on
          the Studio Themes was the landing page, Design Studio page, a Contact Us modal, a Login/Sign Up modal, and a Terms & Conditions page.
        </p>
      </div>
      <div class="col-sm-4 col-md-5">
        <h5 class="small-header">
          <span>Process and Solution</span>
        </h5>
        <p>The main challenge I encountered designing these themes was finding a balance with the UI and the content. When I built these
          there wasn't hardly any dynamic content the user could enter from the backend. And they didn't want to add extra content fields at
          at the time so I didn't have much to work with. So trying to come up with content and components that were generic enough for the average
          user was a little difficult. The sites are very basic as far as content goes, but that was by design. A Studio License was an entry level product.
          After researching some popular website layouts at the time I designed 3 different themes with the ability to switch between a dark or light version
          of the theme. I had to take into account that users could load in images for their logo or just text. Text fields could be very long or very short
          for the site description, headline, sub header, etc. Background images for the carousels and herospace had very loose limitations on image size
          so I had to take that into account when coding the responsiveness of the site. Another requirement of this project was that all themes had to
          be responsive. I was able to complete this project in just 6 weeks from design to launch. The launch was successful and customer feedback was positive.
          Customers were happy they had more themes to choose from, more themeable options, and that they were responsive.
        </p>
      </div>

    </div>
  </div>

  <script src="js/main.js"></script>
</section>