<commit_before>// UserExperienceDesign

import React from 'react/addons';
import { Link } from 'react-router';
import { Grid, Row, Col } from 'react-bootstrap';
import styles from './UserExperienceDesign.less';
import withStyles from '../../decorators/withStyles';
import CategoryDetailView from '../../components/CategoryDetailView';
import ContentGrid from '../../components/ContentGrid';

@withStyles(styles)
export default class UserExperienceDesign {
  render() {
    const servicesTitle = 'User-Centred Design Methods';
    const toolsTitle = 'Design Tool Usage Skills';
    const projectsTitle = 'Related Projects';

    return (
      <CategoryDetailView>
        <div className='UserExperienceDesign'>
          <Grid>
            <Row>
              <Col md={12}>
                <h2>User Experience Design</h2>
              </Col>
            </Row>
          </Grid>

          <ContentGrid title={servicesTitle}>
            <Row>
              <Col md={4}>
                <h4>ABC</h4>
                <p>
                  Hello
                </p>
              </Col>
              <Col md={4}>
                <h4>DEF</h4>
                <p>
                  Hello world
                </p>
              </Col>
              <Col md={4}>
                <h4>GHI</h4>
                <p>
                  Lorem ipsum
                </p>
              </Col>
            </Row>
          </ContentGrid>

          <ContentGrid title={toolsTitle}>
            <Row>
              <Col md={4}>
                <h4>Visual Design</h4>
                <p>
                  I usually use Adobe Illustrator and Adobe Photoshop for visual design.
                  Because it is important to support multiple screen resolutions and
                  to be able to export user interface design assets to SVG format nowadays,
                  I have been using Illustrator more for user interface design than Photoshop
                  lately.
                </p>
              </Col>
              <Col md={4}>
                <h4>Clickable Prototypes</h4>
                <p>
                  I have little experience in using Axure for prototyping (we used it in the&nbsp;
                  <Link to='/projects/aalto-mycourses-usability-evaluation'>
                    Aalto MyCourses usability evaluation project
                  </Link>). I have also created some prototypes by just writing code for the
                  target platform (e.g. in HTML or in Objective-C).
                </p>
              </Col>
              <Col md={4}>
                <h4>Animation and Motion Graphics</h4>
                <p>
                  I have some experience in using Adobe After Effects for motion graphics.
                  I have also used Apple Keynote for prototyping simple animations.
                </p>
              </Col>
            </Row>
            <Row>
              <Col md={4}>
                <h4>Wireframing</h4>
                <p>
                  I have used Adobe Illustrator and Balsamiq Mockups for wireframing.
                </p>
              </Col>
            </Row>
          </ContentGrid>

          <ContentGrid title={projectsTitle}>
            <Row>
              <Col md={4}>
                <h4>Viima Mobile User Interface</h4>
                <p><commit_msg>Add more content to UX design page<commit_after>// UserExperienceDesign

import React from 'react/addons';
import { Link } from 'react-router';
import { Grid, Row, Col } from 'react-bootstrap';
import styles from './UserExperienceDesign.less';
import withStyles from '../../decorators/withStyles';
import CategoryDetailView from '../../components/CategoryDetailView';
import ContentGrid from '../../components/ContentGrid';

@withStyles(styles)
export default class UserExperienceDesign {
  render() {
    const servicesTitle = 'User-Centred Design Methods';
    const toolsTitle = 'Design Tool Usage Skills';
    const projectsTitle = 'Related Projects';

    return (
      <CategoryDetailView>
        <div className='UserExperienceDesign'>
          <Grid>
            <Row>
              <Col md={12}>
                <h2>User Experience Design</h2>
              </Col>
            </Row>
          </Grid>

          <ContentGrid title={servicesTitle}>
            <Row>
              <Col md={4}>
                <h4>Usability Evaluation</h4>
                <p>
                  I have conducted traditional usability tests in a usability
                  lab and more informal "lean" user tests during my studies at Aalto
                  University. I have also gained some experience in doing expert reviews
                  with e.g. back-of-the-envelope action analysis and usability
                  guidelines during my studies. For more information,
                  view the <em>related projects</em> at the end of this page.
                </p>
              </Col>
              <Col md={4}>
                <h4>User Interface Design, Wireframing &amp; Prototyping</h4>
                <p>
                  I have designed user interfaces for web apps (for example, I
                  designed large parts
                  of <Link to='/projects/viima-mobile-user-interface'>
                    Viima mobile user interface
                  </Link>)
                  and mobile apps (<Link to='/projects/helsinkigraph'>
                    1
                  </Link>, <Link to='/projects/b-sc-thesis'>
                    2
                  </Link>, <Link to='/projects/personal-finance'>
                    3
                  </Link>, <Link to='/projects/london-travel-guide'>
                    4
                  </Link>).
                  I have also learned how to create wireframes and prototypes
                  (including clickable prototypes and paper prototypes).
                </p>
              </Col>
              <Col md={4}>
                <h4>User Research</h4>
                <p>
                  I am familiar with common user research methods, such as observation
                  and user surveys. I have conducted some user research in
                  the <Link to='/projects/internet-of-things-solutions-for-lansimetro'>
                    Länsimetro Internet of Things project
                  </Link> in the Strategic User-Centred Design course at Aalto University.
                </p>
              </Col>
            </Row>
          </ContentGrid>

          <ContentGrid title={toolsTitle}>
            <Row>
              <Col md={4}>
                <h4>Visual Design</h4>
                <p>
                  I usually use Adobe Illustrator and Adobe Photoshop for visual design.
                  Because it is important to support multiple screen resolutions and
                  to be able to export user interface design assets to SVG format nowadays,
                  I have been using Illustrator more than Photoshop for user interface design
                  lately.
                </p>
              </Col>
              <Col md={4}>
                <h4>Clickable Prototypes</h4>
                <p>
                  I have little experience in using Axure for prototyping (we used it in the&nbsp;
                  <Link to='/projects/aalto-mycourses-usability-evaluation'>
                    Aalto MyCourses usability evaluation project
                  </Link>). I have also created some prototypes by just writing code for the
                  target platform (e.g. in HTML or in Objective-C).
                </p>
              </Col>
              <Col md={4}>
                <h4>Animation &amp; Motion Graphics</h4>
                <p>
                  I have some experience in using Adobe After Effects for motion graphics.
                  I have also used Apple Keynote for prototyping simple animations.
                </p>
              </Col>
            </Row>
            <Row>
              <Col md={4}>
                <h4>Wireframing Tools</h4>
                <p>
                  I have used Adobe Illustrator and Balsamiq Mockups for wireframing.
                </p>
              </Col>
            </Row>
          </ContentGrid>

          <ContentGrid title={projectsTitle}>
            <Row>
              <Col md={4}>
                <h4>Viima Mobile User Interface</h4>
                <p>
{'fraction_non_alphanumeric': 0.088830360349575, 'fraction_numerical': 0.007183048006704178, 'mean_word_length': 1.318623369414377, 'pattern_counts': {'":': 0, '<': 157, '<?xml version=': 0, '>': 157, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7148589', 'n_tokens_mistral': 2142, 'n_tokens_neox': 1957, 'n_words': 684}